@anker-in/campaign-ui 0.4.8 → 0.5.0-beta.10

package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import Cookies from 'js-cookie'
+import { parse } from 'query-string'
+import { emailValidate } from '../../credits/context/utils'
+import { useMemberPopupContext } from '../context/provider'
+import type { SubscribeModalCopy } from '../type'
+import { ROUNDED_BRANDS } from '../../../constants'
+
+type Props = {
+  onSuccess?: () => void
+  copy: SubscribeModalCopy
+  email?: string
+  hideForm: boolean
+  onHideForm: () => void
+}
+
+function getAdCookie() {
+  if (typeof window === 'undefined') return { register_source: '' }
+  const { search, href } = window.location
+  const query = parse(search)
+  return {
+    fbuy_ref_code: Cookies.get('fbuy_ref_code'),
+    ref: Cookies.get('ref_ads'),
+    inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),
+    register_source: query.redirect ?? Cookies.get('reg_source') ?? href,
+  }
+}
+
+async function getRecaptchaToken(sitekey: string): Promise<string> {
+  if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''
+  if (!sitekey) return ''
+  try {
+    return await window.grecaptcha.execute(sitekey, { action: 'activity' })
+  } catch {
+    return ''
+  }
+}
+
+export default function ActivitiesSubscribeModal({
+  onSuccess,
+  copy,
+  email: initialEmail,
+  hideForm,
+  onHideForm,
+}: Props) {
+  const { alpcConfig } = useMemberPopupContext()
+  const { locale } = alpcConfig
+  const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(headlessBrand)
+  const [policy, setPolicy] = useState(false)
+  const [email, setEmail] = useState(initialEmail ?? '')
+  const [errorMessage, setErrorMessage] = useState('')
+  const [successMessage, setSuccessMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (initialEmail) setEmail(initialEmail)
+  }, [initialEmail])
+
+  const handleSubmit = useCallback(async () => {
+    setErrorMessage('')
+    if (!email) return setErrorMessage('Please fill in your email')
+    if (!emailValidate(email)) return setErrorMessage('Invalid email address')
+    if (!policy) return setErrorMessage('Please agree to the policy')
+
+    setLoading(true)
+    const { register_source } = getAdCookie()
+    const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')
+    try {
+      const response = await fetch('/api/multipass/rainbowbridge/activities', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'current-language': locale,
+          'X-Recaptcha-Token': recaptchaToken,
+        },
+        body: JSON.stringify({
+          email,
+          register_source,
+          shopify_domain: storeDomain,
+          single_brand_subscribe: copy.single_brand_subscribe ?? true,
+          genre: copy.genre ?? copy.dealsType ?? '',
+          sub_brand_type: copy.sub_brand_type ?? '',
+        }),
+      })
+      const result = await response.json()
+      if (!result.errors) {
+        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
+        onSuccess?.()
+        setTimeout(() => {
+          onHideForm()
+          setSuccessMessage('')
+        }, 3000)
+      } else {
+        setErrorMessage(result.errors ?? 'Error occurred')
+      }
+    } catch {
+      setErrorMessage('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }, [email, policy, locale, storeDomain, copy, onSuccess, onHideForm])
+
+  return (
+    <div className="flex flex-col gap-[16px] text-center">
+      {!hideForm && (
+        <>
+          <Text className="text-[22px] font-bold" html={copy.title} />
+          {copy.desc && <Text className="text-left text-[16px] font-semibold text-[#1f2021]" html={copy.desc} />}
+
+          <input
+            className={cn(
+              'h-[46px] w-full border px-[14px] text-[16px] outline-none placeholder:text-[#999]',
+              errorMessage ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
+              rounded ? 'rounded-[4px]' : 'rounded-none'
+            )}
+            placeholder={copy.placeholder}
+            value={email}
+            onChange={e => {
+              setErrorMessage('')
+              setEmail(e.target.value.trim())
+            }}
+          />
+
+          <div className="flex w-full items-start gap-[8px]">
+            <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className="border-[#1d1d1f]" />
+            <label
+              className="text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
+              dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
+            />
+          </div>
+
+          <button
+            className={cn(
+              'w-full cursor-pointer bg-[#080a0f] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',
+              rounded ? 'rounded-[4px]' : 'rounded-none'
+            )}
+            disabled={loading}
+            onClick={handleSubmit}
+          >
+            {copy.buttonLabel ?? 'Subscribe'}
+          </button>
+
+          {errorMessage && (
+            <div className="text-left text-[16px] font-semibold text-[#f84d4f]">
+              <Text html={errorMessage} />
+            </div>
+          )}
+          <div className="text-left text-[16px] font-semibold text-[#52c41a]">
+            <Text html={successMessage} />
+          </div>
+        </>
+      )}
+
+      {copy.promo && (
+        <div className="flex flex-col text-left">
+          <div className="flex flex-col gap-[8px]">
+            {copy.promo?.title && (
+              <h3 className="text-[20px] font-[700] leading-[1.2] text-[#080a0f]">{copy.promo?.title}</h3>
+            )}
+            {copy.promo.description && (
+              <p className="text-[14px] leading-[1.5] text-[#1e2024]">{copy.promo.description}</p>
+            )}
+            {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (
+              <a
+                href={copy.promo.learnMoreUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline"
+              >
+                {copy.promo.learnMoreLabel}
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z"
+                    fill="#080A0F"
+                  />
+                </svg>
+              </a>
+            )}
+          </div>
+          {copy.promo.image?.url && (
+            <Picture
+              source={copy.promo.image.url}
+              alt={copy.promo.image.alt ?? ''}
+              className={cn('h-[100px] mt-[8px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Text, Button } from '@anker-in/headless-ui'
+import { useHeadlessContext, classNames as cn } from '@anker-in/lib'
+import { AlpcErrorCode } from '../../../credits/context/const'
+import { useRedeemCoupon } from './hooks/useRedeemCoupon'
+import useCopy from '../../../credits/context/hooks/useCopy'
+import type { RedeemCouponModalCopy, AlpcConfig } from '../../type'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type Props = {
+  onClose: () => void
+  itemTitle: string
+  itemCredits: number
+  itemImage?: { url: string; alt?: string }
+  itemValue?: string
+  itemOff?: string
+  itemRules?: string[]
+  redeemId: number
+  userId?: string
+  copy: RedeemCouponModalCopy
+  pointUnit?: string
+  alpcConfig: AlpcConfig
+  onError?: (code: number) => void
+}
+
+export default function RedeemCouponPanel({
+  onClose,
+  itemTitle,
+  itemCredits,
+  itemImage,
+  itemValue,
+  itemOff,
+  itemRules,
+  redeemId,
+  userId,
+  copy,
+  pointUnit = 'pts',
+  alpcConfig,
+  onError,
+}: Props) {
+  const [couponCode, setCouponCode] = useState<string>()
+  const [errorInfo, setErrorInfo] = useState('')
+  const [disabled, setDisabled] = useState(false)
+  const { copy: copyText, copied } = useCopy()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)
+
+  const handleConfirm = useCallback(async () => {
+    setErrorInfo('')
+    const { data } = await trigger({ user_id: userId, rule_id: redeemId })
+    if (!data) {
+      setErrorInfo(copy.commonError)
+      return
+    }
+    if (data.data?.success) {
+      setCouponCode(data.data.coupon_code)
+    } else {
+      let msg = copy.commonError
+      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+        msg = copy.redeemLimitError
+        setDisabled(true)
+      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+        msg = copy.inventoryNotEnough
+        setDisabled(true)
+      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
+        msg = copy.creditsNotEnough
+        setDisabled(true)
+      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {
+        msg = copy.crossSiteError
+        setDisabled(true)
+      }
+      setErrorInfo(msg)
+      onError?.(data.code)
+    }
+  }, [trigger, userId, redeemId, copy, onError])
+
+  useEffect(() => {
+    setCouponCode(undefined)
+    setErrorInfo('')
+    setDisabled(false)
+  }, [redeemId])
+
+  const rulesSection = itemRules && itemRules.length > 0 && (
+    <div className="w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
+      <ul className="ml-4 grid grid-flow-row gap-[4px]">
+        {itemRules?.map((text, index) => (
+          <li className="list-disc" key={index}>
+            <Text html={text} className="font-bold" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+
+  return (
+    <div className="flex flex-col">
+      {itemImage?.url && (
+        <div className="relative w-full px-[24px]">
+          <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>
+            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] w-full object-cover" />
+            {itemValue && (
+              <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
+                {itemValue}
+                {itemOff ? ` ${itemOff}` : ''}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {!couponCode && (
+        <div className="flex flex-col gap-[16px] px-[24px] py-[20px]">
+          <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
+            {itemCredits} {pointUnit}
+          </p>
+          {rulesSection}
+        </div>
+      )}
+
+      {couponCode && (
+        <div className="flex mt-[16px] flex-col gap-[8px] text-center">
+          <div className="flex items-center justify-center gap-[10px]">
+            <span className="text-[24px] font-[700]">{couponCode}</span>
+            <button
+              className="cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none"
+              disabled={copied}
+              onClick={() => copyText(couponCode)}
+            >
+              {copied ? 'Copied' : 'Copy'}
+            </button>
+          </div>
+          <Text className="text-[20px] font-[700]" html={copy.successTitle} />
+          <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={copy.successDesc} />
+          <Button
+            className={cn(
+              'w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]',
+              rounded ? 'rounded-[4px]' : 'rounded-none'
+            )}
+            onClick={() => {
+              if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
+              onClose()
+            }}
+          >
+            {copy.successButton}
+          </Button>
+        </div>
+      )}
+
+      {!couponCode && (
+        <div className="sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]">
+          <div className="flex flex-col gap-[8px] text-center">
+            <Text className="block text-[16px] font-[700] leading-[1.3]" html={copy.confirmTitle} />
+            <Button
+              className={cn(
+                'w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]',
+                rounded ? 'rounded-[4px]' : 'rounded-none'
+              )}
+              disabled={disabled}
+              loading={loading}
+              onClick={handleConfirm}
+            >
+              {copy.confirmButton}
+            </Button>
+          </div>
+
+          {errorInfo && (
+            <Text className="mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemAndBuy.ts

@@ -0,0 +1,33 @@
+import { useBuyNow } from '@anker-in/lib'
+import { useRedeemCoupon } from './useRedeemCoupon'
+import type { AlpcConfig } from '../../../type'
+import type { ProductVariant } from '@anker-in/lib'
+
+type RedeemAndBuyArg = {
+  productVariant: ProductVariant
+  quantity?: number
+  redeemId: number
+  userId?: string
+}
+
+export function useRedeemAndBuy(config: AlpcConfig) {
+  const { trigger: redeemTrigger } = useRedeemCoupon(config)
+  const { trigger: buyNow } = useBuyNow({}, { throwOnError: true })
+
+  const trigger = async (arg: RedeemAndBuyArg) => {
+    const { data } = await redeemTrigger({
+      user_id: arg.userId,
+      rule_id: arg.redeemId,
+    })
+    if (data?.data?.coupon_code) {
+      await buyNow({
+        discountCodes: [data.data.coupon_code],
+        lineItems: [{ variant: arg.productVariant, quantity: arg.quantity ?? 1 }],
+      })
+    } else {
+      throw new Error(data?.msg ?? 'Redeem failed')
+    }
+  }
+
+  return { trigger }
+}

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemCoupon.ts

@@ -0,0 +1,38 @@
+import useSWRMutation from 'swr/mutation'
+import { getAlpcPath } from '../../../../credits/context/utils'
+import { ALPC_COUNTRY_MAP } from '../../../../credits/context/const'
+import type { AlpcConfig } from '../../../type'
+
+type RedeemCouponResponse = {
+  data: {
+    data: { success: boolean; coupon_code: string }
+    msg: string
+    code: number
+  }
+}
+
+type RedeemCouponParams = {
+  user_id?: string
+  rule_id: number
+}
+
+export function useRedeemCoupon(config: AlpcConfig) {
+  const { brand, locale, appName, apiBaseUrl } = config
+
+  return useSWRMutation<RedeemCouponResponse, Error, string, RedeemCouponParams>(
+    `/v1/credit/redeem/coupon`,
+    async (url: string, { arg }) => {
+      const response = await fetch(getAlpcPath(locale, apiBaseUrl) + url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'current-language': locale },
+        body: JSON.stringify({
+          brand,
+          country: ALPC_COUNTRY_MAP.get(locale) || locale,
+          app_name: appName,
+          ...arg,
+        }),
+      })
+      return response.json()
+    }
+  )
+}

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemableList.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useState } from 'react'
+import useSWRMutation from 'swr/mutation'
+import { getAlpcPath, languageTerritory } from '../../../../credits/context/utils'
+import { ALPC_COUNTRY_MAP, AlpcConsumeType } from '../../../../credits/context/const'
+import type { ConsumeCreditRuleResponse } from '../../../../credits/context/response'
+import type { AlpcConfig } from '../../../type'
+
+export function useRedeemableList(config: AlpcConfig) {
+  const { brand, locale, appName, apiBaseUrl } = config
+
+  let resolvedLocale = locale
+  if (locale === 'pl') resolvedLocale = 'eu'
+
+  const [redeemableList, setRedeemableList] = useState<ConsumeCreditRuleResponse[]>([])
+
+  const { isMutating: listLoading, trigger } = useSWRMutation(
+    `/v1/credit/consume_credit_rules`,
+    async (url: string, { arg }: { arg: Record<string, any> }) => {
+      const response = await fetch(getAlpcPath(resolvedLocale, apiBaseUrl) + url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'current-language': resolvedLocale },
+        body: JSON.stringify(arg),
+      })
+      return response.json()
+    }
+  )
+
+  const getRedeemableList = useCallback(
+    (consumeType?: AlpcConsumeType) => {
+      trigger(
+        {
+          brand,
+          page: 1,
+          page_size: 999,
+          country: (ALPC_COUNTRY_MAP.get(resolvedLocale) || resolvedLocale)?.toUpperCase(),
+          app_name: appName,
+          ...(consumeType !== undefined && { consume_type: consumeType }),
+        },
+        {
+          onSuccess({ data }) {
+            setRedeemableList(data?.data?.consume_credit_rules ?? [])
+          },
+        }
+      )
+    },
+    [brand, resolvedLocale, appName, trigger]
+  )
+
+  useEffect(() => {
+    if (!brand) return
+    getRedeemableList()
+  }, [brand, getRedeemableList])
+
+  return { redeemableList, listLoading, getRedeemableList }
+}