refactor(core): component styles and fix issues

bigcommerce · Aug 1, 2024 · 2d480fd · 2d480fd
1 parent c7e799d
commit 2d480fd
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 133 deletions.
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx
@@ -14,6 +14,7 @@ import {
   FieldWrapper,
   MultilineText,
   NumbersOnly,
+  Password,
   Picklist,
   PicklistOrText,
   RadioButtons,
@@ -31,6 +32,7 @@ import {
   createDatesValidationHandler,
   createMultilineTextValidationHandler,
   createNumbersInputValidationHandler,
+  createPasswordValidationHandler,
   createPreSubmitCheckboxesValidationHandler,
   createPreSubmitPicklistValidationHandler,
   createRadioButtonsValidationHandler,
@@ -105,6 +107,7 @@ export const AddAddress = ({
   const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
   const [numbersInputValid, setNumbersInputValid] = useState<Record<string, boolean>>({});
   const [datesValid, setDatesValid] = useState<Record<string, boolean>>({});
+  const [passwordValid, setPasswordValid] = useState<Record<string, boolean>>({});
   const [radioButtonsValid, setRadioButtonsValid] = useState<Record<string, boolean>>({});
   const [picklistValid, setPicklistValid] = useState<Record<string, boolean>>({});
   const [checkboxesValid, setCheckboxesValid] = useState<Record<string, boolean>>({});
@@ -115,6 +118,7 @@ export const AddAddress = ({
     setTextInputValid,
     textInputValid,
   );
+  const handlePasswordValidation = createPasswordValidationHandler(setPasswordValid, addressFields);
   const handleCountryChange = createCountryChangeHandler(setCountryStates, countries);
   const handleNumbersInputValidation = createNumbersInputValidationHandler(
     setNumbersInputValid,
@@ -327,6 +331,19 @@ export const AddAddress = ({
                   </FieldWrapper>
                 );
 
+              case 'PasswordFormField': {
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <Password
+                      field={field}
+                      isValid={passwordValid[fieldId]}
+                      name={fieldName}
+                      onChange={handlePasswordValidation}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
               default:
                 return null;
             }

diff --git a/.../[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts b/.../[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts
@@ -49,7 +49,7 @@ const createPreSubmitPicklistValidationHandler = (
         )
         .map(([picklistKey, picklistValue]: [string, string]) => {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          const fieldId = picklistKey.split('-')[1]!;
+          const fieldId = picklistKey.split('-')[2]!;
 
           return [fieldId, picklistValue];
         }),
@@ -91,7 +91,7 @@ const createPreSubmitCheckboxesValidationHandler = (
         )
         .map(([checkboxKey, checkboxValue]: [string, string]) => {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          const fieldId = checkboxKey.split('-')[1]!;
+          const fieldId = checkboxKey.split('-')[2]!;
 
           return [fieldId, checkboxValue];
         }),
@@ -153,7 +153,7 @@ const createNumbersInputValidationHandler =
 const createRadioButtonsValidationHandler =
   (radioButtonsStateSetter: FieldStateSetFn<FieldState>, radioButtonsState: FieldState) =>
   (e: React.ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.name.split('-')[1]);
+    const fieldId = Number(e.target.name.split('-')[2]);
     const { valueMissing } = e.target.validity;
 
     radioButtonsStateSetter({ ...radioButtonsState, [fieldId]: !valueMissing });
@@ -162,7 +162,7 @@ const createRadioButtonsValidationHandler =
 const createDatesValidationHandler =
   (dateStateSetter: FieldStateSetFn<FieldState>, dateFieldState: FieldState) =>
   (e: React.ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.name.split('-')[1]);
+    const fieldId = Number(e.target.id.split('-')[1]);
     const validationStatus = e.target.validity.valueMissing;
 
     dateStateSetter({ ...dateFieldState, [fieldId]: !validationStatus });

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/edit-address.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/edit-address.tsx
@@ -15,6 +15,7 @@ import {
   getPreviouslySubmittedValue,
   MultilineText,
   NumbersOnly,
+  Password,
   Picklist,
   PicklistOrText,
   RadioButtons,
@@ -36,6 +37,7 @@ import {
   createDatesValidationHandler,
   createMultilineTextValidationHandler,
   createNumbersInputValidationHandler,
+  createPasswordValidationHandler,
   createPreSubmitCheckboxesValidationHandler,
   createPreSubmitPicklistValidationHandler,
   createRadioButtonsValidationHandler,
@@ -113,6 +115,7 @@ export const EditAddress = ({
   const { setAccountState } = useAccountStatusContext();
 
   const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
+  const [passwordValid, setPasswordValid] = useState<Record<string, boolean>>({});
   const [numbersInputValid, setNumbersInputValid] = useState<Record<string, boolean>>({});
   const [datesValid, setDatesValid] = useState<Record<string, boolean>>({});
   const [radioButtonsValid, setRadioButtonsValid] = useState<Record<string, boolean>>({});
@@ -129,6 +132,7 @@ export const EditAddress = ({
     setTextInputValid,
     textInputValid,
   );
+  const handlePasswordValidation = createPasswordValidationHandler(setPasswordValid, addressFields);
   const handleNumbersInputValidation = createNumbersInputValidationHandler(
     setNumbersInputValid,
     numbersInputValid,
@@ -224,7 +228,7 @@ export const EditAddress = ({
         </Message>
       )}
       <Form action={onSubmit} onClick={preSubmitFieldsValidation} ref={form}>
-        <div className="grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
+        <div className="grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-4">
           {addressFields.map((field) => {
             const fieldId = field.entityId;
             const fieldName = createFieldName(field, 'address');
@@ -237,7 +241,7 @@ export const EditAddress = ({
             switch (field.__typename) {
               case 'TextFormField': {
                 const previousTextValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.TextFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).TextFormField;
 
                 return (
                   <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -254,7 +258,7 @@ export const EditAddress = ({
 
               case 'MultilineTextFormField': {
                 const previousMultiTextValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.MultilineTextFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).MultilineTextFormField;
 
                 return (
                   <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -271,7 +275,7 @@ export const EditAddress = ({
 
               case 'NumberFormField': {
                 const previousNumberValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.NumberFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).NumberFormField;
 
                 return (
                   <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -288,7 +292,7 @@ export const EditAddress = ({
 
               case 'CheckboxesFormField': {
                 const previousCheckboxesValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.CheckboxesFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).CheckboxesFormField;
 
                 return (
                   <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -306,7 +310,7 @@ export const EditAddress = ({
 
               case 'DateFormField': {
                 const previousDateValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.DateFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).DateFormField;
 
                 return (
                   <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -324,7 +328,7 @@ export const EditAddress = ({
 
               case 'RadioButtonsFormField': {
                 const previousMultipleChoiceValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.MultipleChoiceFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).MultipleChoiceFormField;
 
                 return (
                   <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -342,7 +346,7 @@ export const EditAddress = ({
               case 'PicklistFormField': {
                 const isCountrySelector = fieldId === FieldNameToFieldId.countryCode;
                 const previousMultipleChoiceValue =
-                  getPreviouslySubmittedValue(defaultCustomField)?.MultipleChoiceFormField;
+                  getPreviouslySubmittedValue(defaultCustomField).MultipleChoiceFormField;
                 const picklistOptions = isCountrySelector
                   ? countries.map(({ name, code }) => ({ label: name, entityId: code }))
                   : field.options;
@@ -378,6 +382,23 @@ export const EditAddress = ({
                 );
               }
 
+              case 'PasswordFormField': {
+                const previousPasswordValue =
+                  getPreviouslySubmittedValue(defaultCustomField).PasswordFormField;
+
+                return (
+                  <FieldWrapper fieldId={fieldId} key={fieldId}>
+                    <Password
+                      defaultValue={previousPasswordValue}
+                      field={field}
+                      isValid={passwordValid[fieldId]}
+                      name={fieldName}
+                      onChange={handlePasswordValidation}
+                    />
+                  </FieldWrapper>
+                );
+              }
+
               default:
                 return null;
             }

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/update-settings-form/index.tsx b/core/app/[locale]/(default)/account/[tab]/_components/update-settings-form/index.tsx
@@ -210,7 +210,7 @@ export const UpdateSettingsForm = ({
         </Message>
       )}
       <Form action={onSubmit} onClick={preSubmitFieldsValidation} ref={form}>
-        <div className="mb-10 mt-8 grid grid-cols-1 gap-y-6 text-base lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
+        <div className="mb-10 mt-8 grid grid-cols-1 gap-y-6 text-base lg:grid-cols-2 lg:gap-x-6 lg:gap-y-4">
           {addressFields.map((field) => {
             const fieldName = FieldNameToFieldId[field.entityId] ?? '';
 
@@ -258,7 +258,7 @@ export const UpdateSettingsForm = ({
               switch (field.__typename) {
                 case 'NumberFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.NumberFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).NumberFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -275,7 +275,7 @@ export const UpdateSettingsForm = ({
 
                 case 'CheckboxesFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.CheckboxesFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).CheckboxesFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -293,7 +293,7 @@ export const UpdateSettingsForm = ({
 
                 case 'MultilineTextFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.MultilineTextFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).MultilineTextFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -310,7 +310,7 @@ export const UpdateSettingsForm = ({
 
                 case 'DateFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.DateFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).DateFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -328,7 +328,7 @@ export const UpdateSettingsForm = ({
 
                 case 'RadioButtonsFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.MultipleChoiceFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).MultipleChoiceFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -345,7 +345,7 @@ export const UpdateSettingsForm = ({
 
                 case 'PicklistFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.MultipleChoiceFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).MultipleChoiceFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -363,7 +363,7 @@ export const UpdateSettingsForm = ({
 
                 case 'TextFormField': {
                   const submittedValue =
-                    getPreviouslySubmittedValue(previouslySubmittedField)?.TextFormField;
+                    getPreviouslySubmittedValue(previouslySubmittedField).TextFormField;
 
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>

diff --git a/...default)/login/register-customer/_components/register-customer-form/fields/checkboxes.tsx b/...default)/login/register-customer/_components/register-customer-form/fields/checkboxes.tsx
@@ -61,7 +61,7 @@ export const Checkboxes = ({
   }, [onValidate, setCheckboxValidityState]);
 
   return (
-    <Field className="relative space-y-2 pb-7" name={name}>
+    <Field className="relative space-y-2" name={name}>
       <fieldset>
         <FieldLabel asChild>
           <legend className="mb-2.5 inline-flex w-full items-center justify-between text-base font-semibold">
@@ -106,11 +106,13 @@ export const Checkboxes = ({
             );
           })}
         </div>
-        {validationError && (
-          <FieldMessage className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary">
-            {t('empty')}
-          </FieldMessage>
-        )}
+        <div className="relative h-7">
+          {validationError && (
+            <FieldMessage className="inline-flex w-full text-xs font-normal text-error-secondary">
+              {t('empty')}
+            </FieldMessage>
+          )}
+        </div>
       </fieldset>
     </Field>
   );

diff --git a/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx b/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx
@@ -2,7 +2,7 @@ import { useTranslations } from 'next-intl';
 import React, { ChangeEvent, useState } from 'react';
 
 import { DatePicker } from '~/components/ui/date-picker';
-import { Field, FieldControl, FieldLabel, FieldMessage } from '~/components/ui/form';
+import { Field, FieldLabel, FieldMessage } from '~/components/ui/form';
 
 import { AddressFields } from '..';
 
@@ -55,6 +55,7 @@ export const DateField = ({
   const [date, setDate] = useState<Date | string | undefined>(selectedDate);
   const t = useTranslations('Account.Register.validationMessages');
   const disabledDays = getDisabledDays({ earliest: field.minDate, latest: field.maxDate });
+  const validationError = field.isRequired && isValid === false;
   const handleDateSelect = field.isRequired
     ? (d: Date | undefined) => {
         if (onValidate) {
@@ -69,30 +70,30 @@ export const DateField = ({
     : (d?: Date) => setDate(d);
 
   return (
-    <Field className="relative space-y-2 pb-7" name={name}>
-      <FieldLabel htmlFor={`field-${field.entityId}`} isRequired={field.isRequired}>
-        {field.label}
-      </FieldLabel>
-      <FieldControl asChild>
+    <Field className="relative" name={name}>
+      <fieldset className="space-y-2">
+        <FieldLabel htmlFor={`field-${field.entityId}`} isRequired={field.isRequired}>
+          {field.label}
+        </FieldLabel>
         <DatePicker
           disabledDays={disabledDays}
           id={`field-${field.entityId}`}
+          name={name}
           onChange={field.isRequired ? onChange : undefined}
           onInvalid={field.isRequired ? onChange : undefined}
           onSelect={handleDateSelect}
           required={field.isRequired}
           selected={date ? new Date(date) : undefined}
-          variant={isValid === false ? 'error' : undefined}
+          variant={validationError ? 'error' : undefined}
         />
-      </FieldControl>
-      {field.isRequired && !isValid && (
-        <FieldMessage
-          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
-          match="valueMissing"
-        >
-          {t('empty')}
-        </FieldMessage>
-      )}
+        <div className="relative h-7">
+          {validationError && (
+            <FieldMessage className="inline-flex w-full text-xs font-normal text-error-secondary">
+              {t('empty')}
+            </FieldMessage>
+          )}
+        </div>
+      </fieldset>
     </Field>
   );
 };