From a1435fb7fc78eb2583f775b1529bae4f68f54338 Mon Sep 17 00:00:00 2001 From: Igor Santos Date: Mon, 14 Jun 2021 17:22:30 -0300 Subject: [PATCH] feat: add widget id settings in request server method --- components/Donation/index.tsx | 7 ++-- components/NewsletterForm/index.tsx | 4 +-- content/SubscribeForm/index.tsx | 4 +-- content/SubscribeForm/settings.ts | 50 ++++++++++++++--------------- pages/api/settings.ts | 34 ++++++++++++++++++++ 5 files changed, 67 insertions(+), 32 deletions(-) create mode 100644 pages/api/settings.ts diff --git a/components/Donation/index.tsx b/components/Donation/index.tsx index 295df492..93d35a0e 100644 --- a/components/Donation/index.tsx +++ b/components/Donation/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { Heading, @@ -18,7 +18,7 @@ import { Formik, FormikProps } from "formik"; import { Elements, useStripe, useElements } from "@stripe/react-stripe-js"; import { useTranslation } from "next-i18next"; -import { getWidgetId } from "../../content/SubscribeForm/settings"; +import { useWidgetId } from "../../content/SubscribeForm/settings"; import getStripe from "../../lib/getStripe"; import Lock from "./Lock"; import { @@ -53,7 +53,8 @@ const Donation: React.FC = ({ registerDonate, ...props }) => { const { isOpen, onOpen, onClose } = useDisclosure(); const { t, i18n } = useTranslation("common"); - const widgetId = getWidgetId("donation", i18n.language as any); + const widgetId = useWidgetId("donation", i18n.language as any); + // use stripe in 2-step, see ./CardForm handleSubmit const stripe = useStripe(); const elements = useElements(); diff --git a/components/NewsletterForm/index.tsx b/components/NewsletterForm/index.tsx index f0f25a8a..e34a1991 100644 --- a/components/NewsletterForm/index.tsx +++ b/components/NewsletterForm/index.tsx @@ -6,7 +6,7 @@ import { useTranslation } from "next-i18next"; import InputField from "../../components/Form/InputField"; import SubmitFormEntry from "../../components/Form/SubmitFormEntry"; -import { getWidgetId } from "../../content/SubscribeForm/settings"; +import { useWidgetId } from "../../content/SubscribeForm/settings"; interface Values { first_name: string; @@ -30,7 +30,7 @@ const Header = ({ inverted, title, description }) => ( const NewsletterForm = ({ inverted }: any) => { const { t, i18n } = useTranslation("common"); - const widgetId = getWidgetId("newsletter", i18n.language as any); + const widgetId = useWidgetId("newsletter", i18n.language as any); return ( diff --git a/content/SubscribeForm/index.tsx b/content/SubscribeForm/index.tsx index 14e2961d..6f681725 100644 --- a/content/SubscribeForm/index.tsx +++ b/content/SubscribeForm/index.tsx @@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"; import { Button, Heading, Box, Stack, Text } from "@chakra-ui/react"; import { Formik, Form, FormikProps } from "formik"; import * as Yup from "yup"; -import { getWidgetId, SubscribeKind } from "./settings"; +import { useWidgetId, SubscribeKind } from "./settings"; import InputField from "../../components/Form/InputField"; import SelectField from "../../components/Form/SelectField"; @@ -44,7 +44,7 @@ const SubscribeForm: React.FC = ({ fieldsComponent: FieldsComponent, }) => { const { t, i18n } = useTranslation("common"); - const widgetId: number = getWidgetId(kind, i18n.language as any); + const widgetId: number = useWidgetId(kind, i18n.language as any); return ( diff --git a/content/SubscribeForm/settings.ts b/content/SubscribeForm/settings.ts index ba436572..77c49765 100644 --- a/content/SubscribeForm/settings.ts +++ b/content/SubscribeForm/settings.ts @@ -1,4 +1,5 @@ -// +import { useState, useEffect } from "react"; +import { fetchPostJSON } from "../../lib/apiHelpers"; export type SubscribeKind = | "incubations" @@ -14,29 +15,28 @@ export type Subscribe = { export type SubscribeSettings = Record; -export const getWidgetId = ( +export const getWidgetId = async ( kind: SubscribeKind, locale: "pt-BR" | "en" -): number => - ({ - incubations: { - "pt-BR": parseInt(process.env.NEXT_PUBLIC_INCUBATIONS_WIDGET_ID), - en: parseInt(process.env.NEXT_PUBLIC_INCUBATIONS_EN_WIDGET_ID), - }, - materials: { - "pt-BR": parseInt(process.env.NEXT_PUBLIC_MATERIALS_WIDGET_ID), - en: parseInt(process.env.NEXT_PUBLIC_MATERIALS_EN_WIDGET_ID), - }, - donation: { - "pt-BR": parseInt(process.env.NEXT_PUBLIC_DONATION_WIDGET_ID), - en: parseInt(process.env.NEXT_PUBLIC_DONATION_EN_WIDGET_ID), - }, - newsletter: { - "pt-BR": parseInt(process.env.NEXT_PUBLIC_NEWSLETTER_WIDGET_ID), - en: parseInt(process.env.NEXT_PUBLIC_NEWSLETTER_EN_WIDGET_ID), - }, - workwithus: { - "pt-BR": parseInt(process.env.NEXT_PUBLIC_WORKWITHUS_WIDGET_ID), - en: parseInt(process.env.NEXT_PUBLIC_WORKWITHUS_EN_WIDGET_ID), - }, - }[kind][locale]); +): Promise => { + const resp: SubscribeSettings = await fetchPostJSON( + "http://localhost:3000/api/settings" + ); + + return resp[kind][locale]; +}; + +export const useWidgetId = ( + kind: SubscribeKind, + language: "pt-BR" | "en" +): number => { + const [widgetId, setWidgetId] = useState(null); + + useEffect(() => { + getWidgetId(kind, language).then((id: number) => { + setWidgetId(id); + }); + }, [language]); + + return widgetId; +}; diff --git a/pages/api/settings.ts b/pages/api/settings.ts new file mode 100644 index 00000000..dafb0d29 --- /dev/null +++ b/pages/api/settings.ts @@ -0,0 +1,34 @@ +import { NextApiRequest, NextApiResponse } from "next"; + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { + if (req.method === "POST") { + try { + res.status(200).json({ + incubations: { + "pt-BR": parseInt(process.env.INCUBATIONS_WIDGET_ID), + en: parseInt(process.env.INCUBATIONS_EN_WIDGET_ID), + }, + materials: { + "pt-BR": parseInt(process.env.MATERIALS_WIDGET_ID), + en: parseInt(process.env.MATERIALS_EN_WIDGET_ID), + }, + donation: { + "pt-BR": parseInt(process.env.DONATION_WIDGET_ID), + en: parseInt(process.env.DONATION_EN_WIDGET_ID), + }, + newsletter: { + "pt-BR": parseInt(process.env.NEWSLETTER_WIDGET_ID), + en: parseInt(process.env.NEWSLETTER_EN_WIDGET_ID), + }, + }); + } catch (err) { + res.status(500).json({ statusCode: 500, message: err.message }); + } + } else { + res.setHeader("Allow", "POST"); + res.status(405).end("Method Not Allowed"); + } +}