feat: add widget id settings in request server method

nossas · Jun 14, 2021 · a1435fb · a1435fb
1 parent 062e2a1
commit a1435fb
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 32 deletions.
diff --git 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<DonationProps> = ({ 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
@@ -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 (
     <Stack spacing={4} maxW="430px">

diff --git 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<SubscribeFormProps> = ({
   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 (
     <Box bg="white" p="12" borderRadius="12px" boxShadow="base">

diff --git 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<SubscribeKind, Subscribe>;
 
-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<number> => {
+  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
@@ -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");
+  }
+}