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

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

@@ -0,0 +1,129 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { Fragment, useMemo } from 'react'
+import { numberFormat } from '../../context/utils'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ConsumeType } from '../../context/const'
+
+type InitProps = {
+  copy: CreditsRedeemListCopy
+  item: RedeemableItemType
+  loading: boolean
+  disabled: boolean
+  setStatus: (status: 'address' | 'init' | 'success' | 'error') => void
+}
+
+export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) => {
+  const rules = useMemo(() => {
+    if (item.config.rules?.length) {
+      return item.config.rules
+    }
+    const descriptions = item.config.desc?.split('<br>') || []
+    return [...descriptions, ...(copy.redeemModal.product.rules || [])]
+  }, [item.config.rules, item.config.desc, copy.redeemModal.product.rules])
+
+  console.log('item', item)
+  return (
+    <div className="flex flex-col">
+      <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-fit">
+            <Picture
+              source={
+                item.config?.type === ConsumeType.Product
+                  ? item.product.images[0]?.url
+                  : copy?.imageMapping[item.config.type]?.url || item.config.image?.url
+              }
+              className="h-full w-auto [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+            ></Picture>
+            {/* 礼品卡展示 */}
+            <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={item.config.type === ConsumeType.Coupon ? copy?.off : copy?.giftCardLabel}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="mt-[30px] md:mt-[18px]">
+            {item.config.type === 'product' && (
+              <div
+                className={classNames(
+                  'mb-[4px] text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]'
+                )}
+              >
+                {item.config.title}
+              </div>
+            )}
+            <Text
+              as="p"
+              className={classNames(' text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]')}
+            >
+              {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}
+            </Text>
+          </div>
+          <div className="mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]">
+            <div className="text-[16px] font-bold leading-[1.4]">{copy.redeemModal.product.stepTitle}</div>
+            <div className="mt-[4px] flex items-center justify-center">
+              {copy.redeemModal.product.steps?.map((item, index) => (
+                <Fragment key={index}>
+                  <div className="flex w-[76px] flex-col items-center text-center md:h-[94px] min-l:w-[130px]">
+                    <Picture source={item.imageUrl} className="mb-[4px] h-[58px] w-[58px]"></Picture>
+                    <div className="min-h-[34px] text-[14px] font-bold text-[#777] md:min-h-[28px] md:text-[12px]">
+                      {item.title}
+                    </div>
+                  </div>
+                  {index !== copy.redeemModal.product.steps.length - 1 && (
+                    <Picture
+                      source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/step-arrow.png?v=1690458150"
+                      className="mb-[20px] h-[10px] w-[20px] md:mb-[30px] md:h-[5px] md:w-[12px]"
+                    ></Picture>
+                  )}
+                </Fragment>
+              ))}
+            </div>
+            <div className="overflow-auto">
+              {rules?.length && (
+                <ul className="ml-[18px] mt-[16px] grid grid-flow-row gap-[4px] text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px]">
+                  {rules.map((text, index) => (
+                    <li className="list-disc" key={index}>
+                      <Text as="div" html={text} className="font-bold" />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        </>
+      </div>
+      <div className="flex-1 bg-white px-[48px] py-[24px] text-center md:px-[16px]">
+        <Text
+          as="p"
+          className="block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"
+          html={copy.redeemModal.confirmTitle}
+        ></Text>
+        <Button
+          loading={loading}
+          disabled={disabled}
+          variant="primary"
+          size="lg"
+          className="mt-[16px] w-full md:mt-[12px]"
+          onClick={() => {
+            setStatus('address')
+          }}
+        >
+          {copy.redeemModal.confirmButton}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,72 @@
+import { Picture } from '@anker-in/headless-ui'
+import { formatPrice } from '../../context/utils'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+type ProductInfoProps = {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+}
+
+export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
+  const { locale } = useShopifyContext()
+
+  return (
+    <div className="flex w-full items-center justify-center md:items-start md:justify-start">
+      <Picture
+        className="mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+        source={item.variant.image?.url || item.product?.images[0]?.url}
+        alt={item.product.title}
+      ></Picture>
+      <div className="md:flex md:flex-col">
+        <div className="md:flex md:items-center">
+          <Picture
+            className="mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+            source={item.variant.image?.url || item.product?.images[0]?.url}
+            alt={item.product.title}
+          ></Picture>
+          <div className="flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden" title={item.product.title}>
+            {item.product.title}
+          </div>
+        </div>
+
+        <div className="mt-[16px] md:mt-[12px]">
+          <div className="mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden" title={item.product.title}>
+            {item.product.title}
+          </div>
+          <div className="flex font-semibold leading-[1.4] md:flex-col">
+            <div className="mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]">
+              <div className="mb-[8px] flex items-center md:mb-[4px]">
+                <span>{copy.redeemModal.product.variantLabel}: </span>
+                <span className="ml-1">{item.variant.title || ''}</span>
+              </div>
+              <div className="mb-[8px] flex items-center md:mb-[4px]">
+                <span>{copy.redeemModal.product.shippingFeeLabel}: </span>
+                <span className="ml-1">
+                  {formatPrice({
+                    amount: 0,
+                    currencyCode: item.product.price?.currencyCode!,
+                    locale: locale || 'us',
+                  })}
+                </span>
+              </div>
+            </div>
+            <div className="text-[15px] font-bold text-[#777] md:text-[12px]">
+              <div className="mb-[8px] flex items-center md:mb-[4px]">
+                <span>{copy.redeemModal.product.quantityLabel}: </span>
+                <span className="ml-1">1</span>
+              </div>
+              <div className="l:flex l:items-center l:justify-between">
+                <span>{copy.redeemModal.product.totalPriceLabel}: </span>
+                <span className="ml-1">
+                  {item.alpc?.consumeCredits} {copy?.pointUnit}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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>
+  )
+}