@anker-in/campaign-ui 0.1.10 → 0.2.0-beta.10

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,103 @@
+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
+}
+export type CreditsBannerCopy = {
+  pcImg: Img
+  laptopImg: Img
+  mobileImg: Img
+  joinNow: string
+  loginIn: string
+  login: {
+    title: string
+    description: string
+  }
+  unLogin: {
+    title: string
+    description: string
+  }
+}
+
+export function CreditsBanner({ copy }: { copy: CreditsBannerCopy }) {
+  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,88 @@
+import { Heading, Picture, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+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
+}) => {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  return (
+    <div
+      className={cn(
+        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',
+        !rounded && 'rounded-none'
+      )}
+      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={cn(
+                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',
+                    !rounded && 'rounded-none'
+                  )}
+                >
+                  <Text as="p" size="2" html={item.note} className="desktop:text-[18px]" />
+                  <div
+                    className={cn(
+                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',
+                      !rounded && 'rounded-none'
+                    )}
+                  />
+                </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

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

@@ -0,0 +1,23 @@
+export const IconInfo = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      className='size-[18px] cursor-pointer [&_svg]:size-full'
+      width='18'
+      height='18'
+      viewBox='0 0 18 18'
+      fill='none'
+    >
+      <path
+        d='M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z'
+        fill='#6D6D6F'
+      />
+      <path
+        d='M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z'
+        fill='#6D6D6F'
+      />
+    </svg>
+  )
+}
+
+export default IconInfo

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

@@ -0,0 +1,113 @@
+import 'swiper/css'
+import 'swiper/css/grid'
+import 'swiper/css/pagination'
+
+import { Container, Heading } from '@anker-in/headless-ui'
+import { useState } from 'react'
+import { Grid, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import BenefitItem, { type BenefitItemCopy } from './benefitItem'
+import { useCreditsContext } from '../context/provider'
+import { gaTrack, classNames as cn } from '@anker-in/lib'
+
+export type CreditsBenefitsCopy = {
+  title: string
+  benefits: BenefitItemCopy[]
+}
+
+export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
+  const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
+  const { profile, gtm } = useCreditsContext()
+  const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      member_active_status: profile?.activated ? 'active' : 'not active',
+      event_parameters: {
+        page_group: gtm.pageGroup,
+        position: copy.title,
+        button_name: item.text,
+        info: '',
+      },
+    })
+    if (activeNoteIndex === index) {
+      setActiveNoteIndex(null)
+    } else {
+      setActiveNoteIndex(index)
+      setTimeout(() => {
+        setActiveNoteIndex(null)
+      }, 5000)
+    }
+  }
+
+  return (
+    <Container id="benefits" className="!z-[30] bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy?.title} />
+      <div className="mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
+        {copy.benefits.map((item, index) => (
+          <BenefitItem
+            key={index}
+            item={item}
+            handleClick={handleClick}
+            isNoteActive={activeNoteIndex === index}
+            index={index}
+          />
+        ))}
+      </div>
+      <div className="mt-[24px] hidden l:block">
+        <Swiper
+          spaceBetween={16}
+          slidesPerView={2}
+          slidesPerGroup={2}
+          grid={{
+            rows: 2,
+            fill: 'row',
+          }}
+          breakpoints={{
+            768: {
+              slidesPerView: 3,
+              slidesPerGroup: 3,
+            },
+          }}
+          wrapperClass="!items-stretch"
+          modules={[Grid, Pagination]}
+          pagination={{
+            clickable: true,
+            el: '#benefits-pagination',
+            renderBullet(index, className) {
+              return `<div class='${className} !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
+              </div>`
+            },
+          }}
+        >
+          {copy.benefits.map((item, index) => (
+            <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>
+              <BenefitItem
+                item={item}
+                handleClick={handleClick}
+                isNoteActive={activeNoteIndex === index}
+                index={index}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        <div
+          id="benefits-pagination"
+          className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] 
+          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full"
+        ></div>
+      </div>
+
+      {activeNoteIndex && (
+        <div
+          role="button"
+          tabIndex={0}
+          className="fixed inset-0 z-10"
+          onClick={() => setActiveNoteIndex(null)}
+          onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}
+        />
+      )}
+    </Container>
+  )
+}

package/src/components/credits/creditsCash/CreditsCash.tsx

@@ -0,0 +1,82 @@
+import { Container, Heading } from '@anker-in/headless-ui'
+import { useMemo, useState } from 'react'
+
+import RedeemableItem from './RedeemableItem'
+import useRedeemableList from '../context/hooks/useRedeemableList'
+import RulesModal from '../modal/rulesModal'
+import { useProductsByHandles } from '@anker-in/lib'
+import { CreditsCashCopy, RedeemItem } from './type'
+import { Product, classNames as cn } from '@anker-in/lib'
+
+export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
+  const [rules, setRules] = useState<string | string[]>()
+  const { redeemableList } = useRedeemableList()
+
+  const variantMetafieldIdentifiers: any[] = []
+
+  const { data: productByHandles } = useProductsByHandles({
+    handles: copy?.list?.map(item => item.products?.[0]?.handle) || [],
+    metafieldIdentifiers: {
+      variant: variantMetafieldIdentifiers,
+    },
+  })
+
+  const list = useMemo(() => {
+    return productByHandles
+      ?.map((product: Product) => {
+        const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)
+        const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
+        const productVariant =
+          product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0]
+        if (!alpcData || !productVariant) return null
+        return {
+          product,
+          productVariant,
+          alpcData: {
+            id: alpcData?.id,
+            consumeCredits: alpcData?.consume_credits,
+            remainingInventory: alpcData?.remaining_inventory,
+            isLimited: alpcData?.is_limited,
+            consumeType: alpcData?.consume_type,
+            title: alpcData?.name,
+            desc: alpcData?.note,
+          },
+          config,
+        }
+      })
+      .filter(Boolean) as unknown as RedeemItem[]
+  }, [productByHandles, copy.list, redeemableList])
+
+  console.log('list', list)
+
+  return (
+    <Container className={cn('bg-[#F5F5F5]')}>
+      <Heading as="h2" size="4" html={copy.title} />
+      <div className="relative mt-[24px] grid grid-cols-4 gap-[16px] l:gap-[12px] md:grid-cols-2 md-xl:grid-cols-3">
+        {list?.map((item, index: number) => (
+          <RedeemableItem
+            key={index}
+            copy={copy}
+            itemData={item}
+            setRules={setRules}
+            currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}
+          />
+        ))}
+      </div>
+
+      {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>
+  )
+}