From c9f59abaf2cf5e141c73f986c525659d380a356b Mon Sep 17 00:00:00 2001
From: Alexander Saiannyi <alexander.saiannyi@bigcommerce.com>
Date: Mon, 5 Aug 2024 15:26:54 +0200
Subject: [PATCH] refactor(core): update date form field

---
 .../addresses-content/address-field-handlers.ts  |  2 +-
 .../register-customer-form/fields/date.tsx       | 11 ++++++++---
 .../fields/parse-fields.ts                       |  2 +-
 .../fields/radio-buttons.tsx                     | 16 ++++++++--------
 core/components/ui/date-picker/date-picker.tsx   |  1 +
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts
index d0f2a0acad..241019118e 100644
--- a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/address-field-handlers.ts
+++ b/core/app/[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.id.split('-')[2]);
     const validationStatus = e.target.validity.valueMissing;
 
     dateStateSetter({ ...dateFieldState, [fieldId]: !validationStatus });
diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx
index 601f497842..234575fc46 100644
--- a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/date.tsx
+++ b/core/app/[locale]/(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('en-US') : ''}
+        />
+        <DatePicker
+          disabledDays={disabledDays}
+          id={name}
           onChange={field.isRequired ? onChange : undefined}
           onInvalid={field.isRequired ? onChange : undefined}
           onSelect={handleDateSelect}
diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts
index 759584b881..785f1b5ca8 100644
--- a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts
+++ b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/parse-fields.ts
@@ -117,7 +117,7 @@ const updateFormFields = ({
 
     case 'dates': {
       const definedDates = customFormFields[fieldType];
-      const [day, mm, year] = fieldValue.split('/');
+      const [mm, day, year] = fieldValue.split('/');
       const month = Number(mm) - 1;
       const date = new Date(Date.UTC(Number(year), month, Number(day))).toISOString();
       const newDate = {
diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx
index 47a77c4e11..618e55334e 100644
--- a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/radio-buttons.tsx
+++ b/core/app/[locale]/(default)/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
index 9d53cbd483..11caa650b8 100644
--- 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}