@anker-in/campaign-ui 0.1.10 → 0.2.0

package/src/components/credits/context/hooks/useRedeemableList.ts

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { useAlpcMutation } from './useAlpcFetch'
+import { ALPC_COUNTRY_MAP } from '../const'
+import { useCreditsContext } from '../provider'
+import type { ConsumeCreditRuleResponse } from '../response'
+import { useHeadlessContext } from '@anker-in/lib'
+
+function useRedeemableList() {
+  let locale = '' as string
+  const { profile, isLoadingProfile } = useCreditsContext()
+  const { locale: contextLocale, brand } = useHeadlessContext()
+
+  if (contextLocale === 'pl') {
+    locale = 'eu'
+  } else {
+    locale = contextLocale
+  }
+
+  const [redeemableList, setRedeemableList] = useState<ConsumeCreditRuleResponse[]>([])
+  const { isMutating: listLoading, trigger } = useAlpcMutation<
+    {
+      data: { consume_credit_rules: ConsumeCreditRuleResponse[] }
+    },
+    { user_id?: string }
+  >({
+    url: `/v1/credit/consume_credit_rules`,
+    initData: {
+      brand,
+      page: 1,
+      page_size: 20,
+      country: (ALPC_COUNTRY_MAP.get(locale) || locale)?.toUpperCase(),
+      task_target: 1, // 1: 'app', 2: 'website'
+    },
+  })
+
+  const getRedeemableList = useCallback(() => {
+    trigger(
+      {
+        user_id: profile?.user_id,
+      },
+      {
+        onSuccess(responseData) {
+          let list = responseData.data.consume_credit_rules || []
+          let cList = list.filter(i => i.consume_type == 1) || []
+          let pList = list.filter(i => i.consume_type == 2) || []
+          cList = cList.sort((prev, next) => prev.consume_credits - next.consume_credits)
+          pList = pList.sort((prev, next) => prev.consume_credits - next.consume_credits)
+          const resultList = cList.concat(pList)
+          setRedeemableList(resultList)
+
+          localStorage?.setItem(
+            `consume_credit_rules-${locale}`,
+            JSON.stringify({
+              expire: Date.now() + 10 * 60 * 1000,
+              consume_credit_rules: resultList,
+            })
+          )
+        },
+      }
+    )
+  }, [profile, trigger, locale])
+
+  useEffect(() => {
+    if (!isLoadingProfile) {
+      getRedeemableList()
+    }
+  }, [getRedeemableList, isLoadingProfile])
+
+  return {
+    listLoading,
+    redeemableList,
+    getRedeemableList,
+  }
+}
+
+export default useRedeemableList

package/src/components/credits/context/hooks/useSendEmailValidation.ts

@@ -0,0 +1,20 @@
+import fetcher from '../../../../helpers/fetcher'
+import useSWRMutation from 'swr/mutation'
+import { useCreditsContext } from '../provider'
+import { useHeadlessContext } from '@anker-in/lib'
+
+export function useSendEmailValidation() {
+  const { profile } = useCreditsContext()
+  const { appName, locale } = useHeadlessContext()
+
+  return useSWRMutation('send-email-validation', () =>
+    fetcher({
+      locale,
+      url: '/api/multipass/account/users/send_validation_email',
+      method: 'POST',
+      body: { email: profile?.email, app: appName },
+      needRecaptcha: true,
+      action: 'verifyAccount',
+    })
+  )
+}

package/src/components/credits/context/hooks/useSubscribed.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+
+import { TaskSubType } from '../const'
+import useActivities from './useActivities'
+import { useSubscriptions } from './useSubscriptions'
+import { useCreditsContext } from '../provider'
+import { useHeadlessContext } from '@anker-in/lib'
+
+export const useSubscribed = () => {
+  const { profile } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+
+  const activitiesOptions = useMemo(() => ({ page: 1, pageSize: 50 }), [])
+
+  const { activities } = useActivities(activitiesOptions)
+  const { data: subscription } = useSubscriptions({ email: profile?.email })
+
+  const isSubscribed = useMemo(() => {
+    if (!subscription?.preference) {
+      return false
+    }
+
+    const subscribeResult = subscription.preference.some(item => {
+      return item.brand === brand && item.subscribe
+    })
+
+    if (subscribeResult) {
+      return true
+    }
+
+    return activities?.some(item => {
+      return item.task_sub_type === TaskSubType.Subscription
+    })
+  }, [subscription?.preference, activities])
+
+  return isSubscribed
+}

package/src/components/credits/context/hooks/useSubscriptions.ts

