@anker-in/campaign-ui 0.1.9 → 0.2.10-beta.1

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

@@ -0,0 +1,126 @@
+import classNames from 'classnames'
+import { Picture } from '@anker-in/headless-ui'
+import { useEffect, useMemo, useState } from 'react'
+import useClickOutside from '../../context/hooks/useClickOutside'
+
+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 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 rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              { '!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 { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+import { AddressFormProps } from './type'
+
+export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
+  const { profile, customer } = useCreditsContext()
+  const { locale } = useShopifyContext()
+
+  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])
+
+  console.log('customer', customer)
+  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]'
+              )
+
+              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/RedeemCouponModal.tsx

@@ -0,0 +1,213 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useCallback, useEffect, useState } from 'react'
+import type { ModalContainerProps } from '../modal/modalContainer'
+import useCopy from '../context/hooks/useCopy'
+import { useCreditsContext } from '../context/provider'
+import { useRedeemCoupon } from '../context/hooks/useRedeemCoupon'
+import { AlpcErrorCode } from '../context/const'
+import { CreditsModalContainer } from '../modal/modalContainer'
+import { numberFormat } from '../context/utils'
+import type { RedeemableItem as RedeemableItemType } from '../type'
+import { useShopifyContext } from '../../../shopify/context/ShopifyProvider'
+import { CreditsRedeemListCopy } from './type'
+
+function RedeemCouponModal({
+  item,
+  copy,
+  onError,
+  ...props
+}: ModalContainerProps & {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+  onError: (code: number) => void
+}) {
+  const { locale } = useShopifyContext()
+  const [couponCode, setCouponCode] = useState<string>()
+  const [errorInfo, setErrorInfo] = useState<string>()
+
+  const [disabled, setDisabled] = useState(false)
+  const { copy: copyText, copied: copiedStatus } = useCopy()
+
+  const { profile, fetchCreditInfo } = useCreditsContext()
+
+  const { isMutating: loading, trigger } = useRedeemCoupon({
+    onSuccess(responseData) {
+      if (!responseData) {
+        setErrorInfo(copy.redeemModal.commonError)
+        return
+      }
+
+      if (responseData?.data?.success) {
+        setCouponCode(responseData.data.coupon_code)
+        fetchCreditInfo(profile?.user_id)
+      } else {
+        let errorMsg
+        if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+          errorMsg = copy.redeemModal.redeemLimitError
+          setDisabled(true)
+        } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+          errorMsg = copy.redeemModal.inventoryNotEnough
+          setDisabled(true)
+        } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
+          errorMsg = copy.redeemModal.creditsNotEnough
+          setDisabled(true)
+          fetchCreditInfo(profile?.user_id)
+        } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {
+          errorMsg = copy.redeemModal.crossSiteError
+          setDisabled(true)
+        }
+
+        setErrorInfo(errorMsg || copy.redeemModal.commonError || '')
+        onError && onError(responseData.code)
+      }
+    },
+    onError(error) {
+      setErrorInfo(error.message || copy.redeemModal.commonError)
+    },
+  })
+
+  const handleConfirm = useCallback(async () => {
+    setErrorInfo('')
+    trigger({
+      user_id: profile?.user_id,
+      rule_id: Number(item.alpc?.id),
+    })
+  }, [item, profile, trigger])
+
+  useEffect(() => {
+    if (!props.isOpen) {
+      setDisabled(false)
+      setErrorInfo('')
+    }
+  }, [props.isOpen])
+
+  return (
+    <CreditsModalContainer
+      {...props}
+      className="w-[540px] md:h-auto"
+      scrollClassName="mb-[40px] min-l:px-0 md:mb-[24px] px-0"
+      titleClassName="h-[56px] bg-[#F5F5F7]"
+    >
+      <div
+        className={classNames(
+          'max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]'
+        )}
+      >
+        <div className="relative mx-auto h-[164px] w-[324px]">
+          {copy?.imageMapping?.coupon?.url && (
+            <Picture source={copy?.imageMapping?.coupon?.url} className="h-full [&_img]:h-full" />
+          )}
+          <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
+            {item.config.value ? (
+              <div className="flex items-end gap-[4px]">
+                <Text className="text-[64px] font-bold leading-none" html={item.config.value.toString()} />
+                <Text className="text-[24px] font-bold leading-[2]" html={copy?.off} />
+              </div>
+            ) : (
+              <Text size={3} html={item.alpc?.title} />
+            )}
+          </div>
+        </div>
+        {couponCode ? (
+          <div className="mt-[30px] flex items-center justify-center md:mt-[18px]">
+            <div className="mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]">{couponCode}</div>
+            <div
+              className={classNames(
+                'cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]',
+                copiedStatus ? 'pointer-events-none' : 'pointer-events-auto'
+              )}
+              onClick={() => {
+                copyText(couponCode)
+              }}
+              role="button"
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                }
+              }}
+            >
+              {copiedStatus ? copy?.copied : copy?.copy}
+            </div>
+          </div>
+        ) : (
+          <Text
+            as="p"
+            className={classNames(
+              'mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]'
+            )}
+          >
+            {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}
+          </Text>
+        )}
+        {!couponCode && item.config?.rules?.length > 0 && (
+          <div className="mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
+            <div className="mb-[4px]">{copy?.ruleLabel}:</div>
+            <ul className="ml-4 grid grid-flow-row gap-[4px]">
+              {item.config?.rules?.map((text, index) => (
+                <li className="list-disc" key={index}>
+                  <Text html={text} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
+        {couponCode && !loading ? (
+          <>
+            <div className="flex flex-col">
+              <Text
+                className="mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]"
+                html={copy.redeemModal.coupon.successTitle}
+              ></Text>
+              <Text
+                className="text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]"
+                html={copy.redeemModal.coupon.successDesc}
+              ></Text>
+            </div>
+            <Button
+              variant="primary"
+              size="lg"
+              className="mt-[16px] w-full"
+              onClick={() => {
+                window.location.href = copy.redeemModal.coupon.successButtonUrl || `/${locale}`
+                if (props.onClose) {
+                  props.onClose()
+                }
+              }}
+              disabled={disabled}
+            >
+              {copy.redeemModal.coupon.successButton}
+            </Button>
+          </>
+        ) : (
+          <>
+            <Text
+              className="block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"
+              html={copy.redeemModal.confirmTitle}
+            ></Text>
+            <Button
+              loading={loading}
+              variant="primary"
+              size="lg"
+              className="mt-[16px] w-full"
+              onClick={handleConfirm}
+              disabled={disabled}
+            >
+              {copy.redeemModal.confirmButton}
+            </Button>
+          </>
+        )}
+        {errorInfo && (
+          <div className="mx-auto max-w-full py-[12px] text-center">
+            <Text className="text-[14px] font-semibold text-[#1F2021]" html={errorInfo} />
+          </div>
+        )}
+      </div>
+    </CreditsModalContainer>
+  )
+}
+
+export default RedeemCouponModal

package/src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx

@@ -0,0 +1,72 @@
+import { Button, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { AddressForm } from '../AddressForm'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ProductInfo } from './ProductInfo'
+import useCountries from '../../context/hooks/useCountries'
+
+type AddressProps = {
+  copy: CreditsRedeemListCopy
+  shippingAddress: string
+  setAddress: (address: Record<string, any>) => void
+  validateAddress: (address: Record<string, any>) => boolean
+  validateErrors: { key: string; message: string }[]
+  item: RedeemableItemType
+  loading: boolean
+  address: Record<string, any> | undefined
+  disabled: boolean
+  handlePayment: () => void
+  shippingProduct: string
+}
+
+export const Address = ({
+  copy,
+  shippingAddress,
+  setAddress,
+  validateAddress,
+  validateErrors,
+  shippingProduct,
+  loading,
+  address,
+  disabled,
+  handlePayment,
+  item,
+}: AddressProps) => {
+  const { storeDomain } = useShopifyContext()
+  const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
+
+  return (
+    <div className="relative">
+      <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
+        <div>
+          {shippingAddress && <Text className="mb-5 text-[16px] font-bold" html={shippingAddress}></Text>}
+          <AddressForm
+            onChange={setAddress}
+            validate={validateAddress}
+            errors={validateErrors}
+            form={copy.redeemModal.product.addressForm}
+            countries={countries}
+            countriesLoading={countriesLoading}
+          ></AddressForm>
+        </div>
+      </div>
+      <div className="sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]">
+        <div className="flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]">
+          {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
+          <ProductInfo item={item} copy={copy} />
+        </div>
+        <Button
+          loading={loading || !address}
+          variant="primary"
+          className="mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full"
+          onClick={handlePayment}
+          disabled={disabled}
+        >
+          {copy.redeemModal.product.paymentButton}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/RedeemProductModal/Error.tsx

@@ -0,0 +1,14 @@
+import { Picture, Text } from '@anker-in/headless-ui'
+
+type ErrorProps = {
+  errorInfo: { imageUrl: string; message: string }
+}
+
+export const Error = ({ errorInfo }: ErrorProps) => {
+  return (
+    <div className="mx-auto max-w-[404px] text-[16px] text-black/40">
+      <Picture className="mx-auto mb-[12px] h-[140px] w-[220px]" source={errorInfo.imageUrl} />
+      <Text as="div" className="mt-[16px] text-center" html={errorInfo.message} />
+    </div>
+  )
+}