refactor(core): update date form field

bigcommerce · Aug 6, 2024 · 9dd4cc9 · 9dd4cc9
1 parent f867297
commit 9dd4cc9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
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
@@ -162,7 +162,7 @@ const createRadioButtonsValidationHandler =
 const createDatesValidationHandler =
   (dateStateSetter: FieldStateSetFn<FieldState>, dateFieldState: FieldState) =>
   (e: React.ChangeEvent<HTMLInputElement>) => {
-    const fieldId = Number(e.target.id.split('-')[1]);
+    const fieldId = Number(e.target.name.split('-')[2]);
     const validationStatus = e.target.validity.valueMissing;
 
     dateStateSetter({ ...dateFieldState, [fieldId]: !validationStatus });

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
@@ -72,13 +72,18 @@ export const DateField = ({
   return (
     <Field className="relative" name={name}>
       <fieldset className="space-y-2">
-        <FieldLabel htmlFor={`field-${field.entityId}`} isRequired={field.isRequired}>
+        <FieldLabel htmlFor={name} isRequired={field.isRequired}>
           {field.label}
         </FieldLabel>
-        <DatePicker
-          disabledDays={disabledDays}
+        <input
           id={`field-${field.entityId}`}
           name={name}
+          type="hidden"
+          value={date ? new Date(date).toLocaleDateString() : ''}
+        />
+        <DatePicker
+          disabledDays={disabledDays}
+          id={name}
           onChange={field.isRequired ? onChange : undefined}
           onInvalid={field.isRequired ? onChange : undefined}
           onSelect={handleDateSelect}

diff --git a/...ault)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx b/...ault)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx
@@ -53,14 +53,14 @@ export const RadioButtons = ({
             const itemId = option.entityId;
 
             return (
-              <div className="mb-2 flex" key={itemId}>
-                <RadioItem
-                  id={`${itemId}`}
-                  value={`${itemId}`}
-                  variant={validationError ? 'error' : undefined}
-                />
-                <Label className="w-full cursor-pointer ps-4 font-normal" htmlFor={`${itemId}`}>
-                  <p className="inline-flex w-full justify-between">{option.label}</p>
+              <div className="mb-2" key={itemId}>
+                <Label className="flex w-full cursor-pointer gap-3 ps-4 font-normal">
+                  <RadioItem
+                    id={`${itemId}`}
+                    value={`${itemId}`}
+                    variant={validationError ? 'error' : undefined}
+                  />
+                  <p>{option.label}</p>
                 </Label>
               </div>
             );

diff --git a/core/components/ui/date-picker/date-picker.tsx b/core/components/ui/date-picker/date-picker.tsx
@@ -40,6 +40,7 @@ export const DatePicker = React.forwardRef<React.ElementRef<'div'>, DatePickerPr
         <Popover>
           <PopoverTrigger asChild>
             <Input
+              className={required ? 'caret-transparent' : ''}
               placeholder={placeholder}
               readOnly={!required}
               required={required}