@anker-in/campaign-ui 0.1.10 → 0.2.0-beta.10

package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx

@@ -0,0 +1,115 @@
+import { Picture } from '@anker-in/headless-ui'
+import useClickOutside from '../../context/hooks/useClickOutside'
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+
+interface Country {
+  id: string
+  code: string
+  name: string
+}
+
+interface CountrySelectProps {
+  countries: Country[]
+  loading?: boolean
+  className?: string
+  value?: string
+  onChange: (code: string) => void
+}
+
+export function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {
+  const [show, setShow] = useState(false)
+  const [display, setDisplay] = useState<any>('')
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const dorpdown = useClickOutside<HTMLDivElement>(() => {
+    setShow(false)
+  })
+
+  useEffect(() => {
+    const target = countries.filter(item => item.code === value)
+    if (target.length) setDisplay(target[0].name)
+  }, [setDisplay, countries, value])
+
+  return (
+    <div className="relative">
+      <select
+        className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}
+        style={{
+          WebkitTextFillColor: 'black',
+        }}
+        disabled={loading}
+        value={value}
+        onChange={event => {
+          onChange(event.target.value)
+        }}
+      >
+        {countries.map((item: { id: string; name: string; code: string }) => (
+          <option key={item.code} value={item.code}>
+            {item.name}
+          </option>
+        ))}
+      </select>
+
+      <div
+        className={classNames(
+          'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',
+          !rounded && 'rounded-none',
+          className
+        )}
+        onClick={() => {
+          setShow(true)
+        }}
+        role="button"
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+          }
+        }}
+      >
+        {display}
+      </div>
+
+      <Picture
+        source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
+        className="absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover"
+        alt="arrow"
+      />
+
+      <div
+        ref={dorpdown}
+        className={classNames(
+          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          !rounded && 'rounded-none',
+          { '!hidden': !show }
+        )}
+      >
+        <ul className="py-[6px]">
+          {countries.map((item: { id: string; name: string; code: string }) => (
+            <li
+              key={item.code}
+              value={item.code}
+              className={classNames(
+                'relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]',
+                { '!bg-[#EAEAEC]': item.code === value }
+              )}
+            >
+              <button
+                className="absolute left-0 top-0 z-1 size-full opacity-0"
+                value={item.code}
+                onClick={() => {
+                  setDisplay(item.name)
+                  setShow(false)
+                  onChange(item.code)
+                }}
+              />
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/FormItem.tsx

@@ -0,0 +1,23 @@
+import { Text } from '@anker-in/headless-ui'
+import { type PropsWithChildren } from 'react'
+
+export const FormItem = ({
+  error,
+  children,
+  label,
+  required,
+}: PropsWithChildren<{
+  label?: string
+  required: boolean
+  error?: string
+}>) => {
+  return (
+    <div>
+      {label && <Text html={required ? `${label} *` : label} className="text-[16px] font-bold"></Text>}
+      <div className="mt-[8px] h-[50px] w-full text-[14px] font-semibold">{children}</div>
+      {error && typeof error === 'string' && (
+        <Text as="div" html={error} className="mt-[8px] text-[16px] font-bold text-[#FF4D4D]" />
+      )}
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/Input.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useState } from 'react'
+
+interface InputProps {
+  className?: string
+  value: string
+  error?: string | boolean
+  placeholder: string
+  required?: boolean
+  disabled?: boolean
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+}
+
+export function Input({ className, error, value, placeholder, disabled, onChange, onBlur }: InputProps) {
+  const [focus, setFocus] = useState(false)
+
+  useEffect(() => {
+    if (value) setFocus(true)
+  }, [value])
+
+  const handleOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const val = event.currentTarget.value
+      if (val) setFocus(!!val)
+      onChange(event)
+    },
+    [onChange],
+  )
+
+  const handleOnBlur = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFocus(!!event.currentTarget.value)
+      onBlur && onBlur()
+    },
+    [onBlur],
+  )
+
+  const handleOnFocus = useCallback(() => {
+    setFocus(true)
+  }, [])
+
+  return (
+    <input
+      className={classNames(
+        'w-full rounded-[2px] border border-[#6D6D6F] p-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0',
+        className,
+        error && 'border-[#FF4D4D]',
+      )}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={handleOnChange}
+      onBlur={handleOnBlur}
+      onFocus={handleOnFocus}
+    ></input>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/StateSelect.tsx

@@ -0,0 +1,130 @@
+import classNames from 'classnames'
+import { Picture } from '@anker-in/headless-ui'
+import { useEffect, useMemo, useState } from 'react'
+import useClickOutside from '../../context/hooks/useClickOutside'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+
+interface StateSelectProps {
+  states: { code: string; id: string; name: string }[]
+  className?: string
+  countryId?: string
+  defaultCode?: string
+  stateName?: string
+  stateCode?: string
+  onChange: (code: string, name: string) => void
+}
+
+export function StateSelect({ states, stateName = '', stateCode = '', className = '', onChange }: StateSelectProps) {
+  const [show, setShow] = useState(false)
+  const [display, setDisplay] = useState<any>('')
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const dropdown = useClickOutside<HTMLDivElement>(() => {
+    setShow(false)
+  })
+
+  const value = useMemo(() => {
+    const currentState = states.find(item => (stateCode ? item.code === stateCode : item.name === stateName))
+
+    return currentState ? [currentState?.id, currentState?.name, currentState?.code].join(',') : ''
+  }, [states, stateCode, stateName])
+
+  useEffect(() => {
+    const target = states.filter(item => [item.id, item.name, item.code].join(',') === value)
+    if (target.length) setDisplay(target[0].name)
+  }, [setDisplay, states, value])
+
+  return (
+    <div className="relative h-full">
+      {states.length ? (
+        <>
+          <select
+            className={classNames('h-[52px] pr-[45px] min-l:hidden', className)}
+            value={value}
+            style={{
+              WebkitTextFillColor: value ? 'black' : '#666',
+            }}
+            onChange={event => {
+              const [, name, code] = event.target.value.split(',')
+              onChange(code, name)
+            }}
+          >
+            {states.map((item: { id: string; name: string; code: string }) => (
+              <option key={item.id} value={[item.id, item.name, item.code].join(',')}>
+                {item.name}
+              </option>
+            ))}
+          </select>
+          <div
+            className={classNames('absolute left-0 top-0 hidden h-[52px] pr-[45px] min-l:!block', className)}
+            onClick={() => {
+              setShow(true)
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {display}
+          </div>
+
+          <Picture
+            source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
+            className="pointer-events-none absolute right-0 top-1/2 h-[45px] !w-[45px] -translate-y-1/2 object-cover"
+            alt="arrow"
+          />
+
+          <div
+            ref={dropdown}
+            className={classNames(
+              'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              !rounded && 'rounded-none',
+              { '!hidden': !show }
+            )}
+          >
+            <ul className="py-[6px]">
+              {states.map((item: { id: string; name: string; code: string }) => (
+                <li
+                  key={item.id}
+                  value={[item.id, item.name, item.code].join(',')}
+                  className={classNames(
+                    'relative px-[14px] py-[17px] text-[16px] font-semibold leading-[1] transition hover:bg-[#F7F8F9]',
+                    {
+                      '!bg-[#e8e8e8]': [item.id, item.name, item.code].join(',') === value,
+                    }
+                  )}
+                >
+                  <button
+                    className="absolute left-0 top-0 z-1 size-full opacity-0"
+                    value={[item.id, item.name, item.code].join(',')}
+                    onClick={() => {
+                      setDisplay(item.name)
+                      setShow(false)
+                      onChange(item.code, item.name)
+                    }}
+                  />
+                  {item.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </>
+      ) : (
+        <input
+          className={className}
+          value={stateName}
+          style={{
+            WebkitTextFillColor: 'black',
+          }}
+          onChange={event => {
+            onChange('', event.target.value)
+          }}
+        ></input>
+      )}
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/index.tsx

@@ -0,0 +1,156 @@
+import classNames from 'classnames'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { CountrySelect } from './CountrySelect'
+import { FormItem } from './FormItem'
+import { Input } from './Input'
+import { StateSelect } from './StateSelect'
+import { ALPC_COUNTRY_MAP } from '../../context/const'
+import { useCreditsContext } from '../../context/provider'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { AddressFormProps } from './type'
+
+export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
+  const { profile, customer } = useCreditsContext()
+  const { locale, brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const [address, setAddress] = useState<Record<string, any>>()
+
+  const states = useMemo(() => {
+    const currentCountry = countries.find(item => item.code === address?.country)
+
+    return currentCountry?.provinces || []
+  }, [address, countries])
+
+  const stateInputKey = useMemo(() => {
+    const stateInput = form?.flat().find(item => item.type === 'state')
+    return stateInput?.key
+  }, [form])
+
+  const getDefaultAddress = useCallback(() => {
+    if (customer?.defaultAddress) {
+      return {
+        name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),
+        first_name: customer?.defaultAddress.firstName,
+        last_name: customer?.defaultAddress.lastName,
+        address1: customer?.defaultAddress.address1,
+        address2: customer?.defaultAddress.address2,
+        city: customer?.defaultAddress.city,
+        phone: customer?.defaultAddress.phone,
+        country: customer?.defaultAddress.countryCodeV2,
+        province: customer?.defaultAddress.province,
+        province_code: customer?.defaultAddress.provinceCode,
+        email: customer?.email || profile?.email,
+        zip: customer?.defaultAddress.zip,
+      }
+    } else {
+      let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale
+      if (defaultCountry === 'UK') {
+        defaultCountry = 'GB'
+      }
+      if (defaultCountry === 'EU') {
+        defaultCountry = 'NL'
+      }
+      return {
+        email: profile?.email,
+        country: defaultCountry,
+      }
+    }
+  }, [customer, profile?.email, locale])
+
+  useEffect(() => {
+    if (customer) {
+      const defaultAddress = getDefaultAddress()
+      setAddress(defaultAddress)
+      onChange(defaultAddress)
+    }
+  }, [customer, getDefaultAddress])
+
+  if (!address) {
+    return null
+  }
+
+  return (
+    <div className="grid gap-[20px]">
+      {form &&
+        form.map((row, rowIndex: number) => (
+          <div key={rowIndex} className="item-center -mx-[6px] flex">
+            {row.map((input, inputIndex: number) => {
+              const error = errors.find(item => item.key === input.key)?.message
+              const inputClassName = classNames(
+                'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]',
+                !rounded && 'rounded-none'
+              )
+
+              if (input.type === 'state') {
+                if (!states.length) {
+                  return null
+                }
+              }
+
+              return (
+                <div key={inputIndex} className={classNames('mx-[6px] flex-1')}>
+                  <FormItem error={error} required={input.required} label={input.label}>
+                    {input.type === 'country' && (
+                      <CountrySelect
+                        className={inputClassName}
+                        countries={countries}
+                        loading={countriesLoading}
+                        value={address.country}
+                        onChange={selectedCountryCode => {
+                          if (address.country !== selectedCountryCode) {
+                            address.province = ''
+                            address.province_code = ''
+                          }
+                          address.country = selectedCountryCode
+                          setAddress({ ...address })
+                          onChange(address)
+                        }}
+                      ></CountrySelect>
+                    )}
+                    {input.type === 'state' && (
+                      <StateSelect
+                        className={inputClassName}
+                        states={states}
+                        stateCode={address.province_code}
+                        stateName={address.province}
+                        onChange={(provinceCode, provinceName) => {
+                          address.province_code = provinceCode
+                          address.province = provinceName
+                          setAddress({ ...address })
+                          onChange(address)
+                        }}
+                      ></StateSelect>
+                    )}
+
+                    {input.type !== 'state' && input.type !== 'country' && (
+                      <Input
+                        placeholder={input.label}
+                        className={inputClassName}
+                        error={error}
+                        value={address[input.key]}
+                        required={input.required}
+                        disabled={input.type === 'email'}
+                        onChange={event => {
+                          const value = event.target.value
+                          address[input.key] = value
+                          setAddress({ ...address })
+                          onChange(address)
+                        }}
+                        onBlur={() => {
+                          validate({
+                            ignoreKeys: states.length && stateInputKey ? [stateInputKey] : [],
+                          })
+                        }}
+                      />
+                    )}
+                  </FormItem>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/type.ts

@@ -0,0 +1,24 @@
+import { CreditsRedeemListCopy } from '../type'
+
+type ShippingCountry = {
+  id: string
+  name: string
+  code: string
+  provinces: {
+    id: string
+    name: string
+    code: string
+  }[]
+}
+
+export interface AddressFormProps {
+  form: CreditsRedeemListCopy['redeemModal']['product']['addressForm']
+  onChange: (address: any) => void
+  validate: (args: { force?: boolean; ignoreKeys?: string[] }) => boolean
+  errors: {
+    key: string
+    message: string
+  }[]
+  countries: ShippingCountry[]
+  countriesLoading: boolean
+}

package/src/components/credits/creditsRedeemList/CreditsRedeemList.tsx

@@ -0,0 +1,176 @@
+import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useCallback, useMemo, useState } from 'react'
+
+import RedeemCouponModal from './RedeemCouponModal'
+import RedeemProductModal from './RedeemProductModal'
+import { useCreditsContext } from '../context/provider'
+import useRedeemableList from '../context/hooks/useRedeemableList'
+import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
+import { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'
+import type { RedeemableItem as RedeemableItemType } from '../type'
+import { RedeemableItem } from './RedeemableItem'
+import RulesModal from '../modal/rulesModal'
+import { CreditsRedeemListCopy } from './type'
+import { useRegistration } from '../../../components/registration'
+
+export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {
+  const {
+    profile,
+    openSignUpPopup,
+    gtm: { pageGroup },
+    pageCommon,
+  } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const isLogin = Object.keys(profile || {}).length > 0
+
+  const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)
+
+  const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)
+
+  const [rules, setRules] = useState<string | string[]>()
+
+  const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()
+
+  const alpcList = useMemo(() => {
+    return redeemableList.map(item => {
+      return {
+        id: item.id.toString(),
+        title: item.name,
+        consumeCredits: item.consume_credits,
+        remainingInventory: item.remaining_inventory,
+        isLimited: !!item.is_limited,
+        consumeType: item.consume_type,
+        handle: item.sku_handle,
+        sku: item.goods_sku,
+        image: item.goods_url,
+      }
+    })
+  }, [copy.list, activeTab, redeemableList])
+
+  const handles = alpcList.map(item => item.handle)
+  const { data: products } = useProductsByHandles({ handles })
+
+  const list = useMemo(() => {
+    const currentList = copy.list.find(item => item.label === activeTab)
+    return currentList?.list
+      .filter(item => alpcList.some(alpcItem => alpcItem.id === item.id))
+      .map(item => {
+        const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)
+        const product = products?.find(product => product.handle === alpcItem?.handle)
+        const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)
+        if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null
+        return {
+          alpc: alpcList.find(alpcItem => alpcItem.id === item.id),
+          config: item,
+          product,
+          variant,
+        }
+      })
+      .filter(item => item !== null) as unknown as RedeemableItemType[]
+  }, [alpcList, products])
+
+  const handleRedeemError = useCallback(
+    (errorCode: AlpcErrorCode) => {
+      if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+        getRedeemableList()
+      }
+    },
+    [getRedeemableList]
+  )
+
+  return (
+    <Container className={classNames('relative bg-[#F5F5F7]')}>
+      <Heading as="h2" size="4" html={copy.title} />
+
+      <Tabs
+        shape={rounded ? 'rounded' : 'square'}
+        align="left"
+        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}
+        value={activeTab.toString()}
+        onValueChange={value => {
+          setActiveTab(value)
+          gaTrack({
+            event: 'ga4Event',
+            event_name: 'lp_navigation',
+            event_parameters: {
+              navigation: value,
+              page_group: pageGroup,
+            },
+          })
+        }}
+      >
+        <TabsList>
+          {copy.list.map(item => (
+            <TabsTrigger key={item.label} value={item.label}>
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      {/* PC端 */}
+      {!!alpcList?.length && !listLoading && (
+        <div
+          className={classNames('relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3')}
+        >
+          {list?.map(item => (
+            <RedeemableItem
+              key={item?.alpc?.id}
+              copy={copy}
+              item={item}
+              onRedeem={(item: RedeemableItemType) => {
+                if (!isLogin) {
+                  openSignUpPopup()
+                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+                  authCodeActivate.open()
+                } else {
+                  setPopRedeemData(item)
+                }
+              }}
+              onRulesOpen={setRules}
+            />
+          ))}
+        </div>
+      )}
+
+      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Coupon && copy?.redeemModal?.coupon && popRedeemData && (
+        <RedeemCouponModal
+          isOpen={!!popRedeemData}
+          item={popRedeemData}
+          copy={copy}
+          onError={handleRedeemError}
+          onClose={() => {
+            setPopRedeemData(undefined)
+          }}
+        />
+      )}
+      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Product && copy?.redeemModal && popRedeemData && (
+        <RedeemProductModal
+          isOpen={!!popRedeemData}
+          item={popRedeemData}
+          copy={copy}
+          onError={handleRedeemError}
+          onClose={() => {
+            setPopRedeemData(undefined)
+          }}
+        />
+      )}
+      {rules && (
+        <RulesModal
+          overlayClassName="md:px-[16px] md:items-center"
+          className="md:h-fit md:rounded-b-[16px]"
+          isOpen={rules.length > 0}
+          onClose={() => setRules([])}
+          titleClassName="border-b-transparent h-[56px]"
+          rules={rules}
+          scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
+          title={pageCommon?.ruleLabel}
+          ruleClassName="text-[#1d1d1f] font-bold"
+        />
+      )}
+    </Container>
+  )
+}