From 9dd4cc9351fa046b2d2876646e774b1493407d6b 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/radio-buttons.tsx                     | 16 ++++++++--------
 core/components/ui/date-picker/date-picker.tsx   |  1 +
 4 files changed, 18 insertions(+), 12 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..db87be2a78 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.name.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..b46fd7a0eb 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() : ''}
+        />
+        <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/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}