@@ -0,0 +1,29 @@
+import useSWR, { SWRResponse } from 'swr'
+import type { Subscription } from '../../type'
+import fetcher from '../../../../helpers/fetcher'
+import { useHeadlessContext } from '@anker-in/lib'
+
+export type SubscriptionApiResponse = { data: Subscription }
+export type FetchSubscriptionResponse = SWRResponse<Subscription>
+
+export function useSubscriptions({ email }: { email?: string }): FetchSubscriptionResponse {
+  const { locale } = useHeadlessContext()
+
+  const { data, ...rest } = useSWR<SubscriptionApiResponse>(
+    email ? ['/api/multipass/account/subscriptions', email] : null,
+    async ([url, email]) =>
+      fetcher({
+        method: 'GET',
+        url,
+        body: {
+          email,
+        },
+        action: 'login',
+        locale,
+        headers: {},
+        type: '',
+      })
+  )
+
+  return { data: data?.data, ...rest } as unknown as FetchSubscriptionResponse
+}

package/src/components/credits/context/hooks/useUploadReceipt.tsx

@@ -0,0 +1,29 @@
+import useSWRMutation from 'swr/mutation'
+
+export const uploadReceipt = async (
+  _: any,
+  { arg: { orderName } }: { arg: { orderName: string } }
+): Promise<{
+  ok: boolean
+  code: number
+}> => {
+  const response = await fetch(`/api/multipass/mktsrv/v1/credit/upload_third_party_order`, {
+    credentials: 'include',
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      order_name: orderName,
+    }),
+  })
+  const { data } = await response.json()
+  return {
+    ok: data?.code === 0,
+    code: data?.code,
+  }
+}
+
+export const useUploadReceipt = () => {
+  return useSWRMutation('/api/multipass/mktsrv/v1/credit/upload_third_party_order', uploadReceipt)
+}

package/src/components/credits/context/provider.tsx

@@ -0,0 +1,86 @@
+import React, { createContext, useContext } from 'react'
+import type { DTC_TASK_TYPE } from './const'
+import type { CreditInfoResponse } from './response'
+
+export const CreditsContext = createContext<{
+  profile: any
+  isLoadingProfile: boolean
+  removeProfile: () => void
+  taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+  openSignInPopup: () => void
+  openSignUpPopup: () => void
+  creditInfo?: CreditInfoResponse
+  customer?: any
+  customerLoading: boolean
+  fetchCreditInfo: (user_id: string) => void
+  gtm: {
+    pageGroup: string
+  }
+}>({
+  profile: null,
+  isLoadingProfile: false,
+  taskIdToTypeMapping: {},
+  removeProfile: () => {},
+  openSignInPopup: () => {},
+  openSignUpPopup: () => {},
+  creditInfo: undefined,
+  customerLoading: false,
+  fetchCreditInfo: (user_id: string) => {},
+  gtm: {
+    pageGroup: '',
+  },
+})
+
+export function CreditsProvider({
+  children,
+  profile,
+  removeProfile,
+  isLoadingProfile,
+  openSignInPopup,
+  openSignUpPopup,
+  taskIdToTypeMapping,
+  creditInfo,
+  customer,
+  customerLoading,
+  fetchCreditInfo,
+  gtm,
+}: {
+  children: React.ReactNode
+  profile: any
+  removeProfile: () => void
+  isLoadingProfile: boolean
+  openSignInPopup: () => void
+  openSignUpPopup: () => void
+  taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+  creditInfo?: CreditInfoResponse
+  customer: any
+  fetchCreditInfo: (user_id: string) => void
+  customerLoading: boolean
+  gtm: {
+    pageGroup: string
+  }
+}) {
+  return (
+    <CreditsContext.Provider
+      value={{
+        profile,
+        isLoadingProfile,
+        removeProfile,
+        openSignInPopup,
+        openSignUpPopup,
+        taskIdToTypeMapping,
+        creditInfo,
+        fetchCreditInfo,
+        customer,
+        customerLoading,
+        gtm,
+      }}
+    >
+      {children}
+    </CreditsContext.Provider>
+  )
+}
+
+export function useCreditsContext() {
+  return useContext(CreditsContext)
+}

package/src/components/credits/context/response.ts

