@anker-in/campaign-ui 0.1.10 → 0.2.10-beta.2

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

@@ -0,0 +1,45 @@
+import { Button, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ProductInfo } from './ProductInfo'
+
+type SuccessProps = {
+  copy: CreditsRedeemListCopy
+  shippingProduct: string
+  loading: boolean
+  address: Record<string, any> | undefined
+  disabled: boolean
+  onClose: () => void
+  item: RedeemableItemType
+}
+
+export const Success = ({ copy, shippingProduct, loading, address, disabled, onClose, item }: SuccessProps) => {
+  return (
+    <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
+      <div className="flex flex-col items-center">
+        <div className="mb-[16px] grid grid-flow-row gap-y-[4px] md:mb-[12px]">
+          {copy.redeemModal.product.successDesc.map((description: string, index: number) => (
+            <Text key={index} className="text-[18px] font-bold leading-[1.4] md:text-[14px]" html={description}></Text>
+          ))}
+        </div>
+
+        {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
+
+        <div className="flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]">
+          <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={onClose}
+          disabled={disabled}
+        >
+          {copy.redeemModal.product.paymentButton}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,196 @@
+import classNames from 'classnames'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCreditsContext } from '../../context/provider'
+import useCountries from '../../context/hooks/useCountries'
+import { AlpcErrorCode } from '../../context/const'
+import { useAddressValidate } from '../../context/hooks/useAddressValidate'
+import { useRedeemProduct } from '../../context/hooks/useRedeemProduct'
+import type { ModalContainerProps } from '../../modal/modalContainer'
+import { CreditsModalContainer } from '../../modal/modalContainer'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { CreditsRedeemListCopy } from '../type'
+import { Error } from './Error'
+import { Success } from './Success'
+import { Address } from './Address'
+import { Init } from './Init'
+
+type RedeemProductModalProps = ModalContainerProps & {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+  onError: (code: AlpcErrorCode) => void
+}
+
+function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModalProps) {
+  const { fetchCreditInfo, profile } = useCreditsContext()
+  const { storeDomain, locale } = useShopifyContext()
+
+  const { validatorInfo } = copy
+  const { shippingAddress, shippingProduct } = copy.redeemModal.product
+
+  const [status, setStatus] = useState<'init' | 'address' | 'success' | 'error'>('init')
+  const [address, setAddress] = useState<any>()
+  const [errorInfo, setErrorInfo] = useState({
+    code: 0,
+    message: '',
+    imageUrl: '',
+  })
+  const [disabled, setDisabled] = useState(false)
+
+  const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
+
+  const { isMutating: loading, trigger } = useRedeemProduct({
+    onSuccess(responseData) {
+      if (!responseData) {
+        setStatus('error')
+        setErrorInfo({
+          code: 0,
+          imageUrl: copy.redeemModal.errorImageUrl || '',
+          message: copy.redeemModal.commonError || '',
+        })
+        return
+      }
+
+      if (responseData?.code === 0) {
+        fetchCreditInfo(profile?.user_id)
+        setStatus('success')
+      } else {
+        let errorMsg
+        let errorImage
+        if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+          errorMsg = copy.redeemModal.redeemLimitError
+          setDisabled(true)
+        } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+          errorMsg = copy.redeemModal.inventoryNotEnough
+          setDisabled(true)
+          errorImage = copy.redeemModal.inventoryNotEnough
+        } 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)
+        }
+
+        setStatus('error')
+        setErrorInfo({
+          code: responseData.code,
+          imageUrl: errorImage || copy.redeemModal.errorImageUrl || '',
+          message: errorMsg || copy.redeemModal.commonError || '',
+        })
+        onError && onError(responseData.code)
+      }
+    },
+    onError(error) {
+      setStatus('error')
+      setErrorInfo({
+        code: 0,
+        imageUrl: copy.redeemModal.errorImageUrl || '',
+        message: copy.redeemModal.commonError || '',
+      })
+    },
+  })
+
+  const stateInputKey = useMemo(() => {
+    const stateInput = copy?.redeemModal.product.form?.flat().find(item => item.type === 'state')
+    return stateInput?.key
+  }, [copy?.redeemModal.product.form])
+
+  const { validate: validateAddress, errors: validateErrors } = useAddressValidate({
+    address: address,
+    validatorInfo: validatorInfo,
+    formData: copy?.redeemModal.product.form?.flat() || [],
+    errorLabel: {
+      require: copy.redeemModal.product.required,
+      email: copy.redeemModal.product.invalidEmail,
+    },
+  })
+
+  const handlePayment = useCallback(async () => {
+    const ignoreKeys: string[] = []
+
+    if (stateInputKey) {
+      const provinces = countries.find(item => item.code === address.country)?.provinces || []
+
+      if (!provinces.length) {
+        ignoreKeys.push(stateInputKey as never)
+      }
+    }
+
+    if (
+      validateAddress({
+        force: true,
+        ignoreKeys,
+      })
+    ) {
+      // 地址校验错误
+      return
+    }
+    console.log('address', address)
+    let requestAddress = { ...address }
+    if (requestAddress.name) {
+      delete requestAddress.name
+    }
+    if (requestAddress.country === 'UK') {
+      requestAddress.country = 'GB'
+    }
+    trigger({
+      address: btoa(JSON.stringify(requestAddress)),
+      rule_id: Number(item.alpc?.id),
+    })
+  }, [item, trigger, stateInputKey, validateAddress, address, countries])
+
+  useEffect(() => {
+    if (!props.isOpen) {
+      setDisabled(false)
+      setErrorInfo({ code: 0, message: '', imageUrl: '' })
+    }
+  }, [props.isOpen, locale])
+
+  return (
+    <CreditsModalContainer
+      {...props}
+      className={classNames(
+        'w-[540px] md:h-auto min-md:max-h-[calc(100vh-40px)]',
+        status !== 'init' && 'w-[740px] md:w-full'
+      )}
+      scrollClassName="mb-0 min-l:px-0 md:mb-0 px-0"
+      titleClassName={classNames('h-[56px]', status === 'init' && 'bg-[#F5F5F7]')}
+      title={status === 'address' ? 'Order Confirmation' : ''}
+    >
+      {status === 'error' && <Error errorInfo={errorInfo} />}
+      {status === 'success' && (
+        <Success
+          copy={copy}
+          shippingProduct={shippingProduct}
+          loading={loading}
+          address={address}
+          disabled={disabled}
+          onClose={props.onClose}
+          item={item}
+        />
+      )}
+      {status === 'address' && (
+        <Address
+          copy={copy}
+          shippingAddress={shippingAddress}
+          setAddress={setAddress}
+          validateAddress={validateAddress}
+          validateErrors={validateErrors}
+          shippingProduct={shippingProduct}
+          loading={loading}
+          address={address}
+          disabled={disabled}
+          handlePayment={handlePayment}
+          item={item}
+        />
+      )}
+      {status === 'init' && (
+        <Init item={item} copy={copy} loading={loading} disabled={disabled} setStatus={setStatus} />
+      )}
+    </CreditsModalContainer>
+  )
+}
+
+export default RedeemProductModal

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

