saafe-redirection-flow 2.2.0 → 2.2.2

package/src/pages/accounts/DiscoverAccount.tsx

@@ -594,111 +594,133 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
             {t('youCanAddUpTo3Numbers')}
           </p>
         </div>
-        {identifiers?.find(i => i.type == 'DOB') ? (
-          <>
-            <SectionTitle className='mt-6' title={`DOB*`} />
-            <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
-              <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                  {/*  */}
-                  <div
-                    className={`flex h-[56px] w-full items-center justify-between rounded-md border bg-white border-gray-200 dark:border-gray-700 dark:bg-input/30 px-3 py-2 text-muted-foreground dark:border-gray-700 cursor-pointer`}
-                  >
-                    {identifiers?.find(i => i.type === 'DOB')?.value ? (
-                      <span>
-                        {
-                          (() => {
-                            const dobString = identifiers.find(i => i.type === 'DOB')?.value || '';
-                            const [day, month, year] = dobString.split('/');
-                            const dob = new Date(Number(year), Number(month) - 1, Number(day));
-                            return dob.toLocaleDateString('en-IN', {
-                              year: 'numeric',
-                              month: 'long',
-                              day: 'numeric'
-                            });
-                          })()
-                        }
-                      </span>
-                    ) : (
-                      <span className='text-muted-foreground'>Pick a date</span>
-                    )}
-                    <CalendarIcon className={`h-4 w-4 ${decodedInfo?.dob ? 'opacity-30' : 'opacity-50'}`} />
-                  </div>
-                </PopoverTrigger>
-                <PopoverContent className='w-auto p-0' align='start'>
-                  <Calendar
-                    mode='single'
-                    captionLayout="dropdown"
-                    hideNavigation
-
-                    components={{
-                      DropdownNav: (props: DropdownNavProps) => {
-                        return <div className="flex w-full items-center gap-2">{props.children}</div>;
-                      },
-
-                      Dropdown: (props: DropdownProps) => {
-                        return (
-                          <Select
-                            value={String(props.value)}
-                            onValueChange={(value) => {
-                              if (props.onChange) {
-                                handleCalendarChange(value, props.onChange);
-                              }
-                            }}
-                          >
-                            <SelectTrigger className="h-8 w-fit font-medium first:grow">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent className="max-h-[min(26rem,var(--radix-select-content-available-height))]">
-                              {props.options?.map((option) => (
-
-                                <SelectItem
-                                  key={option.value}
-                                  value={String(option.value)}
-                                  disabled={option.disabled}
-                                >
-                                  {option.label}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        );
-                      },
-                    }}
-                    selected={identifiers?.find(i => i.type === 'DOB')?.value ? new Date(identifiers.find(i => i.type === 'DOB')?.value || '') : undefined}
-                    onSelect={(date) => {
-                      if (date) {
-                        const dateValue = date.toLocaleString().split(',')[0]
-                        const result = [...identifiers]
-                        result.splice(
-                          result.findIndex(i => i.type === 'DOB'),
-                          1,
-                          {
-                            ...identifiers?.find(i => i.type === 'DOB'),
-                            value: dateValue
-                          }
-                        )
-                        setIdentifiers(result)
-                        
-                        // Also update redirect store immediately
-                        const { updateIdentifiers } = useRedirectStore.getState()
-                        updateIdentifiers(undefined, dateValue || undefined)
-                        
-                        setIsPopoverOpen(false)
-                      }
-                    }}
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-            </div>
-          </>
-        ) : null}
+       {identifiers?.find(i => i.type === 'DOB') ? (
+        <>
+        <SectionTitle className='mt-6' title={`DOB*`} />
+         <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
+           <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+             <PopoverTrigger asChild>
+               <div
+            className={`flex h-[56px] w-full items-center justify-between rounded-md border bg-white border-gray-200 dark:border-gray-700 dark:bg-input/30 px-3 py-2 text-muted-foreground cursor-pointer`}
+              >
+            {/* From backend we are getting data into two types of format  */}
+            {(() => {
+              const rawValue = identifiers.find(i => i.type === 'DOB')?.value || '';
+              const dobString = decodeURIComponent(rawValue);
+
+              let dob: Date | null = null;
+              // Check for DD/MM/YYYY format
+              if (dobString.includes('/')) {
+                const [day, month, year] = dobString.split('/');
+                if (!isNaN(Number(day)) && !isNaN(Number(month)) && !isNaN(Number(year))) {
+                  dob = new Date(Number(year), Number(month) - 1, Number(day));
+                }
+              }
+              // Else treat as ISO
+              else if (!isNaN(Date.parse(dobString))) {
+                dob = new Date(dobString);
+              }
+
+              return dob ? (
+                <span>
+                  {dob.toLocaleDateString('en-IN', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                  })}
+                </span>
+              ) : (
+                <span className='text-muted-foreground'>Pick a date</span>
+              );
+            })()}
+            <CalendarIcon
+              className={`h-4 w-4 ${decodedInfo?.dob ? 'opacity-30' : 'opacity-50'}`}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto p-0' align='start'>
+          <Calendar
+            mode='single'
+            captionLayout="dropdown"
+            hideNavigation
+            components={{
+              DropdownNav: (props: DropdownNavProps) => (
+                <div className="flex w-full items-center gap-2">{props.children}</div>
+              ),
+              Dropdown: (props: DropdownProps) => (
+                <Select
+                  value={String(props.value)}
+                  onValueChange={(value) => {
+                    if (props.onChange) {
+                      handleCalendarChange(value, props.onChange);
+                    }
+                  }}
+                >
+                  <SelectTrigger className="h-8 w-fit font-medium first:grow">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-[min(26rem,var(--radix-select-content-available-height))]">
+                    {props.options?.map(option => (
+                      <SelectItem
+                        key={option.value}
+                        value={String(option.value)}
+                        disabled={option.disabled}
+                      >
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )
+            }}
+            selected={(() => {
+              const rawValue = identifiers.find(i => i.type === 'DOB')?.value || '';
+              const dobString = decodeURIComponent(rawValue);
+              if (dobString.includes('/')) {
+                const [day, month, year] = dobString.split('/');
+                if (!isNaN(Number(day)) && !isNaN(Number(month)) && !isNaN(Number(year))) {
+                  return new Date(Number(year), Number(month) - 1, Number(day));
+                }
+              } else if (!isNaN(Date.parse(dobString))) {
+                return new Date(dobString);
+              }
+              return undefined;
+            })()}
+            onSelect={(date) => {
+              if (date) {
+                const dateValue = `${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}/${date.getFullYear()}`;
+                
+                const result = [...identifiers];
+                const dobIndex = result.findIndex(i => i.type === 'DOB');
+                if (dobIndex !== -1) {
+                  result.splice(dobIndex, 1, {
+                    ...result[dobIndex],
+                    value: dateValue
+                  });
+                }
+                setIdentifiers(result);
+
+                const { updateIdentifiers } = useRedirectStore.getState();
+                updateIdentifiers(undefined, dateValue);
+
+                setIsPopoverOpen(false);
+              }
+            }}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+   
+  </>
+) : null}
+
         {identifiers?.find(i => i.type == 'PAN') ? (
           <>
             <SectionTitle className='mt-6' title={`PAN*`} />
             <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
               <Input
+                maxLength={10}
                 type='text'
                 className={`h-[56px] bg-white border-gray-200 dark:border-gray-700 text-consent-primary text-md ${validationError.PAN ? 'border-red-500' : ''}`}
                 placeholder={`Enter PAN`}
@@ -717,6 +739,11 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                       ...result[panIndex],
                       value: panValue
                     }
+
+
+                    if (panIndex === -1) {
+                      console.log("Just pretending that I am coding.")
+                    }
                     setIdentifiers(result)
                     
                     // Also update redirect store immediately

package/src/store/fip.store.ts

@@ -424,6 +424,7 @@ export const useFipStore = create<FipState>()(
       name: 'saafe-fip-storage',
       storage: createJSONStorage(() => sessionStorage),
       partialize: state => ({
+        // groupedFip: state.groupedFips,
         selectedFips: state.selectedFips,
         activeCategory: state.activeCategory,
         selectedMobileNumber: state.selectedMobileNumber,

package/src/utils/removeUnderscore.ts

@@ -0,0 +1,3 @@
+const removeUnderscores = (str : string) => str.replace(/_/g, ' ');
+
+export default removeUnderscores