QF-2017 QDC unified registration cleanup

.windsurf/rules/prompts.md

@@ -0,0 +1,6 @@
+---
+trigger: always_on
+description: For all prompts
+---
+
+For all prompts I write do not make any changes, until you have 95% confidence that you know what to build ask me follow up questions until you have that confidence.

locales/ar/common.json

@@ -465,5 +465,6 @@
     "title": "نطق الكلمة عند النقر عليها"
   },
   "word-tooltip": "الأداة الإرشادية للكلمات",
-  "yes": "نعم"
+  "yes": "نعم",
+  "back": "عودة"
 }

locales/en/common.json

@@ -114,7 +114,12 @@
     "sub-header": "Share your interest by filling out this form, and we’ll reach out when a suitable opportunity is available, insha’Allah.",
     "title": "Community"
   },
-  "complete-sign-up": "Complete your registration",
+  "complete-signup": {
+    "title": "Complete your registration",
+    "description": "We require the following missing information to complete your registration.",
+    "verification-code": "Verification Code",
+    "verification-code-sent-to": "Verification code sent to {{email}}"
+  },
   "consents": {
     "communication": {
       "body": "🚀 Supercharge your progress through <boldSpan>personalized</boldSpan> notifications about your goal progress, maintaining streaks, and enhancing your usage of our current features.<br></br><br></br> Can we keep you in the loop through email and other channels? You're in control – feel free to adjust these preferences anytime in your account settings.<br></br><br></br> Simply select 'Allow' for <boldSpan>inspiring reminders</boldSpan> or 'Not Now' to decline.",
@@ -465,5 +470,6 @@
     "title": "Word Click"
   },
   "word-tooltip": "Word Tooltip",
-  "yes": "Yes"
+  "yes": "Yes",
+  "back": "Back"
 }

locales/en/login.json

@@ -56,7 +56,7 @@
   "first-name-placeholder": "First Name",
   "forgot-password": "Forgot password",
   "forgot-password-description": "Enter your email address and we'll send you instructions to reset your password.",
-  "forgot-password-success": "Password reset email sent! Please check your inbox.",
+  "forgot-password-success": "If your email address exists in our database, you will receive a password recovery link at your email address in a few minutes.",
   "forgot-password-title": "Forgot password?",
   "last-name-placeholder": "Last Name",
   "login-cta": "Sign in or Sign up now:",

src/components/Auth/UserAccountModal.tsx

@@ -4,9 +4,7 @@ import Modal from '@/dls/Modal/Modal';
 import useSyncUserData from '@/hooks/auth/useSyncUserData';
 import ConsentType from '@/types/auth/ConsentType';
 import Announcement from 'types/auth/Announcement';
-import FormField from 'types/FormField';
 
-const CompleteSignupForm = dynamic(() => import('@/components/Login/CompleteSignupForm'));
 const AnnouncementModalBodyResolver = dynamic(
   () => import('@/components/Auth/Announcements/AnnouncementModalBodyResolver'),
 );
@@ -18,17 +16,15 @@ const requiredConsentsEnabled = process.env.NEXT_PUBLIC_ENABLE_REQUIRED_CONSENTS
 const REQUIRED_CONSENTS = [ConsentType.COMMUNICATION];
 
 type Props = {
-  requiredFields: FormField[];
   announcement: Announcement;
   consents: Record<string, boolean>;
 };
 