@@ -0,0 +1,72 @@
+import { ApprovalStatus, AlpcConsumeType, CreditType, TaskSubType, TaskType } from './const'
+
+// ALPC服务响应数据类型
+
+interface BaseResponse {
+  brand: string
+}
+
+export interface Task extends BaseResponse {
+  goods_sku?: string
+  task_type: TaskType
+  task_sub_type: TaskSubType
+  task_rule_id: number
+  task_name: string
+  task_note: string
+  app_name: string
+}
+
+// 积分流水
+export interface CreditLogResponse extends Task {
+  credit: number
+  task_name: string
+  create_time: number
+  credit_type: CreditType
+  pending_time: number
+  status: number
+  expired_time?: number
+}
+
+export interface ConsumeCreditRuleResponse extends BaseResponse {
+  id: number
+  name: string
+  note: string
+  consume_credits: number
+  consume_type: AlpcConsumeType
+  coupon_rule: string
+  remaining_inventory: number
+  is_limited: number
+  sku_handle: string
+  goods_sku: string
+  goods_url: string
+  extra?: string // discount, type
+}
+
+export interface RedeemLogResponse extends BaseResponse {
+  goods_title: string
+  coupon_code: string
+  order_number: string
+  create_time: number
+  consume_credits: number
+  fulfillment_status: string
+  approval_status: ApprovalStatus
+  rule_id: number
+  code_status: number
+}
+
+export interface CreditTaskResponse extends Task {
+  status: number
+  is_enable: number
+  id: number
+  weight: number
+  reward_type: number
+}
+
+export interface CreditInfoResponse extends BaseResponse {
+  total_credit: number
+  available_credit: number
+  pending_credit: number
+  expired_credit: number
+  cancel_credit: number
+  consumed_credit: number
+}

package/src/components/credits/context/utils.ts

@@ -0,0 +1,149 @@
+import Cookies from 'js-cookie'
+import { PRICE_SYMBOL } from './const'
+
+export function getAlpcPath(locale = '') {
+  let isEU = false
+  const alpcEUCookie = Cookies.get('alpcEU')
+  if (alpcEUCookie === undefined || alpcEUCookie === '') {
+    if (['de', 'eu-de', 'eu', 'eu-en', 'uk', 'fr', 'fra'].includes(locale)) {
+      isEU = true
+    }
+  } else {
+    let alpcEU = Number(alpcEUCookie)
+    if (alpcEU) {
+      isEU = true
+    }
+  }
+
+  if (isEU) {
+    return '/api/multipass/alpc-eu'
+  }
+
+  return '/api/multipass/alpc'
+}
+
+export function numberFormat(num: number = 0) {
+  if (typeof Intl === 'undefined') {
+    return num
+  }
+
+  return new Intl.NumberFormat().format(num)
+}
+
+export const emailValidate = (email: any) => {
+  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    email
+  )
+}
+
+export const languageTerritory = (locale: string) =>
+  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html
+  ({
+    us: 'en-us',
+    uk: 'en-gb',
+    ca: 'en-ca',
+    au: 'en-au',
+    nz: 'en-nz',
+    eu: 'en-eu',
+    pl: 'pl-pl',
+    fr: 'fr-fr',
+    de: 'de-de',
+    vn: 'vi-vn',
+    sg: 'en-sg',
+    'ae-en': 'en-ae',
+    plus: 'en-us',
+    cl: 'es-cl',
+    es: 'es-es',
+    // Nordic countries
+    se: 'en-se',
+    dk: 'en-dk',
+    is: 'en-is',
+    no: 'en-no',
+    fi: 'en-fi',
+  })[locale] || ''
+
+export function formatPrice({
+  amount,
+  currencyCode,
+  locale,
+  maximumFractionDigits,
+  minimumFractionDigits,
+  removeTrailingZeros = false,
+}: {
+  amount: number
+  currencyCode: string
+  locale: string
+  maximumFractionDigits?: number
+  minimumFractionDigits?: number
+  removeTrailingZeros?: boolean
+}) {
+  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale) || locale, {
+    style: 'currency',
+    currency: currencyCode || 'USD',
+    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,
+    maximumFractionDigits,
+  })
+
+  let formattedValue = formatCurrency.format(amount)
+
+  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {
+    formattedValue = formattedValue?.toString()?.replace(/[\s]/g, '')
+  }
+
+  if (removeTrailingZeros) {
+    // Adjust the regex to match comma as decimal separator
+    formattedValue = formattedValue
+      .replace(/(\.\d*?[1-9])0+\b/, '$1')
+      .replace(/\.0+\b/, '')
+      .replace(/(\,\d*?[1-9])0+\b/, '$1')
+      .replace(/\,0+\b/, '')
+  }
+
+  return formattedValue
+}
+
+export function formatVariantPrice({
+  amount,
+  baseAmount,
+  currencyCode,
+  locale,
+  maximumFractionDigits,
+  minimumFractionDigits,
+  removeTrailingZeros,
+}: {
+  baseAmount: number
+  amount: number
+  currencyCode: string
+  locale: string
+  maximumFractionDigits?: number
+  minimumFractionDigits?: number
+  removeTrailingZeros?: boolean
+}) {
+  if (typeof Intl === 'undefined') {
+    return {
+      price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,
+      basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,
+      discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,
+    }
+  }
+
+  const hasDiscount = baseAmount > amount
+  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {
+    style: 'percent',
+  })
+  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null
+
+  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })
+  const basePrice = hasDiscount
+    ? formatPrice({
+        amount: baseAmount,
+        currencyCode,
+        locale,
+        maximumFractionDigits,
+        minimumFractionDigits,
+        removeTrailingZeros,
+      })
+    : undefined
+
+  return { price, basePrice, discount }
+}

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

