Merge pull request #355 from EscolaLMS/feature/register-additional-fi…

…elds additional fields
EscolaLMS · Jul 10, 2024 · 1667201 · 1667201
2 parents 46ee1ae + 886648b
commit 1667201
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 35 deletions.
diff --git a/src/components/atoms/Option/Option.tsx b/src/components/atoms/Option/Option.tsx
@@ -11,6 +11,8 @@ export interface OptionType
     ExtendableStyledComponent {
   label?: React.ReactNode;
   type: "checkbox" | "radio";
+  error?: string | React.ReactNode;
+  required?: boolean;
 }
 
 const StyledDiv = styled.div<OptionType>`
@@ -29,7 +31,9 @@ const StyledDiv = styled.div<OptionType>`
     color: ${(props) =>
       getStylesBasedOnTheme(props.theme.mode, props.theme.white, "#111")};
   }
-
+  .required {
+    margin-left: 5px;
+  }
   input {
     cursor: pointer;
     transition: border-color 0.5s;
@@ -96,27 +100,84 @@ const StyledDiv = styled.div<OptionType>`
     )};
 `;
 
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  font-family: ${(props) => getFontFromTheme(props.theme).fontFamily};
+  .error {
+    color: ${({ theme }) =>
+      getStylesBasedOnTheme(
+        theme.mode,
+        theme.dm__errorColor,
+        theme.errorColor,
+        theme.errorColor
+      )};
+    padding-left: 12px;
+    font-size: 12px;
+    line-height: 15px;
+  }
+  .required {
+    color: ${({ theme }) =>
+      getStylesBasedOnTheme(
+        theme.mode,
+        theme.dm__errorColor,
+        theme.errorColor,
+        theme.errorColor
+      )};
+    margin-right: 5px;
+    margin-top: 5px;
+  }
+`;
+
+const StyledContainer = styled.div`
+  font-family: ${(props) => getFontFromTheme(props.theme).fontFamily};
+  .error {
+    color: ${({ theme }) =>
+      getStylesBasedOnTheme(
+        theme.mode,
+        theme.dm__errorColor,
+        theme.errorColor,
+        theme.errorColor
+      )};
+    padding-left: 12px;
+    font-size: 12px;
+    line-height: 15px;
+  }
+`;
+
 export const Option: React.FC<OptionType> = (props) => {
-  const { label, type, className = "" } = props;
+  const { label, type, className = "", required, error } = props;
 
   if (label) {
     return (
-      <StyledDiv
-        type={type}
-        className={`wellms-component lms-${type} ${className}`}
-      >
-        <label>
-          <input {...props} type={type} />
-          <span>{label}</span>
-        </label>
-      </StyledDiv>
+      <StyledContainer>
+        <StyledWrapper>
+          {required && <span className="required">*</span>}
+          <StyledDiv
+            type={type}
+            className={`wellms-component lms-${type} ${className}`}
+          >
+            <label>
+              <input {...props} type={type} /> <span>{label}</span>
+            </label>
+          </StyledDiv>
+        </StyledWrapper>{" "}
+        {error && <div className="error">{error}</div>}
+      </StyledContainer>
     );
   }
 
   return (
-    <StyledDiv className="wellms-component" type={type}>
-      <input {...props} type={type} />
-    </StyledDiv>
+    <StyledContainer>
+      <StyledWrapper>
+        {required && <span className="required">*</span>}
+        <StyledDiv className="wellms-component" type={type}>
+          <input {...props} type={type} />{" "}
+        </StyledDiv>{" "}
+      </StyledWrapper>
+      {error && <div className="error">{error}</div>}
+    </StyledContainer>
   );
 };
 

diff --git a/src/components/organisms/RegisterForm/RegisterForm.tsx b/src/components/organisms/RegisterForm/RegisterForm.tsx
@@ -19,6 +19,7 @@ import { getStylesBasedOnTheme } from "../../../utils/utils";
 import { ExtendableStyledComponent } from "types/component";
 import { API } from "@escolalms/sdk/lib";
 import useAdditionalFieldTranslations from "../../../hooks/useAdditionalFieldsTranslations";
+import MarkdownRenderer from "components/molecules/MarkdownRenderer/MarkdownRenderer";
 
 const StyledDiv = styled.div<{ mobile: boolean }>`
   margin: 0;
@@ -30,8 +31,10 @@ const StyledDiv = styled.div<{ mobile: boolean }>`
   justify-content: center;
   align-items: center;
   align-content: center;
+  max-width: 470px;
   .lms-checkbox {
-    margin: 20px 0;
+    margin: 10px 0;
+    font-size: 13px;
   }
   .lsm-input {
     margin: 30px 0;
@@ -83,6 +86,19 @@ const GotAccount = styled.div`
   }
 `;
 
+const Clause = styled.div`
+  margin-top: 20px;
+  * {
+    font-size: 12px;
+  }
+`;
+
+const ProccesingWrapper = styled.div`
+  * {
+    font-size: 13px;
+  }
+`;
+
 type FormValues = {
   first_name: string;
   last_name: string;
@@ -128,7 +144,8 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     phone: "",
   });
   const { t } = useTranslation();
-  const { register, fields, fetchFields } = useContext(EscolaLMSContext);
+  const { register, fields, fetchFields, settings } =
+    useContext(EscolaLMSContext);
   const { getFieldTranslations, filterByKey } =
     useAdditionalFieldTranslations();
   useEffect(() => {
@@ -152,11 +169,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
   const isAdditionalRequiredField = useCallback(
     (field: API.Metadata) => {
-      if (
-        field.type !== "boolean" &&
-        field.extra &&
-        Array.isArray(field.extra)
-      ) {
+      if (field.extra && Array.isArray(field.extra)) {
         if (
           field.extra?.some(
             (item: Record<string, string | number | boolean>) =>
@@ -329,7 +342,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               .filter((field: API.Metadata) => {
                 const r = filterByKey(field);
 
-                return field.type !== "boolean" && !r;
+                return field.type !== "boolean" && r;
               })
               .map((field: API.Metadata, index: number) => (
                 <Input
@@ -350,10 +363,10 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               ))}
 
             {(fields.list || [])
-              .filter((field: API.Metadata) => {
+              .filter((field) => {
                 const r = filterByKey(field);
 
-                return field.type === "boolean" && !r;
+                return field.type === "boolean" && r;
               })
               .map((field: API.Metadata, index: number) => (
                 <Checkbox
@@ -363,13 +376,57 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                     fieldLabels[`AdditionalFields.${field.name}`] ||
                     t(`AdditionalFields.${field.name}`)
                   }
+                  required={isAdditionalRequiredField(field) as boolean}
                   id={field.name + Date.now()}
                   name={field.name}
                   onChange={handleChange}
                   onBlur={handleBlur}
+                  error={errors[field.name]}
                 />
               ))}
 
+            {settings.value.register?.processing && (
+              <ProccesingWrapper>
+                <MarkdownRenderer>
+                  {settings.value.register?.processing}
+                </MarkdownRenderer>
+                {(fields.list || [])
+                  .filter((field) => field.name.includes("processing"))
+                  .map((field: API.Metadata, index: number) => (
+                    <Checkbox
+                      key={`${field.id}${index}`}
+                      label={
+                        getFieldTranslations(field) ||
+                        fieldLabels[`AdditionalFields.${field.name}`] ||
+                        t(`AdditionalFields.${field.name}`)
+                      }
+                      required={isAdditionalRequiredField(field) as boolean}
+                      id={field.name + Date.now()}
+                      name={field.name}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      error={errors[field.name]}
+                    />
+                  ))}
+              </ProccesingWrapper>
+            )}
+            {settings.value.register?.clause1 && (
+              <Clause>
+                <MarkdownRenderer>
+                  {settings.value.register.clause1}
+                </MarkdownRenderer>
+              </Clause>
+            )}
+
+            {settings.value.register?.clause2 && (
+              <Clause>
+                <MarkdownRenderer>
+                  {settings.value.register?.clause2}
+                </MarkdownRenderer>
+              </Clause>
+            )}
+
+            {/* {settings.value.regiser} */}
             <Button mode="primary" type="submit" loading={isSubmitting} block>
               {submitText ? submitText : t<string>("Login.Signup")}
             </Button>

diff --git a/src/hooks/useAdditionalFieldsTranslations.tsx b/src/hooks/useAdditionalFieldsTranslations.tsx
@@ -7,7 +7,6 @@ const useAdditionalField = () => {
 
   const additionalFieldTranslations = useCallback(
     (fieldMeta: API.Metadata) => {
-      //@ts-ignore
       const translations = fieldMeta?.extra?.[0]?.translations;
       if (translations && typeof translations === "object") {
         return translations[i18n.language];
@@ -20,14 +19,13 @@ const useAdditionalField = () => {
 
   const filter = useCallback(
     (fieldMeta: API.Metadata, keyName = "register") => {
-      return (
-        Array.isArray(fieldMeta.extra) &&
-        fieldMeta.extra.filter(
-          (item: Record<string, string | number | boolean> | null) => {
-            return item && item[keyName];
-          }
-        )
-      );
+      if (Array.isArray(fieldMeta.extra)) {
+        return fieldMeta.extra.some(
+          (item) =>
+            item && (item[keyName] === undefined || item[keyName] === true)
+        );
+      }
+      return false;
     },
     []
   );

diff --git a/src/styleguide/useLocalTheme.ts b/src/styleguide/useLocalTheme.ts
@@ -35,8 +35,6 @@ export const setThemeToLocalStorage = (
   window.dispatchEvent(new Event("themeChange"));
 };
 
-console.log(Object.keys(themes).includes(window.location.hash.substr(1)));
-
 // Hook
 export function useLocalTheme(
   initialValue: DefaultTheme = defaultTheme