Merge pull request #243 from piyushyadav1617/dev-branch

Updated email setting in widget settings
piyushyadav1617 · Nov 17, 2023 · 39a4bae · 39a4bae
2 parents a6e80c9 + 2980fd9
commit 39a4bae
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 29 deletions.
diff --git a/src/app/dashboard/(organisation)/[slug]/widget/components/SocialSignInPopup.tsx b/src/app/dashboard/(organisation)/[slug]/widget/components/SocialSignInPopup.tsx
@@ -36,7 +36,6 @@ function SocialSignInPopup({ socialName }: { socialName: string }) {
   const active = social[socialType] ? true : false;
   // const generic = !active ? false : (social[socialType]?.CLIENT_ID);
   const generic = !active ? false : !social[socialType].CLIENT_ID;
-  console.log(generic);
   const destructiveToast = () => {
     toast({
       variant: 'destructive',

diff --git a/src/app/dashboard/(organisation)/[slug]/widget/components/email-settings.tsx b/src/app/dashboard/(organisation)/[slug]/widget/components/email-settings.tsx
@@ -1,8 +1,27 @@
-import { useEffect } from 'react';
-import { useWidgetStore } from '../widgetStore';
+'use client';
+import { useEffect, useState } from 'react';
+import { useWidgetStore, updateStoreWithFetch } from '../widgetStore';
 import { WidgetInput } from './widget-input';
-
+import { Button } from '@/components/ui/Button';
+import { useAuth } from '@/Providers/AuthContext';
+import { OrgObject } from '../widgetStore';
+import { useToast } from '@/components/ui/use-toast';
+import Spinner from '@/components/spinner';
+import '@total-typescript/ts-reset';
+import { useParams } from 'next/navigation';
 export function EmailSettings() {
+  const { slug: ORG_ID } = useParams();
+  const { token } = useAuth();
+  const { toast } = useToast();
+  const destructiveToast = () => {
+    toast({
+      variant: 'destructive',
+      title: 'Uh oh! Something went wrong.',
+      description: 'There was a problem with your request.'
+    });
+  };
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   const {
     smtpProvider,
     smtpPort,
@@ -14,6 +33,48 @@ export function EmailSettings() {
     setPassword
   } = useWidgetStore();
 
+  const emailObj = {
+    email_provider: {
+      smtp: {
+        password: password,
+        username: userOrEmail,
+        smtp_server: smtpProvider,
+        smtp_port: smtpPort
+      }
+    }
+  };
+  async function handleSave() {
+    setIsLoading(true);
+    try {
+      // console.log(JSON.stringify(widgetObj));
+      const res = await fetch(`https://api.trustauthx.com/org/${ORG_ID}`, {
+        method: 'PUT',
+        headers: {
+          accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify(emailObj)
+      });
+
+      if (res.status === 200) {
+        setIsLoading(false);
+        toast({
+          title: 'Success!',
+          description: 'Your settings have been saved successfully',
+          variant: 'success'
+        });
+        if (token) await updateStoreWithFetch(token, ORG_ID);
+      } else {
+        setIsLoading(false);
+        destructiveToast();
+      }
+    } catch (err) {
+      console.log(err);
+      setIsLoading(false);
+      destructiveToast();
+    }
+  }
   return (
     <div className="flex flex-col space-y-10">
       <WidgetInput
@@ -43,6 +104,17 @@ export function EmailSettings() {
         value={password}
         type="password"
       />
+      <Button variant={'authx'} className="w-40" onClick={handleSave}>
+        {isLoading ? (
+          <div className="flex flex-row gap-1 items-center">
+            <Spinner size={16} color="green" />
+
+            <span>Saving...</span>
+          </div>
+        ) : (
+          'Save'
+        )}
+      </Button>
     </div>
   );
 }
diff --git a/src/app/dashboard/(organisation)/[slug]/widget/components/widget-footer.tsx b/src/app/dashboard/(organisation)/[slug]/widget/components/widget-footer.tsx
@@ -14,9 +14,6 @@ type FooterProps = {
   reset: () => void;
 };
 
-// const ORG_ID =
-//   '73bbc4bf458a4f66acab0a8cfefa47d13aa33402120d11ee88069dc8f7663e88';
-
 // TODO: Update server state on clicking save
 // Object to update server state / push
 // Logo string defaults to ""
@@ -71,7 +68,7 @@ export function WidgetFooter({ reset }: FooterProps) {
   const widgetObj: OrgObject = {
     name: displayName,
     host: hostURL,
-    social: social,
+    // social: social,
     widget: {
       name: displayName,
       logo_url: s3ImageUrl,
@@ -103,28 +100,13 @@ export function WidgetFooter({ reset }: FooterProps) {
       color9: color9.hex,
       color10: nameFontColor.hex,
       color11: greetingFontColor.hex
-    },
-    email_provider: {
-      smtp: {
-        smtp_server: smtpProvider,
-        smtp_port: smtpPort,
-        username: userOrEmail,
-        password: password
-      }
     }
   };
-  // smtpProvider,
-  // smtpPort,
-  // userOrEmail,
-  // password,
+
   if (callbackURL) widgetObj.callback_url = callbackURL;
   if (redirectURL) widgetObj.widget.redirect_url = redirectURL;
   if (tncURL) widgetObj.tnc_url = tncURL;
   if (ppURL) widgetObj.pp_url = ppURL;
-  // if(smtpProvider) widgetObj.email_provider.smtp.smtp_server = smtpProvider;
-  // if(smtpPort) widgetObj.email_provider.smtp.smtp_port = smtpPort;
-  // if(userOrEmail) widgetObj.email_provider.smtp.username = userOrEmail;
-  // if(password) widgetObj.email_provider.smtp.password = password;
 
   // if (smtpPort)
   const destructiveToast = () => {

diff --git a/src/app/dashboard/(organisation)/[slug]/widget/widgetStore.ts b/src/app/dashboard/(organisation)/[slug]/widget/widgetStore.ts
@@ -50,16 +50,16 @@ export type OrgObject = {
     color11: string;
     redirect_url?: string;
   };
-  email_provider: {
+  email_provider?: {
     smtp: {
-      password: string | undefined;
-      username: string | undefined;
-      smtp_server: string | undefined;
+      password?: string | undefined;
+      username?: string | undefined;
+      smtp_server?: string | undefined;
       smtp_port?: string | undefined;
     };
   };
   callback_url?: string;
-  social: Social;
+  social?: Social;
   tnc_url?: string;
   pp_url?: string;
 };