refactor fields

bigcommerce · May 10, 2024 · adfe121 · adfe121
1 parent 99c2bea
commit adfe121
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 31 deletions.
diff --git a/.../(default)/login/register-customer/_components/register-customer-form/fields/password.tsx b/.../(default)/login/register-customer/_components/register-customer-form/fields/password.tsx
@@ -20,6 +20,7 @@ interface PasswordProps {
 
 export const Password = ({ field, isValid, name, onChange }: PasswordProps) => {
   const t = useTranslations('Account.Register.validationMessages');
+  const fieldName = FieldNameToFieldId[field.entityId];
 
   return (
     <Field className="relative space-y-2 pb-7" name={name}>
@@ -45,7 +46,7 @@ export const Password = ({ field, isValid, name, onChange }: PasswordProps) => {
           {t('password')}
         </FieldMessage>
       )}
-      {FieldNameToFieldId[field.entityId] === 'confirmPassword' && (
+      {fieldName === 'confirmPassword' && (
         <FieldMessage
           className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
           match={() => {

diff --git a/...t)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx b/...t)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx
@@ -1,10 +1,8 @@
-import { useTranslations } from 'next-intl';
-
-import { Field, FieldControl, FieldLabel, FieldMessage } from '~/components/ui/form';
+import { Field, FieldControl, FieldLabel } from '~/components/ui/form';
 import { Input } from '~/components/ui/input';
 import { Select, SelectContent, SelectItem } from '~/components/ui/select';
 
-import { AddressFields, FieldNameToFieldId } from '..';
+import { AddressFields } from '..';
 
 type PicklistOrTextType = Extract<
   NonNullable<AddressFields>[number],
@@ -20,8 +18,6 @@ interface PicklistOrTextProps {
 }
 
 export const PicklistOrText = ({ defaultValue, field, name, options }: PicklistOrTextProps) => {
-  const t = useTranslations('Account.Register');
-
   return (
     <Field className="relative space-y-2 pb-7" name={name}>
       <FieldLabel
@@ -43,26 +39,17 @@ export const PicklistOrText = ({ defaultValue, field, name, options }: PicklistO
             required={field.isRequired}
           >
             <SelectContent position="item-aligned">
-              {field.entityId === FieldNameToFieldId.stateOrProvince &&
-                options.map(({ entityId, label }) => {
-                  return (
-                    <SelectItem key={entityId} value={entityId.toString()}>
-                      {label}
-                    </SelectItem>
-                  );
-                })}
+              {options.map(({ entityId, label }) => {
+                return (
+                  <SelectItem key={entityId} value={entityId.toString()}>
+                    {label}
+                  </SelectItem>
+                );
+              })}
             </SelectContent>
           </Select>
         )}
       </FieldControl>
-      {field.isRequired && options.length === 0 && (
-        <FieldMessage
-          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
-          match="valueMissing"
-        >
-          {t('emptyTextValidatoinMessage')}
-        </FieldMessage>
-      )}
     </Field>
   );
 };
diff --git a/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx b/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
@@ -32,12 +32,11 @@ export const Picklist = ({ defaultValue, field, name, onChange, options }: Pickl
           required={field.isRequired}
         >
           <SelectContent position="item-aligned">
-            {field.entityId === FieldNameToFieldId.countryCode &&
-              options.map(({ label, entityId }) => (
-                <SelectItem key={entityId} value={entityId.toString()}>
-                  {label}
-                </SelectItem>
-              ))}
+            {options.map(({ entityId, label }) => (
+              <SelectItem key={entityId} value={entityId.toString()}>
+                {label}
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
       </FieldControl>

diff --git a/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/text.tsx b/...ale]/(default)/login/register-customer/_components/register-customer-form/fields/text.tsx
@@ -20,6 +20,7 @@ interface TextProps {
 
 export const Text = ({ field, isValid, name, onChange, type }: TextProps) => {
   const t = useTranslations('Account.Register.validationMessages');
+  const fieldName = FieldNameToFieldId[field.entityId];
 
   return (
     <Field className="relative space-y-2 pb-7" name={name}>
@@ -43,10 +44,10 @@ export const Text = ({ field, isValid, name, onChange, type }: TextProps) => {
           className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
           match="valueMissing"
         >
-          {t(FieldNameToFieldId[field.entityId] ?? 'empty')}
+          {t(fieldName ?? 'empty')}
         </FieldMessage>
       )}
-      {FieldNameToFieldId[field.entityId] === 'email' && (
+      {fieldName === 'email' && (
         <FieldMessage
           className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
           match="typeMismatch"