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

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

@@ -0,0 +1,86 @@
+import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
+import { cn } from '../../../helpers/index'
+import { useMemo, useState } from 'react'
+
+import { FaqItem } from './faqItem/FaqItem'
+
+export type FaqCopy = {
+  title: string
+  subTitle: string
+  learnMore: {
+    link: string
+    label: string
+  }
+  items: {
+    category_name: string
+    question: string
+    answer: string
+  }[]
+}
+export const CreditsFaq = ({ copy }: { copy: FaqCopy }) => {
+  const { title, items: faqList, subTitle = '' } = copy || {}
+  const categoryList = useMemo(() => {
+    return Array.from(new Set(faqList?.map?.(faq => faq.category_name).filter(item => !!item)))
+  }, [faqList])
+  const [activeTab, setActiveTab] = useState<string>(categoryList[0]?.toString() || '')
+
+  const currentList = useMemo(() => {
+    if (!faqList) return []
+    if (categoryList.length) {
+      return faqList.filter(item => item?.category_name === activeTab)
+    }
+    return faqList
+  }, [faqList, categoryList.length, activeTab])
+
+  return (
+    <Container className="bg-[#F5F5F7]" id="faq">
+      {title && <Heading as="h2" size="4" html={copy?.title} />}
+      {subTitle && (
+        <div className="mt-[8px] flex flex-row">
+          <Text size="4" as="p" html={subTitle} className="flex-1" />
+        </div>
+      )}
+      {/* faq-nav */}
+      <Tabs
+        align="left"
+        shape="rounded"
+        className="mt-[24px]"
+        value={activeTab.toString()}
+        onValueChange={value => {
+          setActiveTab(value)
+        }}
+      >
+        <TabsList>
+          {categoryList.map((item, index) => (
+            <TabsTrigger key={index} value={item?.toString() || ''}>
+              {item}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      <div className={cn('mt-[24px] flex flex-col overflow-auto pt-0')}>
+        {currentList?.map((item, index) => {
+          return (
+            <FaqItem
+              key={index}
+              index={index}
+              defaultExpended={faqList.length === 1}
+              question={item.question}
+              answer={item.answer}
+              showDots={false}
+            ></FaqItem>
+          )
+        })}
+      </div>
+      {copy.learnMore?.link && copy.learnMore?.label && (
+        <a
+          href={copy.learnMore?.link}
+          target="_blank"
+          className="mt-[64px] block w-full text-center text-[18px] font-bold text-brand hover:underline l:text-[16px]"
+        >
+          {copy.learnMore?.label}
+        </a>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,176 @@
+import { Button, Container, Text } from '@anker-in/headless-ui'
+
+import { useCallback, useState } from 'react'
+import { useCreditsContext } from '../context/provider'
+import { cn } from '../../../helpers'
+import { numberFormat } from '../context/utils'
+import ActivitiesModal from '../modal/activitiesModal'
+import MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'
+import { type MyActivitiesMetafields } from '../modal/activitiesModal'
+
+type ButtonConfig = {
+  text: string
+  type: 'activities' | 'rewards'
+}
+export interface InfoCardProps {
+  data: {
+    balanceLabel: string
+    comingSoonLabel: string
+    comingSoonTips: string
+    buttons: ButtonConfig[]
+    pointUnit: string
+    infoIcon: string
+    myActivities: MyActivitiesMetafields
+    myRewards: MyRewardsMetafields
+  }
+}
+export function CreditsInfoCard({ data }: InfoCardProps) {
+  const [openActivities, setOpenActivities] = useState(false)
+  const [openRewards, setOpenRewards] = useState(false)
+  const [hover, setHover] = useState<boolean>(false)
+
+  const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {
+    // gaNormalClick({ position: 'info_card', label: buttonConfig.text })
+
+    if (buttonConfig.type) {
+      switch (buttonConfig.type) {
+        case 'activities':
+          setOpenActivities(true)
+          break
+        case 'rewards':
+          setOpenRewards(true)
+          break
+      }
+    }
+  }, [])
+
+  const { creditInfo } = useCreditsContext()
+
+  return (
+    <Container asChild id="infoCard" className="-mb-[86px] -translate-y-[86px] x:-mb-[30px] x:-translate-y-[30px]">
+      <div
+        className={cn(
+          'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',
+          'l:flex-col',
+          'min-l:px-[48px]',
+          'min-xl:px-[100px]'
+        )}
+        style={{
+          background:
+            'linear-gradient(119.61deg, rgba(250, 250, 250, 0.6) 38.58%, rgba(255, 255, 255, 0.6) 63.73%, rgba(249, 252, 255, 0.6) 89.37%)',
+          backdropFilter: 'blur(8px)',
+        }}
+      >
+        <div
+          className={cn(
+            'grid grid-cols-2 gap-[24px] font-bold md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
+          )}
+        >
+          <div className="mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]">
+            <div
+              className={cn(
+                'mb-[24px] text-[14px] font-bold l:mb-[6px] xl:text-[16px] min-md:text-[18px] l-xl:mb-[16px]'
+              )}
+            >
+              {data.balanceLabel}
+            </div>
+            <div className="flex items-baseline">
+              <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
+                {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
+              </div>
+              <div className="text-[16px]">{data?.pointUnit}</div>
+            </div>
+          </div>
+          <div className="w-fit md:flex-1">
+            <div className={cn('mb-[24px] flex text-[18px] l:mb-[6px] l:text-[14px] l-xl:mb-[16px]')}>
+              <Text className="text-[14px] font-bold xl:text-[16px] min-md:text-[18px]" html={data.comingSoonLabel} />
+              {data.comingSoonTips && (
+                <div className="group relative ml-[4px] flex cursor-pointer items-start">
+                  <Text
+                    as="div"
+                    html={data?.infoIcon}
+                    className="size-[18px] cursor-pointer [&_svg]:size-full"
+                    onClick={() => {
+                      if (hover) {
+                        setHover(false)
+                      } else {
+                        setHover(true)
+                        setTimeout(() => {
+                          setHover(false)
+                        }, 5000)
+                      }
+                    }}
+                  />
+                  <div
+                    className={cn(
+                      'absolute -bottom-[12px] -left-[32px] z-10 w-[356px] translate-y-full md:w-[276px]',
+                      hover ? 'block' : 'hidden'
+                    )}
+                  >
+                    <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
+                      <Text size="2" html={data.comingSoonTips} className="desktop:text-[18px]" />
+                      <div className="absolute -top-[10px] left-[40px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex items-baseline ">
+              <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>
+                {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}
+              </div>
+              <div className="text-[16px]">{data?.pointUnit}</div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'grid w-fit md:w-full l:mt-[32px] l:gap-[12px] min-l:gap-[16px] min-l:pl-[48px] md-l:grid-cols-2'
+          )}
+        >
+          {data.buttons?.map((item, index) => (
+            <Button
+              key={index}
+              variant={index === 0 ? 'secondary' : 'primary'}
+              size="lg"
+              className="min-w-[156px] laptop:min-w-[189px]"
+              onClick={() => {
+                handleButtonClick(item)
+              }}
+            >
+              {item.text}
+            </Button>
+          ))}
+        </div>
+
+        {data?.myActivities && (
+          <ActivitiesModal
+            isOpen={openActivities}
+            data={data?.myActivities}
+            onClose={() => {
+              setOpenActivities(false)
+            }}
+          />
+        )}
+        {data?.myRewards && (
+          <MyRewardsModal
+            isOpen={openRewards}
+            data={data?.myRewards}
+            onClose={() => {
+              setOpenRewards(false)
+            }}
+          ></MyRewardsModal>
+        )}
+      </div>
+      {hover && (
+        <div
+          role="button"
+          tabIndex={0}
+          className="fixed inset-0 z-10"
+          onClick={() => setHover(false)}
+          onKeyDown={e => e.key === 'Escape' && setHover(false)}
+        />
+      )}
+    </Container>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx

@@ -0,0 +1,111 @@
+import { Picture } from '@anker-in/headless-ui'
+import useClickOutside from '../../context/hooks/useClickOutside'
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+
+interface Country {
+  id: string
+  code: string
+  name: string
+}
+
+interface CountrySelectProps {
+  countries: Country[]
+  loading?: boolean
+  className?: string
+  value?: string
+  onChange: (code: string) => void
+}
+
+export function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {
+  const [show, setShow] = useState(false)
+  const [display, setDisplay] = useState<any>('')
+
+  const dorpdown = useClickOutside<HTMLDivElement>(() => {
+    setShow(false)
+  })
+
+  useEffect(() => {
+    const target = countries.filter(item => item.code === value)
+    if (target.length) setDisplay(target[0].name)
+  }, [setDisplay, countries, value])
+
+  return (
+    <div className="relative">
+      <select
+        className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}
+        style={{
+          WebkitTextFillColor: 'black',
+        }}
+        disabled={loading}
+        value={value}
+        onChange={event => {
+          onChange(event.target.value)
+        }}
+      >
+        {countries.map((item: { id: string; name: string; code: string }) => (
+          <option key={item.code} value={item.code}>
+            {item.name}
+          </option>
+        ))}
+      </select>
+
+      <div
+        className={classNames(
+          'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',
+          className
+        )}
+        onClick={() => {
+          setShow(true)
+        }}
+        role="button"
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+          }
+        }}
+      >
+        {display}
+      </div>
+
+      <Picture
+        source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
+        imgClassName="pointer-events-none absolute right-0 top-0 bottom-0 !w-[45px] object-cover"
+        alt="arrow"
+      />
+
+      <div
+        ref={dorpdown}
+        className={classNames(
+          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          { '!hidden': !show }
+        )}
+      >
+        <ul className="py-[6px]">
+          {countries.map((item: { id: string; name: string; code: string }) => (
+            <li
+              key={item.code}
+              value={item.code}
+              className={classNames(
+                'relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]',
+                { '!bg-[#EAEAEC]': item.code === value }
+              )}
+            >
+              <button
+                className="absolute left-0 top-0 z-1 size-full opacity-0"
+                value={item.code}
+                onClick={() => {
+                  setDisplay(item.name)
+                  setShow(false)
+                  onChange(item.code)
+                }}
+              />
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/FormItem.tsx

@@ -0,0 +1,23 @@
+import { Text } from '@anker-in/headless-ui'
+import { type PropsWithChildren } from 'react'
+
+export const FormItem = ({
+  error,
+  children,
+  label,
+  required,
+}: PropsWithChildren<{
+  label?: string
+  required: boolean
+  error?: string
+}>) => {
+  return (
+    <div>
+      {label && <Text html={required ? `${label} *` : label} className="text-[16px] font-bold"></Text>}
+      <div className="mt-[8px] h-[50px] w-full text-[14px] font-semibold">{children}</div>
+      {error && typeof error === 'string' && (
+        <Text as="div" html={error} className="mt-[8px] text-[16px] font-bold text-[#FF4D4D]" />
+      )}
+    </div>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/Input.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useState } from 'react'
+
+interface InputProps {
+  className?: string
+  value: string
+  error?: string | boolean
+  placeholder: string
+  required?: boolean
+  disabled?: boolean
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+}
+
+export function Input({ className, error, value, placeholder, disabled, onChange, onBlur }: InputProps) {
+  const [focus, setFocus] = useState(false)
+
+  useEffect(() => {
+    if (value) setFocus(true)
+  }, [value])
+
+  const handleOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const val = event.currentTarget.value
+      if (val) setFocus(!!val)
+      onChange(event)
+    },
+    [onChange],
+  )
+
+  const handleOnBlur = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFocus(!!event.currentTarget.value)
+      onBlur && onBlur()
+    },
+    [onBlur],
+  )
+
+  const handleOnFocus = useCallback(() => {
+    setFocus(true)
+  }, [])
+
+  return (
+    <input
+      className={classNames(
+        'w-full rounded-[2px] border border-[#6D6D6F] p-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0',
+        className,
+        error && 'border-[#FF4D4D]',
+      )}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={handleOnChange}
+      onBlur={handleOnBlur}
+      onFocus={handleOnFocus}
+    ></input>
+  )
+}

package/src/components/credits/creditsRedeemList/AddressForm/StateSelect.tsx

@@ -0,0 +1,126 @@
+import classNames from 'classnames'
+import { Picture } from '@anker-in/headless-ui'
+import { useEffect, useMemo, useState } from 'react'
+import useClickOutside from '../../context/hooks/useClickOutside'
+
+interface StateSelectProps {
+  states: { code: string; id: string; name: string }[]
+  className?: string
+  countryId?: string
+  defaultCode?: string
+  stateName?: string
+  stateCode?: string
+  onChange: (code: string, name: string) => void
+}
+
+export function StateSelect({ states, stateName = '', stateCode = '', className = '', onChange }: StateSelectProps) {
+  const [show, setShow] = useState(false)
+  const [display, setDisplay] = useState<any>('')
+
+  const dropdown = useClickOutside<HTMLDivElement>(() => {
+    setShow(false)
+  })
+
+  const value = useMemo(() => {
+    const currentState = states.find(item => (stateCode ? item.code === stateCode : item.name === stateName))
+
+    return currentState ? [currentState?.id, currentState?.name, currentState?.code].join(',') : ''
+  }, [states, stateCode, stateName])
+
+  useEffect(() => {
+    const target = states.filter(item => [item.id, item.name, item.code].join(',') === value)
+    if (target.length) setDisplay(target[0].name)
+  }, [setDisplay, states, value])
+
+  return (
+    <div className="relative h-full">
+      {states.length ? (
+        <>
+          <select
+            className={classNames('h-[52px] pr-[45px] min-l:hidden', className)}
+            value={value}
+            style={{
+              WebkitTextFillColor: value ? 'black' : '#666',
+            }}
+            onChange={event => {
+              const [, name, code] = event.target.value.split(',')
+              onChange(code, name)
+            }}
+          >
+            {states.map((item: { id: string; name: string; code: string }) => (
+              <option key={item.id} value={[item.id, item.name, item.code].join(',')}>
+                {item.name}
+              </option>
+            ))}
+          </select>
+          <div
+            className={classNames('absolute left-0 top-0 hidden h-[52px] pr-[45px] min-l:!block', className)}
+            onClick={() => {
+              setShow(true)
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {display}
+          </div>
+
+          <Picture
+            source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
+            className="pointer-events-none absolute right-0 top-1/2 h-[45px] !w-[45px] -translate-y-1/2 object-cover"
+            alt="arrow"
+          />
+
+          <div
+            ref={dropdown}
+            className={classNames(
+              'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto rounded-[4px] bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+              { '!hidden': !show }
+            )}
+          >
+            <ul className="py-[6px]">
+              {states.map((item: { id: string; name: string; code: string }) => (
+                <li
+                  key={item.id}
+                  value={[item.id, item.name, item.code].join(',')}
+                  className={classNames(
+                    'relative px-[14px] py-[17px] text-[16px] font-semibold leading-[1] transition hover:bg-[#F7F8F9]',
+                    {
+                      '!bg-[#e8e8e8]': [item.id, item.name, item.code].join(',') === value,
+                    }
+                  )}
+                >
+                  <button
+                    className="absolute left-0 top-0 z-1 size-full opacity-0"
+                    value={[item.id, item.name, item.code].join(',')}
+                    onClick={() => {
+                      setDisplay(item.name)
+                      setShow(false)
+                      onChange(item.code, item.name)
+                    }}
+                  />
+                  {item.name}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </>
+      ) : (
+        <input
+          className={className}
+          value={stateName}
+          style={{
+            WebkitTextFillColor: 'black',
+          }}
+          onChange={event => {
+            onChange('', event.target.value)
+          }}
+        ></input>
+      )}
+    </div>
+  )
+}