Added name field to the email-form widget (#449)

* Added name field to the email-form widget * Responsive design --------- Co-authored-by: Rajat Saxena <[email protected]>
codelitdev · Aug 29, 2024 · 6d466b4 · 6d466b4
1 parent 66a4747
commit 6d466b4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/apps/web/graphql/mails/logic.ts b/apps/web/graphql/mails/logic.ts
@@ -31,18 +31,21 @@ import MailRequestStatusModel, {
 const { permissions } = constants;
 
 export async function createSubscription(
+    name: string,
     email: string,
     ctx: GQLContext,
 ): Promise<boolean> {
     try {
         let dbUser: User | null = await UserModel.findOne({
+            name,
             email,
             domain: ctx.subdomain._id,
         });
 
         if (!dbUser) {
             dbUser = await createUser({
                 domain: ctx.subdomain!,
+                name: name,
                 email: email,
                 lead: constants.leadNewsletter,
             });

diff --git a/apps/web/graphql/mails/mutation.ts b/apps/web/graphql/mails/mutation.ts
@@ -31,13 +31,14 @@ const mutations = {
     createSubscription: {
         type: GraphQLBoolean,
         args: {
+            name: { type: new GraphQLNonNull(GraphQLString) },
             email: { type: new GraphQLNonNull(GraphQLString) },
         },
         resolve: async (
             _: any,
-            { email }: { email: string },
+            { name, email }: { name: string; email: string },
             context: GQLContext,
-        ) => createSubscription(email, context),
+        ) => createSubscription(name, email, context),
     },
     // createMail: {
     //     type: types.mail,

diff --git a/apps/web/graphql/users/logic.ts b/apps/web/graphql/users/logic.ts
@@ -257,12 +257,14 @@ export const recordProgress = async ({
 
 export async function createUser({
     domain,
+    name,
     email,
     lead,
     superAdmin = false,
     subscribedToUpdates = true,
 }: {
     domain: Domain;
+    name?: string;
     email: string;
     lead?:
         | typeof constants.leadWebsite
@@ -273,6 +275,7 @@ export async function createUser({
 }): Promise<User> {
     const newUser: Partial<User> = {
         domain: domain._id,
+        name: name,
         email: email,
         active: true,
         purchases: [],

diff --git a/packages/common-widgets/src/email-form/widget.tsx b/packages/common-widgets/src/email-form/widget.tsx
@@ -45,6 +45,7 @@ const Widget = ({
     dispatch,
 }: WidgetProps) => {
     const [email, setEmail] = useState("");
+    const [name, setName] = useState("");
     const justifyContent =
         alignment === "center"
             ? "center"
@@ -57,7 +58,7 @@ const Widget = ({
 
         const mutation = `
             mutation {
-                response: createSubscription(email: "${email}")
+                response: createSubscription(name: "${name}" email: "${email}")
             }
         `;
 
@@ -78,6 +79,7 @@ const Widget = ({
                         ),
                     ),
                 );
+                setName("");
                 setEmail("");
             } else {
                 dispatch(
@@ -114,7 +116,25 @@ const Widget = ({
                 >
                     <h2 className="text-4xl mb-4">{title || DEFAULT_TITLE}</h2>
                     {subtitle && <h3 className="mb-4">{subtitle}</h3>}
-                    <div className="flex gap-2 items-end">
+                    <div
+                        className="flex flex-col md:!flex-row gap-2 w-full"
+                        style={{
+                            justifyContent,
+                        }}
+                    >
+                        <FormField
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="Enter your name"
+                            type="text"
+                            required
+                            messages={[
+                                {
+                                    match: "valueMissing",
+                                    text: "Your name is required",
+                                },
+                            ]}
+                        />
                         <FormField
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
@@ -143,13 +163,6 @@ const Widget = ({
                             {btnText || DEFAULT_BTN_TEXT}
                         </Button2>
                     </div>
-                    {/* <FormSubmit
-                    style={{
-                        backgroundColor: btnBackgroundColor,
-                        color: btnForegroundColor,
-                    }}
-                    disabled={state.networkAction}
-                /> */}
                 </Form>
             </div>
         </section>