-const UserAccountModal: React.FC<Props> = ({ requiredFields, announcement, consents }) => {
+const UserAccountModal: React.FC<Props> = ({ announcement, consents }) => {
   useSyncUserData();
+
   let modalBody;
-  if (requiredFields && requiredFields?.length !== 0) {
-    modalBody = <CompleteSignupForm requiredFields={requiredFields} />;
-  } else if (announcement) {
+  if (announcement) {
     modalBody = <AnnouncementModalBodyResolver announcement={announcement} />;
   } else if (requiredConsentsEnabled && consents) {
     const missingConsents = REQUIRED_CONSENTS.filter(

src/components/Fonts/FontPreLoader.tsx

@@ -11,7 +11,7 @@ const SURAH_NAMES_FONT = {
 
 const LOCALE_PRELOADED_FONTS = {
   [DEFAULT_LOCALE]: [
-    { type: 'font/woff2', location: '/fonts/lang/Figtree/Figtree.ttf' },
+    { type: 'font/ttf', location: '/fonts/lang/Figtree/Figtree.ttf' },
     { ...SURAH_NAMES_FONT },
   ],
   ar: [

src/components/FormBuilder/FormBuilder.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import classNames from 'classnames';
 import { Controller, useForm } from 'react-hook-form';
 
@@ -20,6 +21,7 @@ type FormBuilderProps<T> = {
   actionText?: string;
   actionProps?: ButtonProps;
   renderAction?: (props: ButtonProps) => React.ReactNode;
+  shouldSkipValidation?: boolean;
 };
 
 /**
@@ -51,6 +53,7 @@ const FormBuilder = <T,>({
   actionProps = {},
   isSubmitting,
   renderAction,
+  shouldSkipValidation,
 }: FormBuilderProps<T>) => {
   const { handleSubmit, control, setError } = useForm({ mode: 'onBlur' });
 
@@ -67,16 +70,21 @@ const FormBuilder = <T,>({
     }
   };
 
+  const renderError = (error: any, errorClassName?: string) =>
+    error && <span className={classNames(styles.errorText, errorClassName)}>{error.message}</span>;
   const renderExtraSection = (formField: FormBuilderFormField, value: string) => {
     if (!formField.extraSection) return null;
-    if (typeof formField.extraSection === 'function') {
-      return formField.extraSection(value);
-    }
-    return formField.extraSection;
+    return typeof formField.extraSection === 'function'
+      ? formField.extraSection(value)
+      : formField.extraSection;
   };
 
   return (
-    <form className={styles.container} onSubmit={handleSubmit(internalOnSubmit)}>
+    <form
+      className={styles.container}
+      onSubmit={handleSubmit(internalOnSubmit)}
+      noValidate={shouldSkipValidation}
+    >
       {formFields?.map((formField) => {
         return (
           <Controller
@@ -94,7 +102,7 @@ const FormBuilder = <T,>({
                       onChange: field.onChange,
                       placeholder: formField.placeholder,
                     })}
-                    {error && <span className={styles.errorText}>{error.message}</span>}
+                    {renderError(error, formField.errorClassName)}
                     {renderExtraSection(formField, field.value)}
                   </div>
                 );
@@ -128,7 +136,7 @@ const FormBuilder = <T,>({
               return (
                 <div className={classNames(styles.inputContainer, formField.containerClassName)}>
                   <InputField {...inputFieldProps} />
-                  {error && <span className={styles.errorText}>{error.message}</span>}
+                  {renderError(error, formField.errorClassName)}
                   {renderExtraSection(formField, field.value)}
                 </div>
               );

src/components/FormBuilder/FormBuilderTypes.ts

@@ -10,6 +10,7 @@ export type FormBuilderFormField = Pick<FormField, 'field' | 'type'> & {
   placeholder?: string;
   rules?: FormBuilderFieldRule[];
   containerClassName?: string;
+  errorClassName?: string;
   checked?: boolean;
   fieldSetLegend?: string;
   onChange?: (value: unknown) => void;

src/components/Login/AuthHeader.tsx

@@ -1,22 +1,24 @@
 import { FC } from 'react';
 
+import classNames from 'classnames';
+
 import styles from './login.module.scss';
 
 import QuranLogo from '@/icons/logo_main.svg';
 import QRColoredLogo from '@/icons/qr-colored.svg';
-import QuranReflectLogo from '@/icons/qr-logo.svg';
+import QRLogo from '@/icons/qr-logo.svg';
 
 const AuthHeader: FC = () => {
   return (
     <>
       <div className={styles.authLogos}>
-        <QuranLogo />
-        <div className={styles.qrLogos}>
-          <QRColoredLogo />
-          <QuranReflectLogo />
+        <QuranLogo height={20} />
+        <div className={classNames(styles.reflectLogos, styles.scaleDown)}>
+          <QRColoredLogo className={styles.reflectLogo} />
+          <QRLogo className={styles.reflectLogo} />
         </div>
       </div>
-      <hr className={styles.serviceDivider} />
+      <hr className={styles.divider} />
     </>
   );
 };

src/components/Login/BackButton.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './login.module.scss';
+
+import Button, { ButtonType, ButtonVariant } from '@/components/dls/Button/Button';
+import ArrowLeft from '@/icons/west.svg';
+
+interface Props {
+  onClick: () => void;
+  label?: string;
+}
+
+const BackButton: FC<Props> = ({ onClick, label }) => {
+  const { t } = useTranslation('common');
+
+  return (
+    <Button
+      onClick={onClick}
+      className={styles.backButton}
+      prefix={<ArrowLeft />}
+      type={ButtonType.Inverse}
+      variant={ButtonVariant.Ghost}
+    >
+      {label || t('back')}
+    </Button>
+  );
+};
+
+export default BackButton;

src/components/Login/BenefitsSection.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+import Feature from './Feature';
+import styles from './login.module.scss';
+
+interface Benefit {
+  id: string;
+  label: string;
+}
+
+interface BenefitsSectionProps {
+  benefits: Benefit[];
+}
+
+const BenefitsSection: FC<BenefitsSectionProps> = ({ benefits }) => (
+  <div className={styles.benefits}>
+    {benefits.map(({ id, label }) => (
+      <Feature key={id} label={label} />
+    ))}
+  </div>
+);
+
+export default BenefitsSection;