@@ -0,0 +1,105 @@
+import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useCreditsContext } from '../context/provider'
+
+type Img = {
+  url: string
+  alt: string
+}
+type BannerProps = {
+  copy: {
+    pcImg: Img
+    laptopImg: Img
+    mobileImg: Img
+    joinNow: string
+    loginIn: string
+    login: {
+      title: string
+      description: string
+    }
+    unLogin: {
+      title: string
+      description: string
+    }
+  }
+}
+
+export function CreditsBanner({ copy }: BannerProps) {
+  const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()
+  const isLogin = profile ? Object.keys(profile).length !== 0 : false
+
+  const displayName = profile?.first_name
+    ? profile?.first_name + ' ' + profile?.last_name
+    : profile?.email?.split('@')[0]
+
+  const handleButtonClick = (buttonType: 'primary' | 'secondary') => {
+    buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()
+  }
+
+  return (
+    <>
+      <div className=" relative w-full">
+        <Picture
+          className="aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]"
+          source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}
+          alt={copy.pcImg?.alt}
+          loading="eager"
+        ></Picture>
+        {isLogin && (
+          <div
+            className="absolute inset-0 "
+            style={{
+              background: 'linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)',
+            }}
+          ></div>
+        )}
+
+        <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
+          <div className="grid grid-cols-12">
+            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+              <Heading
+                as="h1"
+                size="5"
+                html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
+              ></Heading>
+
+              <Text
+                size="3"
+                className="l:mt-[4px] l-xxl:text-[14px] mt-[16px]"
+                html={isLogin ? copy.login.description : copy.unLogin.description}
+              ></Text>
+
+              {!isLogin && (
+                <div
+                  className={classNames(
+                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',
+                    isLogin && 'hidden'
+                  )}
+                >
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    onClick={() => {
+                      handleButtonClick('primary')
+                    }}
+                  >
+                    {copy.joinNow}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    onClick={() => {
+                      handleButtonClick('secondary')
+                    }}
+                  >
+                    {copy.loginIn}
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        </Container>
+      </div>
+    </>
+  )
+}

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -0,0 +1,73 @@
+import { Heading, Picture, Text } from '@anker-in/headless-ui'
+import { cn } from '../../../helpers/utils'
+import IconInfo from './iconInfo'
+
+export interface BenefitItemCopy {
+  icon: {
+    alt: string
+    url: string
+  }
+  text: string
+  note?: string
+  tag?: string
+}
+const BenefitItem = ({
+  item,
+  handleClick,
+  isNoteActive,
+  index,
+}: {
+  item: BenefitItemCopy
+  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void
+  isNoteActive: boolean
+  index: number
+}) => {
+  return (
+    <div
+      className="relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
+      style={{
+        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
+      }}
+    >
+      <div className="flex flex-col">
+        <Picture
+          className="mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0"
+          alt={item.icon?.alt}
+          source={item.icon?.url}
+        />
+        <div className="flex items-center">
+          <Heading html={item.text} size="2" className="break-all" />
+          {item.note && (
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                }
+              }}
+              className="relative mb-1 ml-[4px]"
+              onClick={() => handleClick({ item, index })}
+            >
+              <IconInfo />
+              <div
+                className={cn(
+                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',
+                  isNoteActive ? 'block' : 'hidden'
+                )}
+              >
+                <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
+                  <Text as="p" size="2" html={item.note} className="desktop:text-[18px]" />
+                  <div className="absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        {item.tag && <Text as="div" html={item.tag} className="mt-[2px] text-[16px] font-bold text-[#6D6D6F]" />}
+      </div>
+    </div>
+  )
+}
+
+export default BenefitItem