@anker-in/campaign-ui 0.5.0-beta.8 → 0.5.0

package/src/components/memberPopup/panels/EarnCredits/CompleteProfileModal.tsx

@@ -1,191 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn } from '@anker-in/lib'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import type { CompleteProfileCopy } from '../../type'
-import { useUpdateProfile } from './hooks/useUpdateProfile'
-import useCountries from '../../../credits/context/hooks/useCountries'
-import { useMemberPopupContext } from '../../context/provider'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  onSuccess?: () => void
-  copy: CompleteProfileCopy
-  shopifyStoreDomain?: string
-}
-
-export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {
-  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
-  const { locale } = alpcConfig
-
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [birthDay, setBirthDay] = useState('')
-  const [country, setCountry] = useState('')
-  const [firstNameError, setFirstNameError] = useState('')
-  const [lastNameError, setLastNameError] = useState('')
-
-  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
-  const { countries } = useCountries({ shopifyStoreDomain })
-
-  useEffect(() => {
-    if (profile) {
-      setFirstName(profile.first_name ?? '')
-      setLastName(profile.last_name ?? '')
-      setPhone(profile.phone_number ?? '')
-      setBirthDay(profile.dob ?? '')
-      setCountry(profile.country?.id ?? '')
-    }
-  }, [profile])
-
-  useEffect(() => {
-    if (countries.length > 0 && !country) {
-      setCountry(countries[0].id)
-    }
-  }, [countries])
-
-  const validate = useCallback(() => {
-    let hasError = false
-    if (!firstName.trim()) {
-      setFirstNameError(copy.required)
-      hasError = true
-    } else {
-      setFirstNameError('')
-    }
-    if (!lastName.trim()) {
-      setLastNameError(copy.required)
-      hasError = true
-    } else {
-      setLastNameError('')
-    }
-    return hasError
-  }, [firstName, lastName, copy.required])
-
-  const handleSubmit = useCallback(async () => {
-    if (validate()) return
-    const success = await updateProfile({
-      first_name: firstName.trim(),
-      last_name: lastName.trim(),
-      phone_number: phone,
-      country,
-      dob: birthDay,
-    })
-    if (success) {
-      fetchCreditInfo(profile?.user_id)
-      onSuccess?.()
-      onClose()
-    }
-  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      title={copy.title}
-      titleClassName="!h-auto !border-b-0 !pb-0"
-      className="w-[540px] md:h-auto"
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-    >
-      <div className="flex flex-col gap-[20px]">
-        {copy.subtitle && (
-          <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
-        )}
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.email}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]"
-            value={profile?.email ?? ''}
-            disabled
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
-            {copy.firstName} <span className="text-[#f84d4f]">*</span>
-          </label>
-          <input
-            className={cn(
-              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
-              firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
-            )}
-            value={firstName}
-            onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
-          />
-          {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
-            {copy.lastName} <span className="text-[#f84d4f]">*</span>
-          </label>
-          <input
-            className={cn(
-              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
-              lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
-            )}
-            value={lastName}
-            onChange={e => { setLastName(e.target.value); setLastNameError('') }}
-          />
-          {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.birthday}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            type="date"
-            value={birthDay}
-            onChange={e => setBirthDay(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.phone}</label>
-          <input
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            value={phone}
-            onChange={e => setPhone(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.country}</label>
-          <select
-            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
-            value={country}
-            onChange={e => setCountry(e.target.value)}
-          >
-            {countries.map((c: { id: string; name: string }) => (
-              <option key={c.id} value={c.id}>{c.name}</option>
-            ))}
-          </select>
-        </div>
-
-        <div className="flex gap-[12px]">
-          <Button
-            variant="secondary"
-            size="lg"
-            className="flex-1"
-            onClick={onClose}
-            disabled={isLoading}
-          >
-            {copy.cancel}
-          </Button>
-          <Button
-            variant="primary"
-            size="lg"
-            className="flex-1"
-            loading={isLoading}
-            onClick={handleSubmit}
-          >
-            {copy.save}
-          </Button>
-        </div>
-      </div>
-    </CreditsModalContainer>
-  )
-}