Created
June 30, 2025 14:10
-
-
Save Timothy-Achonu/3f3675c5a090a524f0c38ec61518fe0d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Install: | |
| "react-phone-number-input": "^3.3.6", | |
| import { Country } from 'react-phone-number-input'; | |
| export const getCountryCodeByName = (countryName: string) => { | |
| const countryCode = Object.keys(countryNames).find( | |
| (key) => | |
| countryNames[key as keyof typeof countryNames].toLowerCase().trim() === | |
| countryName.toLowerCase().trim() | |
| ) as Country | undefined; | |
| return countryCode; | |
| }; | |
| */ | |
| 'use client'; | |
| import React, { useMemo, useState } from 'react'; | |
| import { useMutation } from '@tanstack/react-query'; | |
| import { Country, getCountryCallingCode } from 'react-phone-number-input'; | |
| import countryNames from 'react-phone-number-input/locale/en.json'; | |
| import { getCountryCodeByName } from '@/utils'; | |
| import dayjs from 'dayjs'; | |
| interface IManagePersonalInfoModalProps { | |
| open: boolean; | |
| closeHandler(): void; | |
| } | |
| const addCodeToPhoneNumber = (code: string, phoneNumber: string): string => { | |
| return `+${code}${phoneNumber}`; | |
| }; | |
| const trimToTenChars = (input: string): string => { | |
| // Check if the input string length is 10 or less | |
| if (input.length <= 10) { | |
| return input; | |
| } | |
| // Remove characters from the beginning to make it 10 characters long | |
| return input.slice(input.length - 10); | |
| }; | |
| function getStringAfterDash(input: string): string { | |
| const dashIndex = input.indexOf('-'); | |
| // If '-' is not found, return the string as-is | |
| if (dashIndex === -1) { | |
| return input; | |
| } | |
| // Return everything after the first '-' | |
| return input.slice(dashIndex + 1); | |
| } | |
| function formatDateToDDMMYYYY(dateString: Date): string { | |
| const formattedDate = dayjs(new Date(dateString)).format('DD/MM/YYYY'); | |
| return formattedDate; | |
| } | |
| const ManagePersonalInfoModal = ({ open, closeHandler }: IManagePersonalInfoModalProps) => { | |
| const countryCode = getCountryCodeByName(getStringAfterDash(countryName || businessCountry)); | |
| const [phoneCountry, setPhoneCountry] = useState<CountryProps>({ | |
| countryCode: countryCode, | |
| }); | |
| // Country details | |
| const [country, setCountry] = useState<CountryProps>({ | |
| countryCode: countryCode, | |
| }); | |
| const phoneCC = useMemo(() => phoneCountry.countryCode as Country, [phoneCountry.countryCode]); | |
| return ( | |
| <Modal isOpen={open} closeModal={closeHandler} alignEnd> | |
| <form | |
| className="flex min-h-[800px] min-w-[635px] flex-col rounded-2xl bg-white px-12 pb-[185px] pt-[4.5rem] mmd:min-w-full msm:px-7 mxs:w-full mxs:overflow-x-auto mxs:pb-[150px] mxs:pt-10 mxxs:pb-[200px]" | |
| onSubmit={handleSubmit((data) => | |
| completeUserInfoUpdate({ | |
| ...data, | |
| phone: addCodeToPhoneNumber(getCountryCallingCode(phoneCC), data.phone || ''), | |
| dob: formatDateToDDMMYYYY(data.dob), | |
| }) | |
| )} | |
| > | |
| <fieldset className="flex flex-col gap-6"> | |
| <div className="relative"> | |
| <div className="absolute top-9 z-10 flex items-center gap-1"> | |
| <CountrySelect | |
| value={phoneCountry} | |
| onChange={setPhoneCountry} | |
| customBtnClassName="pr-0" | |
| /> | |
| <span className="block h-6 w-[1px] bg-[#BDBDBD]"></span> | |
| </div> | |
| <Input | |
| name="phone" | |
| type="phone" | |
| placeholder="Enter phone number" | |
| // placeholder="ex. +234706351xxxxxxx" | |
| label="Phone Number" | |
| autoComplete="DO_NO_PREFILL" | |
| register={register} | |
| errorMsg={errors['phone']?.message} | |
| customClassName="pl-[100px]" | |
| /> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </Modal> | |
| ); | |
| }; | |
| export { ManagePersonalInfoModal }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment