Merge branch 'main' into feature/i18n

results/src/core/blocks/other/NewsletterBlock.tsx

@@ -4,7 +4,7 @@ import Newsletter from 'core/components/Newsletter'
 import { useI18n } from '@devographics/react-i18n'
 import { spacing } from 'core/theme'
 import NewsletterMC from 'core/components/NewsletterMC'
-import NewsletterPOST from 'core/components/NewsletterPOST'
+import NewsletterPOST from 'core/components/NewsletterPost'
 
 const NewsletterBlock = () => {
     const { translate } = useI18n()

results/src/core/components/NewsletterPost.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+import { useI18n } from '@devographics/react-i18n'
+import T from 'core/i18n/T'
+import { usePageContext } from 'core/helpers/pageContext'
+import Button from './Button'
+import styled from 'styled-components'
+import { fontWeight, spacing } from 'core/theme'
+import jsonp from 'jsonp'
+
+export default function NewsletterPOST({ locale }: { locale?: any }) {
+    const [email, setEmail] = useState('')
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<{ message: string } | null>(null)
+    const [success, setSuccess] = useState<{ message: string } | null>(null)
+
+    const postUrl = process.env.GATSBY_EMAIL_POST_URL || ''
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const email = e.target.value
+        setEmail(email)
+    }
+
+    const handleSubmit = async (e: SubmitEvent) => {
+        setLoading(true)
+
+        console.log('SUBMITTING')
+
+        e.preventDefault()
+        const result = await fetch(postUrl, {
+            method: 'POST',
+            body: JSON.stringify({ 'email_address[email]': email })
+        })
+        console.log(result)
+    }
+
+    return (
+        <div className="newsletter">
+            <h3 className="newsletter-heading">
+                <T k="newsletter.stay_tuned" />
+            </h3>
+            <p className="newsletter-details">
+                <T k="newsletter.leave_your_email" />
+            </p>{' '}
+            {success ? (
+                <div className="newsletter-message newsletter-success">{success.message}</div>
+            ) : (
+                <NewsletterForm
+                    email={email}
+                    loading={loading}
+                    handleSubmit={handleSubmit}
+                    handleChange={handleChange}
+                />
+            )}
+            {error && (
+                <Error_ className="newsletter-message newsletter-error">{error.message}</Error_>
+            )}
+        </div>
+    )
+}
+
+const NewsletterForm = ({
+    email,
+    loading,
+    handleSubmit,
+    handleChange
+}: //locale
+{
+    email: string
+    loading?: boolean
+    handleSubmit?: any
+    handleChange?: any
+}) => {
+    const { getString } = useI18n()
+
+    return (
+        <div className="newsletter-form">
+            <Form_ method="post" action={process.env.GATSBY_EMAIL_POST_URL}>
+                <Input_
+                    className="newsletter-email"
+                    id="email_address_email"
+                    name="email_address[email]"
+                    type="email"
+                    placeholder={getString('newsletter.email')?.t}
+                    onChange={handleChange}
+                    value={email}
+                    disabled={loading}
+                />
+                <Button type="submit" name="subscribe" className="newsletter-button button">
+                    <T k="newsletter.submit" />
+                </Button>
+            </Form_>
+        </div>
+    )
+}
+
+const Input_ = styled.input`
+    padding: 10px 20px;
+`
+
+const Form_ = styled.form`
+    align-items: center;
+    display: flex;
+    gap: ${spacing(0.5)};
+`
+
+const Error_ = styled.div`
+    color: #fe6a6a;
+    margin-top: ${spacing()};
+    font-weight: ${fontWeight('bold')};
+`

results/src/core/helpers/blockHelpers.ts

@@ -234,7 +234,7 @@ export const getBlockImage = ({
     pageContext: PageContextValue
 }) => {
     const capturesUrl = `${process.env.GATSBY_ASSETS_URL}/captures/${pageContext.currentEdition.id}`
-    return `${capturesUrl}${get(pageContext, 'locale.path')}/${block.id}.png`
+    return `${capturesUrl}/${get(pageContext, 'locale.id')}/${block.id}.png`
 }
 
 interface UrlParams {

surveyform/src/lib/surveys/data.ts

@@ -55,6 +55,7 @@ export const getSurveyParamsTable = (): SurveyParamsTable => ({
     2021: { surveyId: "tokyodev", editionId: "td2021" },
     2022: { surveyId: "tokyodev", editionId: "td2022" },
     2023: { surveyId: "tokyodev", editionId: "td2023" },
+    2024: { surveyId: "tokyodev", editionId: "td2024" },
   },
 });
 

surveyform/src/stylesheets/main.scss

@@ -1,12 +1,3 @@
-// Import styles from vulcan:bootstrap (Meteor version, copied locally)
-// TODO: if we recreate bootstrap in vulcan npm, we can expose those styles
-// @import "./vulcan:bootstrap/bootstrap.min.css";
-// @import "./vulcan:bootstrap/datetime.scss";
-// @import "./vulcan:bootstrap/likert.scss";
-// @import "./vulcan:bootstrap/style.scss";
-// @import "./vulcan:bootstrap/typeahead-bs5.scss";
-// @import "./vulcan:bootstrap/typeahead.scss";
-
 // Import State of js styles
 @import "_bootstrap.scss";