@@ -0,0 +1,191 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+
+import { useMemo } from 'react'
+
+import classNames from 'classnames'
+import { useCreditsContext } from '../context/provider'
+import type { RedeemableItem as RedeemableItemType } from '../type'
+import { AlpcConsumeType, ConsumeType } from '../context/const'
+import { numberFormat } from '../context/utils'
+import type { CreditsRedeemListCopy } from './type'
+import { gaTrack } from '../../../helpers/track'
+
+export function RedeemableItem({
+  copy,
+  className,
+  item,
+  onRulesOpen,
+  onRedeem,
+}: {
+  copy: CreditsRedeemListCopy
+  className?: string
+  item: RedeemableItemType
+  onRulesOpen: (rules: string[]) => void
+  onRedeem: (item: RedeemableItemType) => void
+}) {
+  const {
+    creditInfo,
+    profile,
+    gtm: { pageGroup },
+  } = useCreditsContext()
+  const isLogin = Object.keys(profile || {}).length > 0
+
+  const isDisabled = useMemo(() => {
+    if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {
+      // 有库存限制
+      return true
+    }
+
+    if (item.alpc?.consumeType === AlpcConsumeType.Product) {
+      if (!item.variant?.availableForSale) {
+        return true
+      }
+    }
+    if (isLogin && profile?.activated && item.alpc?.consumeCredits > Number(creditInfo?.available_credit || 0)) {
+      return true
+    }
+    return false
+  }, [
+    item.alpc?.remainingInventory,
+    item.alpc?.isLimited,
+    item.alpc?.consumeType,
+    item.alpc?.consumeCredits,
+    isLogin,
+    profile?.activated,
+    creditInfo?.available_credit,
+    item.variant?.availableForSale,
+  ])
+
+  const redeemButtonText = useMemo(() => {
+    if (!isLogin) {
+      return copy.unlockRewards
+    }
+
+    // 缺货文案
+    if (item.alpc?.consumeType === AlpcConsumeType.Product) {
+      return item.variant?.availableForSale ? copy.btnRedeem : copy?.soldOut || 'Sold Out'
+    }
+    return copy.btnRedeem
+  }, [
+    isLogin,
+    item.alpc?.consumeType,
+    item.variant?.availableForSale,
+    copy.btnRedeem,
+    copy.unlockRewards,
+    copy?.soldOut,
+  ])
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        className
+      )}
+    >
+      {item.config?.type !== ConsumeType.Product ? (
+        <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
+          <Picture
+            source={copy?.imageMapping[item.config?.type]?.url}
+            className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+          ></Picture>
+          <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white md:bottom-[2px] md:left-[5px]">
+            {item.config?.value ? (
+              <div className="flex items-end">
+                <Text
+                  className="text-[64px] font-bold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]"
+                  html={item.config?.value}
+                />
+                <Text
+                  className="ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]"
+                  html={item.config?.type === ConsumeType.GiftCard ? copy?.giftCardLabel : copy?.off}
+                />
+              </div>
+            ) : (
+              <Text size={3} html={item.config?.title || item.alpc?.title} />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>
+          <Picture
+            className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
+            source={item.config?.image?.url || item.product.images?.[0]?.url}
+          ></Picture>
+        </div>
+      )}
+      <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>
+        <Text
+          html={item.config?.title || item.alpc?.title}
+          title={item.config?.title || item.alpc?.title}
+          size={2}
+          className="text-[24px] font-bold leading-[1.2] l:text-[16px] l-xxl:text-[20px]"
+        />
+        {item.config?.rules?.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              onRulesOpen(item.config?.rules || [])
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                member_active_status: profile?.activated ? 'active' : 'not active',
+                event_parameters: {
+                  page_group: pageGroup,
+                  position: copy.title,
+                  button_name: copy?.ruleLabel,
+                  info: item.alpc?.id?.toString(),
+                },
+              })
+            }}
+            className="mt-[8px] w-fit text-[16px] font-bold underline md:text-[14px] l:mt-0"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {copy?.ruleLabel}
+          </button>
+        )}
+        <div>
+          <div className="mt-[24px] flex items-center l:mt-[12px] l-xl:mt-[16px]">
+            <Picture
+              className="size-[20px]"
+              source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
+            />
+            <Text
+              html={`${numberFormat(item.alpc?.consumeCredits)}`}
+              size={2}
+              as="p"
+              className="ml-[4px] text-[28px] font-bold leading-[1.2] md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+            />
+          </div>
+
+          <Button
+            disabled={isDisabled}
+            variant="primary"
+            size="lg"
+            className="mt-[8px] md:px-[8px] l:w-full"
+            onClick={() => {
+              onRedeem(item)
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                member_active_status: profile?.activated ? 'active' : 'not active',
+                event_parameters: {
+                  page_group: pageGroup,
+                  position: copy.title,
+                  button_name: redeemButtonText,
+                  info: item.alpc?.id?.toString(),
+                },
+              })
+            }}
+          >
+            {redeemButtonText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,195 @@
+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 { useProductsByHandles } from '@shopify/hooks/useProductsByHandles'
+import type { RedeemableItem as RedeemableItemType } from '../type'
+import { RedeemableItem } from './RedeemableItem'
+import RulesModal from '../modal/rulesModal'
+import { CreditsRedeemListCopy } from './type'
+import { gaTrack } from '../../../helpers/track'
+
+export function CreditsRedeemList({
+  copy,
+  className = '',
+  tabClassName = '',
+  hideTitle = false,
+  cardClassName,
+  activate,
+}: {
+  copy: CreditsRedeemListCopy
+  className?: string
+  tabClassName?: string
+  hideTitle?: boolean
+  cardClassName?: string
+  activate: {
+    openAuthCodePopup: () => void
+    isSuccess: boolean
+    setOnSuccess: (callback: Function) => void
+  }
+}) {
+  const {
+    profile,
+    openSignUpPopup,
+    gtm: { pageGroup },
+  } = useCreditsContext()
+  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]
+  )
+
+  console.log('popRedeemData', popRedeemData)
+
+  return (
+    <Container className={classNames('relative bg-[#F5F5F7]', className)}>
+      {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}
+
+      <Tabs
+        shape="rounded"
+        align="left"
+        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center', tabClassName)}
+        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 && !activate.isSuccess) {
+                  activate.openAuthCodePopup()
+                  activate.setOnSuccess(() => {
+                    setPopRedeemData(item)
+                  })
+                } else {
+                  setPopRedeemData(item)
+                }
+              }}
+              onRulesOpen={setRules}
+              className={cardClassName}
+            />
+          ))}
+        </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={copy?.ruleLabel}
+          ruleClassName="text-[#1d1d1f] font-bold"
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,78 @@
+import { CreditsPageCommon } from '../type'
+
+export type CreditsRedeemListCopy = {
+  title: string
+  giftCardLabel: string
+  unlockRewards: string
+  btnRedeem: string
+  list: {
+    label: string
+    list: {
+      id: string
+      type: string
+      value: string
+      rules: string[]
+    }[]
+  }[]
+  validatorInfo: {
+    addressInfo: {
+      name: string
+      country: string
+      province: string
+      city: string
+      address: string
+    }
+  }
+  redeemModal: {
+    confirmTitle: string
+    confirmButton: string
+    commonError: string
+    redeemLimitError: string
+    inventoryNotEnough: string
+    creditsNotEnough: string
+    crossSiteError: string
+    errorImageUrl: string
+    coupon: {
+      successDesc: string
+      successTitle: string
+      successButton: string
+      successButtonUrl: string
+    }
+    product: {
+      required: string
+      invalidEmail: string
+      shippingAddress: string
+      shippingProduct: string
+      addressForm: {
+        key: string
+        type: string
+        label: string
+        isSelect: boolean
+        required: boolean
+        placeholder: string
+      }[][]
+      form: {
+        key: string
+        type: string
+        isSelect: boolean
+        required: boolean
+        placeholder: string
+      }[][]
+      successDesc: string[]
+      rules: string[]
+      steps: {
+        imageUrl: string
+        title: string
+      }[]
+      quantityLabel: string
+      totalPriceLabel: string
+      variantLabel: string
+      shippingFeeLabel: string
+      paymentButton: string
+      stepTitle: string
+    }
+  }
+  copied: string
+  off: string
+  copy: string
+} & CreditsPageCommon