npm - @anker-in/campaign-ui - Versions diffs - 0.2.0 → 0.2.2 - Mend

@anker-in/campaign-ui 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (327) hide show

package/dist/esm/components/credits/creditsInfoCard/index.js.map CHANGED Viewed

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

package/dist/esm/components/credits/creditsRedeemList/AddressForm/CountrySelect.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as c}from"react/jsx-runtime";import{Picture as x}from"@anker-in/headless-ui";import b from"../../context/hooks/useClickOutside";import s from"classnames";import{useEffect as v,useState as p}from"react";function w({countries:t,loading:d,className:r,value:n,onChange:i}){const[u,l]=p(!1),[f,a]=p(""),g=b(()=>{l(!1)});return v(()=>{const e=t.filter(m=>m.code===n);e.length&&a(e[0].name)},[a,t,n]),c("div",{className:"relative",children:[o("select",{className:s("!h-[50px] pr-[45px] min-l:hidden",r),style:{WebkitTextFillColor:"black"},disabled:d,value:n,onChange:e=>{i(e.target.value)},children:t.map(e=>o("option",{value:e.code,children:e.name},e.code))}),o("div",{className:s("absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block",r),onClick:()=>{l(!0)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:f}),o(x,{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"}),o("div",{ref:g,className:s("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":!u}),children:o("ul",{className:"py-[6px]",children:t.map(e=>c("li",{value:e.code,className:s("relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]",{"!bg-[#EAEAEC]":e.code===n}),children:[o("button",{className:"absolute left-0 top-0 z-1 size-full opacity-0",value:e.code,onClick:()=>{a(e.name),l(!1),i(e.code)}}),e.name]},e.code))})})]})}export{w as CountrySelect};
+import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Picture as v}from"@anker-in/headless-ui";import y from"../../context/hooks/useClickOutside";import s from"classnames";import{useEffect as h,useState as c}from"react";import{useHeadlessContext as C,ROUNDED_BRANDS as N}from"@anker-in/lib";function A({countries:t,loading:u,className:a,value:n,onChange:i}){const[f,l]=c(!1),[m,r]=c(""),{brand:g}=C(),d=N.includes(g),x=y(()=>{l(!1)});return h(()=>{const e=t.filter(b=>b.code===n);e.length&&r(e[0].name)},[r,t,n]),p("div",{className:"relative",children:[o("select",{className:s("!h-[50px] pr-[45px] min-l:hidden",a),style:{WebkitTextFillColor:"black"},disabled:u,value:n,onChange:e=>{i(e.target.value)},children:t.map(e=>o("option",{value:e.code,children:e.name},e.code))}),o("div",{className:s("absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block",!d&&"rounded-none",a),onClick:()=>{l(!0)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:m}),o(v,{source:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500",className:"absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover",alt:"arrow"}),o("div",{ref:x,className:s("absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]",!d&&"rounded-none",{"!hidden":!f}),children:o("ul",{className:"py-[6px]",children:t.map(e=>p("li",{value:e.code,className:s("relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]",{"!bg-[#EAEAEC]":e.code===n}),children:[o("button",{className:"absolute left-0 top-0 z-1 size-full opacity-0",value:e.code,onClick:()=>{r(e.name),l(!1),i(e.code)}}),e.name]},e.code))})})]})}export{A as CountrySelect};
 //# sourceMappingURL=CountrySelect.js.map

package/dist/esm/components/credits/creditsRedeemList/AddressForm/CountrySelect.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx"],
-  "sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport useClickOutside from '../../context/hooks/useClickOutside'\nimport classNames from 'classnames'\nimport { useEffect, useState } from 'react'\n\ninterface Country {\n  id: string\n  code: string\n  name: string\n}\n\ninterface CountrySelectProps {\n  countries: Country[]\n  loading?: boolean\n  className?: string\n  value?: string\n  onChange: (code: string) => void\n}\n\nexport function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {\n  const [show, setShow] = useState(false)\n  const [display, setDisplay] = useState<any>('')\n\n  const dorpdown = useClickOutside<HTMLDivElement>(() => {\n    setShow(false)\n  })\n\n  useEffect(() => {\n    const target = countries.filter(item => item.code === value)\n    if (target.length) setDisplay(target[0].name)\n  }, [setDisplay, countries, value])\n\n  return (\n    <div className=\"relative\">\n      <select\n        className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}\n        style={{\n          WebkitTextFillColor: 'black',\n        }}\n        disabled={loading}\n        value={value}\n        onChange={event => {\n          onChange(event.target.value)\n        }}\n      >\n        {countries.map((item: { id: string; name: string; code: string }) => (\n          <option key={item.code} value={item.code}>\n            {item.name}\n          </option>\n        ))}\n      </select>\n\n      <div\n        className={classNames(\n          'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',\n          className\n        )}\n        onClick={() => {\n          setShow(true)\n        }}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n          }\n        }}\n      >\n        {display}\n      </div>\n\n      <Picture\n        source=\"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500\"\n        imgClassName=\"pointer-events-none absolute right-0 top-0 bottom-0 !w-[45px] object-cover\"\n        alt=\"arrow\"\n      />\n\n      <div\n        ref={dorpdown}\n        className={classNames(\n          '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)]',\n          { '!hidden': !show }\n        )}\n      >\n        <ul className=\"py-[6px]\">\n          {countries.map((item: { id: string; name: string; code: string }) => (\n            <li\n              key={item.code}\n              value={item.code}\n              className={classNames(\n                'relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]',\n                { '!bg-[#EAEAEC]': item.code === value }\n              )}\n            >\n              <button\n                className=\"absolute left-0 top-0 z-1 size-full opacity-0\"\n                value={item.code}\n                onClick={() => {\n                  setDisplay(item.name)\n                  setShow(false)\n                  onChange(item.code)\n                }}\n              />\n              {item.name}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "AA8CU,cAAAA,EAwCE,QAAAC,MAxCF,oBA9CV,OAAS,WAAAC,MAAe,wBACxB,OAAOC,MAAqB,sCAC5B,OAAOC,MAAgB,aACvB,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QAgB7B,SAASC,EAAc,CAAE,UAAAC,EAAW,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,EAAuB,CACpG,KAAM,CAACC,EAAMC,CAAO,EAAIR,EAAS,EAAK,EAChC,CAACS,EAASC,CAAU,EAAIV,EAAc,EAAE,EAExCW,EAAWd,EAAgC,IAAM,CACrDW,EAAQ,EAAK,CACf,CAAC,EAED,OAAAT,EAAU,IAAM,CACd,MAAMa,EAASV,EAAU,OAAOW,GAAQA,EAAK,OAASR,CAAK,EACvDO,EAAO,QAAQF,EAAWE,EAAO,CAAC,EAAE,IAAI,CAC9C,EAAG,CAACF,EAAYR,EAAWG,CAAK,CAAC,EAG/BV,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,UACC,UAAWI,EAAW,mCAAoCM,CAAS,EACnE,MAAO,CACL,oBAAqB,OACvB,EACA,SAAUD,EACV,MAAOE,EACP,SAAUS,GAAS,CACjBR,EAASQ,EAAM,OAAO,KAAK,CAC7B,EAEC,SAAAZ,EAAU,IAAKW,GACdnB,EAAC,UAAuB,MAAOmB,EAAK,KACjC,SAAAA,EAAK,MADKA,EAAK,IAElB,CACD,EACH,EAEAnB,EAAC,OACC,UAAWI,EACT,4HACAM,CACF,EACA,QAAS,IAAM,CACbI,EAAQ,EAAI,CACd,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EAEC,SAAAC,EACH,EAEAf,EAACE,EAAA,CACC,OAAO,yFACP,aAAa,6EACb,IAAI,QACN,EAEAF,EAAC,OACC,IAAKiB,EACL,UAAWb,EACT,sJACA,CAAE,UAAW,CAACS,CAAK,CACrB,EAEA,SAAAb,EAAC,MAAG,UAAU,WACX,SAAAQ,EAAU,IAAKW,GACdlB,EAAC,MAEC,MAAOkB,EAAK,KACZ,UAAWf,EACT,+FACA,CAAE,gBAAiBe,EAAK,OAASR,CAAM,CACzC,EAEA,UAAAX,EAAC,UACC,UAAU,gDACV,MAAOmB,EAAK,KACZ,QAAS,IAAM,CACbH,EAAWG,EAAK,IAAI,EACpBL,EAAQ,EAAK,EACbF,EAASO,EAAK,IAAI,CACpB,EACF,EACCA,EAAK,OAhBDA,EAAK,IAiBZ,CACD,EACH,EACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Picture", "useClickOutside", "classNames", "useEffect", "useState", "CountrySelect", "countries", "loading", "className", "value", "onChange", "show", "setShow", "display", "setDisplay", "dorpdown", "target", "item", "event"]
+  "sourcesContent": ["import { Picture } from '@anker-in/headless-ui'\nimport useClickOutside from '../../context/hooks/useClickOutside'\nimport classNames from 'classnames'\nimport { useEffect, useState } from 'react'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\n\ninterface Country {\n  id: string\n  code: string\n  name: string\n}\n\ninterface CountrySelectProps {\n  countries: Country[]\n  loading?: boolean\n  className?: string\n  value?: string\n  onChange: (code: string) => void\n}\n\nexport function CountrySelect({ countries, loading, className, value, onChange }: CountrySelectProps) {\n  const [show, setShow] = useState(false)\n  const [display, setDisplay] = useState<any>('')\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  const dorpdown = useClickOutside<HTMLDivElement>(() => {\n    setShow(false)\n  })\n\n  useEffect(() => {\n    const target = countries.filter(item => item.code === value)\n    if (target.length) setDisplay(target[0].name)\n  }, [setDisplay, countries, value])\n\n  return (\n    <div className=\"relative\">\n      <select\n        className={classNames('!h-[50px] pr-[45px] min-l:hidden', className)}\n        style={{\n          WebkitTextFillColor: 'black',\n        }}\n        disabled={loading}\n        value={value}\n        onChange={event => {\n          onChange(event.target.value)\n        }}\n      >\n        {countries.map((item: { id: string; name: string; code: string }) => (\n          <option key={item.code} value={item.code}>\n            {item.name}\n          </option>\n        ))}\n      </select>\n\n      <div\n        className={classNames(\n          'absolute left-0 top-0 hidden !h-[50px] rounded-[2px] pr-[45px] text-[16px] font-bold focus:!border-[#6D6D6F] min-l:!block',\n          !rounded && 'rounded-none',\n          className\n        )}\n        onClick={() => {\n          setShow(true)\n        }}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n          }\n        }}\n      >\n        {display}\n      </div>\n\n      <Picture\n        source=\"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500\"\n        className=\"absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover\"\n        alt=\"arrow\"\n      />\n\n      <div\n        ref={dorpdown}\n        className={classNames(\n          'absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',\n          !rounded && 'rounded-none',\n          { '!hidden': !show }\n        )}\n      >\n        <ul className=\"py-[6px]\">\n          {countries.map((item: { id: string; name: string; code: string }) => (\n            <li\n              key={item.code}\n              value={item.code}\n              className={classNames(\n                'relative px-[14px] py-[17px] text-[16px] font-bold leading-[1] transition hover:bg-[#EAEAEC]',\n                { '!bg-[#EAEAEC]': item.code === value }\n              )}\n            >\n              <button\n                className=\"absolute left-0 top-0 z-1 size-full opacity-0\"\n                value={item.code}\n                onClick={() => {\n                  setDisplay(item.name)\n                  setShow(false)\n                  onChange(item.code)\n                }}\n              />\n              {item.name}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AAgDU,cAAAA,EA0CE,QAAAC,MA1CF,oBAhDV,OAAS,WAAAC,MAAe,wBACxB,OAAOC,MAAqB,sCAC5B,OAAOC,MAAgB,aACvB,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QACpC,OAAS,sBAAAC,EAAoB,kBAAAC,MAAsB,gBAgB5C,SAASC,EAAc,CAAE,UAAAC,EAAW,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,EAAuB,CACpG,KAAM,CAACC,EAAMC,CAAO,EAAIV,EAAS,EAAK,EAChC,CAACW,EAASC,CAAU,EAAIZ,EAAc,EAAE,EACxC,CAAE,MAAAa,CAAM,EAAIZ,EAAmB,EAC/Ba,EAAUZ,EAAe,SAASW,CAAK,EACvCE,EAAWlB,EAAgC,IAAM,CACrDa,EAAQ,EAAK,CACf,CAAC,EAED,OAAAX,EAAU,IAAM,CACd,MAAMiB,EAASZ,EAAU,OAAOa,GAAQA,EAAK,OAASV,CAAK,EACvDS,EAAO,QAAQJ,EAAWI,EAAO,CAAC,EAAE,IAAI,CAC9C,EAAG,CAACJ,EAAYR,EAAWG,CAAK,CAAC,EAG/BZ,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,UACC,UAAWI,EAAW,mCAAoCQ,CAAS,EACnE,MAAO,CACL,oBAAqB,OACvB,EACA,SAAUD,EACV,MAAOE,EACP,SAAUW,GAAS,CACjBV,EAASU,EAAM,OAAO,KAAK,CAC7B,EAEC,SAAAd,EAAU,IAAKa,GACdvB,EAAC,UAAuB,MAAOuB,EAAK,KACjC,SAAAA,EAAK,MADKA,EAAK,IAElB,CACD,EACH,EAEAvB,EAAC,OACC,UAAWI,EACT,4HACA,CAACgB,GAAW,eACZR,CACF,EACA,QAAS,IAAM,CACbI,EAAQ,EAAI,CACd,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EAEC,SAAAC,EACH,EAEAjB,EAACE,EAAA,CACC,OAAO,yFACP,UAAU,+EACV,IAAI,QACN,EAEAF,EAAC,OACC,IAAKqB,EACL,UAAWjB,EACT,yIACA,CAACgB,GAAW,eACZ,CAAE,UAAW,CAACL,CAAK,CACrB,EAEA,SAAAf,EAAC,MAAG,UAAU,WACX,SAAAU,EAAU,IAAKa,GACdtB,EAAC,MAEC,MAAOsB,EAAK,KACZ,UAAWnB,EACT,+FACA,CAAE,gBAAiBmB,EAAK,OAASV,CAAM,CACzC,EAEA,UAAAb,EAAC,UACC,UAAU,gDACV,MAAOuB,EAAK,KACZ,QAAS,IAAM,CACbL,EAAWK,EAAK,IAAI,EACpBP,EAAQ,EAAK,EACbF,EAASS,EAAK,IAAI,CACpB,EACF,EACCA,EAAK,OAhBDA,EAAK,IAiBZ,CACD,EACH,EACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "Picture", "useClickOutside", "classNames", "useEffect", "useState", "useHeadlessContext", "ROUNDED_BRANDS", "CountrySelect", "countries", "loading", "className", "value", "onChange", "show", "setShow", "display", "setDisplay", "brand", "rounded", "dorpdown", "target", "item", "event"]
 }

package/dist/esm/components/credits/creditsRedeemList/AddressForm/StateSelect.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as w,jsx as n,jsxs as f}from"react/jsx-runtime";import a from"classnames";import{Picture as h}from"@anker-in/headless-ui";import{useEffect as b,useMemo as y,useState as u}from"react";import k from"../../context/hooks/useClickOutside";function F({states:t,stateName:i="",stateCode:s="",className:r="",onChange:c}){const[g,d]=u(!1),[v,p]=u(""),x=k(()=>{d(!1)}),l=y(()=>{const e=t.find(o=>s?o.code===s:o.name===i);return e?[e?.id,e?.name,e?.code].join(","):""},[t,s,i]);return b(()=>{const e=t.filter(o=>[o.id,o.name,o.code].join(",")===l);e.length&&p(e[0].name)},[p,t,l]),n("div",{className:"relative h-full",children:t.length?f(w,{children:[n("select",{className:a("h-[52px] pr-[45px] min-l:hidden",r),value:l,style:{WebkitTextFillColor:l?"black":"#666"},onChange:e=>{const[,o,m]=e.target.value.split(",");c(m,o)},children:t.map(e=>n("option",{value:[e.id,e.name,e.code].join(","),children:e.name},e.id))}),n("div",{className:a("absolute left-0 top-0 hidden h-[52px] pr-[45px] min-l:!block",r),onClick:()=>{d(!0)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:v}),n(h,{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"}),n("div",{ref:x,className:a("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":!g}),children:n("ul",{className:"py-[6px]",children:t.map(e=>f("li",{value:[e.id,e.name,e.code].join(","),className:a("relative px-[14px] py-[17px] text-[16px] font-semibold leading-[1] transition hover:bg-[#F7F8F9]",{"!bg-[#e8e8e8]":[e.id,e.name,e.code].join(",")===l}),children:[n("button",{className:"absolute left-0 top-0 z-1 size-full opacity-0",value:[e.id,e.name,e.code].join(","),onClick:()=>{p(e.name),d(!1),c(e.code,e.name)}}),e.name]},e.id))})})]}):n("input",{className:r,value:i,style:{WebkitTextFillColor:"black"},onChange:e=>{c("",e.target.value)}})})}export{F as StateSelect};
+import{Fragment as D,jsx as n,jsxs as f}from"react/jsx-runtime";import a from"classnames";import{Picture as y}from"@anker-in/headless-ui";import{useEffect as k,useMemo as w,useState as u}from"react";import N from"../../context/hooks/useClickOutside";import{useHeadlessContext as S,ROUNDED_BRANDS as C}from"@anker-in/lib";function P({states:t,stateName:s="",stateCode:i="",className:r="",onChange:c}){const[g,d]=u(!1),[v,p]=u(""),{brand:m}=S(),x=C.includes(m),b=N(()=>{d(!1)}),l=w(()=>{const e=t.find(o=>i?o.code===i:o.name===s);return e?[e?.id,e?.name,e?.code].join(","):""},[t,i,s]);return k(()=>{const e=t.filter(o=>[o.id,o.name,o.code].join(",")===l);e.length&&p(e[0].name)},[p,t,l]),n("div",{className:"relative h-full",children:t.length?f(D,{children:[n("select",{className:a("h-[52px] pr-[45px] min-l:hidden",r),value:l,style:{WebkitTextFillColor:l?"black":"#666"},onChange:e=>{const[,o,h]=e.target.value.split(",");c(h,o)},children:t.map(e=>n("option",{value:[e.id,e.name,e.code].join(","),children:e.name},e.id))}),n("div",{className:a("absolute left-0 top-0 hidden h-[52px] pr-[45px] min-l:!block",r),onClick:()=>{d(!0)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:v}),n(y,{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"}),n("div",{ref:b,className:a("absolute left-0 top-[58px] z-30 max-h-[334px] w-full cursor-pointer overflow-auto  bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]",!x&&"rounded-none",{"!hidden":!g}),children:n("ul",{className:"py-[6px]",children:t.map(e=>f("li",{value:[e.id,e.name,e.code].join(","),className:a("relative px-[14px] py-[17px] text-[16px] font-semibold leading-[1] transition hover:bg-[#F7F8F9]",{"!bg-[#e8e8e8]":[e.id,e.name,e.code].join(",")===l}),children:[n("button",{className:"absolute left-0 top-0 z-1 size-full opacity-0",value:[e.id,e.name,e.code].join(","),onClick:()=>{p(e.name),d(!1),c(e.code,e.name)}}),e.name]},e.id))})})]}):n("input",{className:r,value:s,style:{WebkitTextFillColor:"black"},onChange:e=>{c("",e.target.value)}})})}export{P as StateSelect};
 //# sourceMappingURL=StateSelect.js.map

package/dist/esm/components/credits/creditsRedeemList/AddressForm/StateSelect.js.map CHANGED Viewed

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

package/dist/esm/components/credits/creditsRedeemList/AddressForm/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as B}from"react/jsx-runtime";import x from"classnames";import{useCallback as F,useEffect as _,useMemo as N,useState as S}from"react";import{CountrySelect as w}from"./CountrySelect";import{FormItem as I}from"./FormItem";import{Input as q}from"./Input";import{StateSelect as P}from"./StateSelect";import{ALPC_COUNTRY_MAP as K}from"../../context/const";import{useCreditsContext as U}from"../../context/provider";import{useHeadlessContext as z}from"@anker-in/lib";const J=({countries:c,countriesLoading:g,form:n,validate:C,errors:h,onChange:l})=>{const{profile:u,customer:r}=U(),{locale:m}=z(),[e,i]=S(),p=N(()=>c.find(o=>o.code===e?.country)?.provinces||[],[e,c]),b=N(()=>n?.flat().find(o=>o.type==="state")?.key,[n]),A=F(()=>{if(r?.defaultAddress)return{name:(r?.defaultAddress.firstName||"")+" "+(r?.defaultAddress.lastName||""),first_name:r?.defaultAddress.firstName,last_name:r?.defaultAddress.lastName,address1:r?.defaultAddress.address1,address2:r?.defaultAddress.address2,city:r?.defaultAddress.city,phone:r?.defaultAddress.phone,country:r?.defaultAddress.countryCodeV2,province:r?.defaultAddress.province,province_code:r?.defaultAddress.provinceCode,email:r?.email||u?.email,zip:r?.defaultAddress.zip};{let s=K.get(m)||m;return s==="UK"&&(s="GB"),s==="EU"&&(s="NL"),{email:u?.email,country:s}}},[r,u?.email,m]);return _(()=>{if(r){const s=A();i(s),l(s)}},[r,A]),e?a("div",{className:"grid gap-[20px]",children:n&&n.map((s,o)=>a("div",{className:"item-center -mx-[6px] flex",children:s.map((t,k)=>{const f=h.find(d=>d.key===t.key)?.message,y=x("h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",f?"!border-[#F84D4F]":"border-[#d8d8d8]");return t.type==="state"&&!p.length?null:a("div",{className:x("mx-[6px] flex-1"),children:B(I,{error:f,required:t.required,label:t.label,children:[t.type==="country"&&a(w,{className:y,countries:c,loading:g,value:e.country,onChange:d=>{e.country!==d&&(e.province="",e.province_code=""),e.country=d,i({...e}),l(e)}}),t.type==="state"&&a(P,{className:y,states:p,stateCode:e.province_code,stateName:e.province,onChange:(d,v)=>{e.province_code=d,e.province=v,i({...e}),l(e)}}),t.type!=="state"&&t.type!=="country"&&a(q,{placeholder:t.label,className:y,error:f,value:e[t.key],required:t.required,disabled:t.type==="email",onChange:d=>{const v=d.target.value;e[t.key]=v,i({...e}),l(e)},onBlur:()=>{C({ignoreKeys:p.length&&b?[b]:[]})}})]})},k)})},o))}):null};export{J as AddressForm};
+import{jsx as a,jsxs as z}from"react/jsx-runtime";import N from"classnames";import{useCallback as S,useEffect as w,useMemo as x,useState as I}from"react";import{CountrySelect as D}from"./CountrySelect";import{FormItem as q}from"./FormItem";import{Input as P}from"./Input";import{StateSelect as R}from"./StateSelect";import{ALPC_COUNTRY_MAP as U}from"../../context/const";import{useCreditsContext as B}from"../../context/provider";import{useHeadlessContext as E,ROUNDED_BRANDS as K}from"@anker-in/lib";const X=({countries:c,countriesLoading:g,form:n,validate:C,errors:h,onChange:l})=>{const{profile:u,customer:r}=B(),{locale:m,brand:k}=E(),F=K.includes(k),[e,i]=I(),p=x(()=>c.find(o=>o.code===e?.country)?.provinces||[],[e,c]),v=x(()=>n?.flat().find(o=>o.type==="state")?.key,[n]),A=S(()=>{if(r?.defaultAddress)return{name:(r?.defaultAddress.firstName||"")+" "+(r?.defaultAddress.lastName||""),first_name:r?.defaultAddress.firstName,last_name:r?.defaultAddress.lastName,address1:r?.defaultAddress.address1,address2:r?.defaultAddress.address2,city:r?.defaultAddress.city,phone:r?.defaultAddress.phone,country:r?.defaultAddress.countryCodeV2,province:r?.defaultAddress.province,province_code:r?.defaultAddress.provinceCode,email:r?.email||u?.email,zip:r?.defaultAddress.zip};{let s=U.get(m)||m;return s==="UK"&&(s="GB"),s==="EU"&&(s="NL"),{email:u?.email,country:s}}},[r,u?.email,m]);return w(()=>{if(r){const s=A();i(s),l(s)}},[r,A]),e?a("div",{className:"grid gap-[20px]",children:n&&n.map((s,o)=>a("div",{className:"item-center -mx-[6px] flex",children:s.map((t,_)=>{const f=h.find(d=>d.key===t.key)?.message,y=N("h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand-0 disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",f?"!border-[#F84D4F]":"border-[#d8d8d8]",!F&&"rounded-none");return t.type==="state"&&!p.length?null:a("div",{className:N("mx-[6px] flex-1"),children:z(q,{error:f,required:t.required,label:t.label,children:[t.type==="country"&&a(D,{className:y,countries:c,loading:g,value:e.country,onChange:d=>{e.country!==d&&(e.province="",e.province_code=""),e.country=d,i({...e}),l(e)}}),t.type==="state"&&a(R,{className:y,states:p,stateCode:e.province_code,stateName:e.province,onChange:(d,b)=>{e.province_code=d,e.province=b,i({...e}),l(e)}}),t.type!=="state"&&t.type!=="country"&&a(P,{placeholder:t.label,className:y,error:f,value:e[t.key],required:t.required,disabled:t.type==="email",onChange:d=>{const b=d.target.value;e[t.key]=b,i({...e}),l(e)},onBlur:()=>{C({ignoreKeys:p.length&&v?[v]:[]})}})]})},_)})},o))}):null};export{X as AddressForm};
 //# sourceMappingURL=index.js.map

package/dist/esm/components/credits/creditsRedeemList/AddressForm/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/credits/creditsRedeemList/AddressForm/index.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CountrySelect } from './CountrySelect'\nimport { FormItem } from './FormItem'\nimport { Input } from './Input'\nimport { StateSelect } from './StateSelect'\nimport { ALPC_COUNTRY_MAP } from '../../context/const'\nimport { useCreditsContext } from '../../context/provider'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { AddressFormProps } from './type'\n\nexport const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {\n  const { profile, customer } = useCreditsContext()\n  const { locale } = useHeadlessContext()\n\n  const [address, setAddress] = useState<Record<string, any>>()\n\n  const states = useMemo(() => {\n    const currentCountry = countries.find(item => item.code === address?.country)\n\n    return currentCountry?.provinces || []\n  }, [address, countries])\n\n  const stateInputKey = useMemo(() => {\n    const stateInput = form?.flat().find(item => item.type === 'state')\n    return stateInput?.key\n  }, [form])\n\n  const getDefaultAddress = useCallback(() => {\n    if (customer?.defaultAddress) {\n      return {\n        name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),\n        first_name: customer?.defaultAddress.firstName,\n        last_name: customer?.defaultAddress.lastName,\n        address1: customer?.defaultAddress.address1,\n        address2: customer?.defaultAddress.address2,\n        city: customer?.defaultAddress.city,\n        phone: customer?.defaultAddress.phone,\n        country: customer?.defaultAddress.countryCodeV2,\n        province: customer?.defaultAddress.province,\n        province_code: customer?.defaultAddress.provinceCode,\n        email: customer?.email || profile?.email,\n        zip: customer?.defaultAddress.zip,\n      }\n    } else {\n      let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale\n      if (defaultCountry === 'UK') {\n        defaultCountry = 'GB'\n      }\n      if (defaultCountry === 'EU') {\n        defaultCountry = 'NL'\n      }\n      return {\n        email: profile?.email,\n        country: defaultCountry,\n      }\n    }\n  }, [customer, profile?.email, locale])\n\n  useEffect(() => {\n    if (customer) {\n      const defaultAddress = getDefaultAddress()\n      setAddress(defaultAddress)\n      onChange(defaultAddress)\n    }\n  }, [customer, getDefaultAddress])\n\n  if (!address) {\n    return null\n  }\n\n  return (\n    <div className=\"grid gap-[20px]\">\n      {form &&\n        form.map((row, rowIndex: number) => (\n          <div key={rowIndex} className=\"item-center -mx-[6px] flex\">\n            {row.map((input, inputIndex: number) => {\n              const error = errors.find(item => item.key === input.key)?.message\n              const inputClassName = classNames(\n                'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]'\n              )\n\n              if (input.type === 'state') {\n                if (!states.length) {\n                  return null\n                }\n              }\n\n              return (\n                <div key={inputIndex} className={classNames('mx-[6px] flex-1')}>\n                  <FormItem error={error} required={input.required} label={input.label}>\n                    {input.type === 'country' && (\n                      <CountrySelect\n                        className={inputClassName}\n                        countries={countries}\n                        loading={countriesLoading}\n                        value={address.country}\n                        onChange={selectedCountryCode => {\n                          if (address.country !== selectedCountryCode) {\n                            address.province = ''\n                            address.province_code = ''\n                          }\n                          address.country = selectedCountryCode\n                          setAddress({ ...address })\n                          onChange(address)\n                        }}\n                      ></CountrySelect>\n                    )}\n                    {input.type === 'state' && (\n                      <StateSelect\n                        className={inputClassName}\n                        states={states}\n                        stateCode={address.province_code}\n                        stateName={address.province}\n                        onChange={(provinceCode, provinceName) => {\n                          address.province_code = provinceCode\n                          address.province = provinceName\n                          setAddress({ ...address })\n                          onChange(address)\n                        }}\n                      ></StateSelect>\n                    )}\n\n                    {input.type !== 'state' && input.type !== 'country' && (\n                      <Input\n                        placeholder={input.label}\n                        className={inputClassName}\n                        error={error}\n                        value={address[input.key]}\n                        required={input.required}\n                        disabled={input.type === 'email'}\n                        onChange={event => {\n                          const value = event.target.value\n                          address[input.key] = value\n                          setAddress({ ...address })\n                          onChange(address)\n                        }}\n                        onBlur={() => {\n                          validate({\n                            ignoreKeys: states.length && stateInputKey ? [stateInputKey] : [],\n                          })\n                        }}\n                      />\n                    )}\n                  </FormItem>\n                </div>\n              )\n            })}\n          </div>\n        ))}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "classNames", "useCallback", "useEffect", "useMemo", "useState", "CountrySelect", "FormItem", "Input", "StateSelect", "ALPC_COUNTRY_MAP", "useCreditsContext", "useHeadlessContext", "AddressForm", "countries", "countriesLoading", "form", "validate", "errors", "onChange", "profile", "customer", "locale", "address", "setAddress", "states", "item", "stateInputKey", "getDefaultAddress", "defaultCountry", "defaultAddress", "row", "rowIndex", "input", "inputIndex", "error", "inputClassName", "selectedCountryCode", "provinceCode", "provinceName", "event", "value"]
+  "sourcesContent": ["import classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CountrySelect } from './CountrySelect'\nimport { FormItem } from './FormItem'\nimport { Input } from './Input'\nimport { StateSelect } from './StateSelect'\nimport { ALPC_COUNTRY_MAP } from '../../context/const'\nimport { useCreditsContext } from '../../context/provider'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport { AddressFormProps } from './type'\n\nexport const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {\n  const { profile, customer } = useCreditsContext()\n  const { locale, brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  const [address, setAddress] = useState<Record<string, any>>()\n\n  const states = useMemo(() => {\n    const currentCountry = countries.find(item => item.code === address?.country)\n\n    return currentCountry?.provinces || []\n  }, [address, countries])\n\n  const stateInputKey = useMemo(() => {\n    const stateInput = form?.flat().find(item => item.type === 'state')\n    return stateInput?.key\n  }, [form])\n\n  const getDefaultAddress = useCallback(() => {\n    if (customer?.defaultAddress) {\n      return {\n        name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),\n        first_name: customer?.defaultAddress.firstName,\n        last_name: customer?.defaultAddress.lastName,\n        address1: customer?.defaultAddress.address1,\n        address2: customer?.defaultAddress.address2,\n        city: customer?.defaultAddress.city,\n        phone: customer?.defaultAddress.phone,\n        country: customer?.defaultAddress.countryCodeV2,\n        province: customer?.defaultAddress.province,\n        province_code: customer?.defaultAddress.provinceCode,\n        email: customer?.email || profile?.email,\n        zip: customer?.defaultAddress.zip,\n      }\n    } else {\n      let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale\n      if (defaultCountry === 'UK') {\n        defaultCountry = 'GB'\n      }\n      if (defaultCountry === 'EU') {\n        defaultCountry = 'NL'\n      }\n      return {\n        email: profile?.email,\n        country: defaultCountry,\n      }\n    }\n  }, [customer, profile?.email, locale])\n\n  useEffect(() => {\n    if (customer) {\n      const defaultAddress = getDefaultAddress()\n      setAddress(defaultAddress)\n      onChange(defaultAddress)\n    }\n  }, [customer, getDefaultAddress])\n\n  if (!address) {\n    return null\n  }\n\n  return (\n    <div className=\"grid gap-[20px]\">\n      {form &&\n        form.map((row, rowIndex: number) => (\n          <div key={rowIndex} className=\"item-center -mx-[6px] flex\">\n            {row.map((input, inputIndex: number) => {\n              const error = errors.find(item => item.key === input.key)?.message\n              const inputClassName = classNames(\n                'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand-0 disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]',\n                !rounded && 'rounded-none'\n              )\n\n              if (input.type === 'state') {\n                if (!states.length) {\n                  return null\n                }\n              }\n\n              return (\n                <div key={inputIndex} className={classNames('mx-[6px] flex-1')}>\n                  <FormItem error={error} required={input.required} label={input.label}>\n                    {input.type === 'country' && (\n                      <CountrySelect\n                        className={inputClassName}\n                        countries={countries}\n                        loading={countriesLoading}\n                        value={address.country}\n                        onChange={selectedCountryCode => {\n                          if (address.country !== selectedCountryCode) {\n                            address.province = ''\n                            address.province_code = ''\n                          }\n                          address.country = selectedCountryCode\n                          setAddress({ ...address })\n                          onChange(address)\n                        }}\n                      ></CountrySelect>\n                    )}\n                    {input.type === 'state' && (\n                      <StateSelect\n                        className={inputClassName}\n                        states={states}\n                        stateCode={address.province_code}\n                        stateName={address.province}\n                        onChange={(provinceCode, provinceName) => {\n                          address.province_code = provinceCode\n                          address.province = provinceName\n                          setAddress({ ...address })\n                          onChange(address)\n                        }}\n                      ></StateSelect>\n                    )}\n\n                    {input.type !== 'state' && input.type !== 'country' && (\n                      <Input\n                        placeholder={input.label}\n                        className={inputClassName}\n                        error={error}\n                        value={address[input.key]}\n                        required={input.required}\n                        disabled={input.type === 'email'}\n                        onChange={event => {\n                          const value = event.target.value\n                          address[input.key] = value\n                          setAddress({ ...address })\n                          onChange(address)\n                        }}\n                        onBlur={() => {\n                          validate({\n                            ignoreKeys: states.length && stateInputKey ? [stateInputKey] : [],\n                          })\n                        }}\n                      />\n                    )}\n                  </FormItem>\n                </div>\n              )\n            })}\n          </div>\n        ))}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "classNames", "useCallback", "useEffect", "useMemo", "useState", "CountrySelect", "FormItem", "Input", "StateSelect", "ALPC_COUNTRY_MAP", "useCreditsContext", "useHeadlessContext", "ROUNDED_BRANDS", "AddressForm", "countries", "countriesLoading", "form", "validate", "errors", "onChange", "profile", "customer", "locale", "brand", "rounded", "address", "setAddress", "states", "item", "stateInputKey", "getDefaultAddress", "defaultCountry", "defaultAddress", "row", "rowIndex", "input", "inputIndex", "error", "inputClassName", "selectedCountryCode", "provinceCode", "provinceName", "event", "value"]
 }

package/dist/esm/components/credits/creditsRedeemList/CreditsRedeemList.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { CreditsRedeemListCopy } from './type';
+export declare const CreditsRedeemList: ({ copy }: {
+    copy: CreditsRedeemListCopy;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/credits/creditsRedeemList/CreditsRedeemList.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as o,jsxs as Z}from"react/jsx-runtime";import{Container as S,Heading as D,Tabs as F,TabsList as H,TabsTrigger as z}from"@anker-in/headless-ui";import u from"classnames";import{useCallback as B,useMemo as L,useState as c}from"react";import U from"./RedeemCouponModal";import j from"./RedeemProductModal";import{useCreditsContext as q}from"../context/provider";import w from"../context/hooks/useRedeemableList";import{AlpcConsumeType as g,AlpcErrorCode as G}from"../context/const";import{useHeadlessContext as V,useProductsByHandles as J,gaTrack as K,ROUNDED_BRANDS as Q}from"@anker-in/lib";import{RedeemableItem as W}from"./RedeemableItem";import X from"../modal/rulesModal";import{useRegistration as Y}from"../../../components/registration";const ce=({copy:s})=>{const{profile:f,openSignUpPopup:x,gtm:{pageGroup:k},pageCommon:N}=q(),{authCodeActivate:b}=Y(),{brand:_}=V(),I=Q.includes(_),E=Object.keys(f\|\|{}).length>0,[d,A]=c(s.list[0].label),[n,l]=c(void 0),[m,C]=c(),{listLoading:M,redeemableList:R,getRedeemableList:v}=w(),r=L(()=>R.map(e=>({id:e.id.toString(),title:e.name,consumeCredits:e.consume_credits,remainingInventory:e.remaining_inventory,isLimited:!!e.is_limited,consumeType:e.consume_type,handle:e.sku_handle,sku:e.goods_sku,image:e.goods_url})),[s.list,d,R]),O=r.map(e=>e.handle),{data:y}=J({handles:O}),P=L(()=>s.list.find(t=>t.label===d)?.list.filter(t=>r.some(i=>i.id===t.id)).map(t=>{const i=r.find(a=>a.id===t.id),p=y?.find(a=>a.handle===i?.handle),h=p?.variants.find(a=>a.sku===i?.sku);return i?.consumeType===g.Product&&(!p\|\|!h)?null:{alpc:r.find(a=>a.id===t.id),config:t,product:p,variant:h}}).filter(t=>t!==null),[r,y]),T=B(e=>{e===G.CodeLpcRuleInventoryNotEnough&&v()},[v]);return Z(S,{className:u("relative bg-[#F5F5F7]"),children:[o(D,{as:"h2",size:"4",html:s.title}),o(F,{shape:I?"rounded":"square",align:"left",className:u("sticky top-0 z-20 py-[24px] md:justify-center"),value:d.toString(),onValueChange:e=>{A(e),K({event:"ga4Event",event_name:"lp_navigation",event_parameters:{navigation:e,page_group:k}})},children:o(H,{children:s.list.map(e=>o(z,{value:e.label,children:e.label},e.label))})}),!!r?.length&&!M&&o("div",{className:u("relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3"),children:P?.map(e=>o(W,{copy:s,item:e,onRedeem:t=>{E?!f?.activated&&!b.isActivateSuccess?b.open():l(t):x()},onRulesOpen:C},e?.alpc?.id))}),n?.alpc?.consumeType===g.Coupon&&s?.redeemModal?.coupon&&n&&o(U,{isOpen:!!n,item:n,copy:s,onError:T,onClose:()=>{l(void 0)}}),n?.alpc?.consumeType===g.Product&&s?.redeemModal&&n&&o(j,{isOpen:!!n,item:n,copy:s,onError:T,onClose:()=>{l(void 0)}}),m&&o(X,{overlayClassName:"md:px-[16px] md:items-center",className:"md:h-fit md:rounded-b-[16px]",isOpen:m.length>0,onClose:()=>C([]),titleClassName:"border-b-transparent h-[56px]",rules:m,scrollClassName:"md:mt-[8px] md:mb-[24px] md:pt-0",title:N?.ruleLabel,ruleClassName:"text-[#1d1d1f] font-bold"})]})};export{ce as CreditsRedeemList};
2	+ //# sourceMappingURL=CreditsRedeemList.js.map

package/dist/esm/components/credits/creditsRedeemList/CreditsRedeemList.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/credits/creditsRedeemList/CreditsRedeemList.tsx"],
+  "sourcesContent": ["import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useMemo, useState } from 'react'\n\nimport RedeemCouponModal from './RedeemCouponModal'\nimport RedeemProductModal from './RedeemProductModal'\nimport { useCreditsContext } from '../context/provider'\nimport useRedeemableList from '../context/hooks/useRedeemableList'\nimport { AlpcConsumeType, AlpcErrorCode } from '../context/const'\nimport { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { RedeemableItem } from './RedeemableItem'\nimport RulesModal from '../modal/rulesModal'\nimport { CreditsRedeemListCopy } from './type'\nimport { useRegistration } from '../../../components/registration'\n\nexport const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {\n  const {\n    profile,\n    openSignUpPopup,\n    gtm: { pageGroup },\n    pageCommon,\n  } = useCreditsContext()\n  const { authCodeActivate } = useRegistration()\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  const isLogin = Object.keys(profile || {}).length > 0\n\n  const [activeTab, setActiveTab] = useState<string>(copy.list[0].label)\n\n  const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)\n\n  const [rules, setRules] = useState<string | string[]>()\n\n  const { listLoading, redeemableList, getRedeemableList } = useRedeemableList()\n\n  const alpcList = useMemo(() => {\n    return redeemableList.map(item => {\n      return {\n        id: item.id.toString(),\n        title: item.name,\n        consumeCredits: item.consume_credits,\n        remainingInventory: item.remaining_inventory,\n        isLimited: !!item.is_limited,\n        consumeType: item.consume_type,\n        handle: item.sku_handle,\n        sku: item.goods_sku,\n        image: item.goods_url,\n      }\n    })\n  }, [copy.list, activeTab, redeemableList])\n\n  const handles = alpcList.map(item => item.handle)\n  const { data: products } = useProductsByHandles({ handles })\n\n  const list = useMemo(() => {\n    const currentList = copy.list.find(item => item.label === activeTab)\n    return currentList?.list\n      .filter(item => alpcList.some(alpcItem => alpcItem.id === item.id))\n      .map(item => {\n        const alpcItem = alpcList.find(alpcItem => alpcItem.id === item.id)\n        const product = products?.find(product => product.handle === alpcItem?.handle)\n        const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)\n        if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null\n        return {\n          alpc: alpcList.find(alpcItem => alpcItem.id === item.id),\n          config: item,\n          product,\n          variant,\n        }\n      })\n      .filter(item => item !== null) as unknown as RedeemableItemType[]\n  }, [alpcList, products])\n\n  const handleRedeemError = useCallback(\n    (errorCode: AlpcErrorCode) => {\n      if (errorCode === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n        getRedeemableList()\n      }\n    },\n    [getRedeemableList]\n  )\n\n  return (\n    <Container className={classNames('relative bg-[#F5F5F7]')}>\n      <Heading as=\"h2\" size=\"4\" html={copy.title} />\n\n      <Tabs\n        shape={rounded ? 'rounded' : 'square'}\n        align=\"left\"\n        className={classNames('sticky top-0 z-20 py-[24px] md:justify-center')}\n        value={activeTab.toString()}\n        onValueChange={value => {\n          setActiveTab(value)\n          gaTrack({\n            event: 'ga4Event',\n            event_name: 'lp_navigation',\n            event_parameters: {\n              navigation: value,\n              page_group: pageGroup,\n            },\n          })\n        }}\n      >\n        <TabsList>\n          {copy.list.map(item => (\n            <TabsTrigger key={item.label} value={item.label}>\n              {item.label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </Tabs>\n      {/* PC\u7AEF */}\n      {!!alpcList?.length && !listLoading && (\n        <div\n          className={classNames('relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3')}\n        >\n          {list?.map(item => (\n            <RedeemableItem\n              key={item?.alpc?.id}\n              copy={copy}\n              item={item}\n              onRedeem={(item: RedeemableItemType) => {\n                if (!isLogin) {\n                  openSignUpPopup()\n                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n                  authCodeActivate.open()\n                } else {\n                  setPopRedeemData(item)\n                }\n              }}\n              onRulesOpen={setRules}\n            />\n          ))}\n        </div>\n      )}\n\n      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Coupon && copy?.redeemModal?.coupon && popRedeemData && (\n        <RedeemCouponModal\n          isOpen={!!popRedeemData}\n          item={popRedeemData}\n          copy={copy}\n          onError={handleRedeemError}\n          onClose={() => {\n            setPopRedeemData(undefined)\n          }}\n        />\n      )}\n      {popRedeemData?.alpc?.consumeType === AlpcConsumeType.Product && copy?.redeemModal && popRedeemData && (\n        <RedeemProductModal\n          isOpen={!!popRedeemData}\n          item={popRedeemData}\n          copy={copy}\n          onError={handleRedeemError}\n          onClose={() => {\n            setPopRedeemData(undefined)\n          }}\n        />\n      )}\n      {rules && (\n        <RulesModal\n          overlayClassName=\"md:px-[16px] md:items-center\"\n          className=\"md:h-fit md:rounded-b-[16px]\"\n          isOpen={rules.length > 0}\n          onClose={() => setRules([])}\n          titleClassName=\"border-b-transparent h-[56px]\"\n          rules={rules}\n          scrollClassName=\"md:mt-[8px] md:mb-[24px] md:pt-0\"\n          title={pageCommon?.ruleLabel}\n          ruleClassName=\"text-[#1d1d1f] font-bold\"\n        />\n      )}\n    </Container>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "Container", "Heading", "Tabs", "TabsList", "TabsTrigger", "classNames", "useCallback", "useMemo", "useState", "RedeemCouponModal", "RedeemProductModal", "useCreditsContext", "useRedeemableList", "AlpcConsumeType", "AlpcErrorCode", "useHeadlessContext", "useProductsByHandles", "gaTrack", "ROUNDED_BRANDS", "RedeemableItem", "RulesModal", "useRegistration", "CreditsRedeemList", "copy", "profile", "openSignUpPopup", "pageGroup", "pageCommon", "authCodeActivate", "brand", "rounded", "isLogin", "activeTab", "setActiveTab", "popRedeemData", "setPopRedeemData", "rules", "setRules", "listLoading", "redeemableList", "getRedeemableList", "alpcList", "item", "handles", "products", "list", "alpcItem", "product", "variant", "handleRedeemError", "errorCode", "value"]
+}

package/dist/esm/components/credits/creditsRedeemList/NonProductValue.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
 import { RedeemableItem } from '../type';
-import { CreditsRedeemListCopy } from './type';
-export declare const NoneProductValue: ({ item, copy }: {
+export declare const NoneProductValue: ({ item }: {
     item: RedeemableItem;
-    copy: CreditsRedeemListCopy;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/credits/creditsRedeemList/NonProductValue.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as p}from"react/jsx-runtime";import{Text as l}from"@anker-in/headless-ui";import{ConsumeType as o}from"../context/const";const s=({item:t,copy:x})=>t.config?.type===o.ShippingCoupon?e("div",{className:"absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]",children:e(l,{className:"text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]",html:t.config?.value,as:"p"})}):e("div",{className:"absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]",children:t.config?.value?p("div",{className:"flex items-end",children:[e(l,{className:"text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]",html:t.config?.value.toString()}),e(l,{className:"ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]",html:t.config?.type===o.GiftCard?x?.giftCardLabel:x?.off})]}):e(l,{className:"text-[24px] w-[70%] font-bold leading-none",html:t.config?.title,as:"p"})});export{s as NoneProductValue};
+import{jsx as e,jsxs as m}from"react/jsx-runtime";import{Text as l}from"@anker-in/headless-ui";import{ConsumeType as o}from"../context/const";import{useCreditsContext as p}from"../context/provider";const s=({item:t})=>{const{pageCommon:x}=p();return t.config?.type===o.ShippingCoupon?e("div",{className:"absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]",children:e(l,{className:"text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]",html:t.config?.value,as:"p"})}):e("div",{className:"absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]",children:t.config?.value?m("div",{className:"flex items-end",children:[e(l,{className:"text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]",html:t.config?.value.toString()}),e(l,{className:"ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]",html:t.config?.type===o.GiftCard?x?.giftCardLabel:x?.off})]}):e(l,{className:"text-[24px] w-[70%] font-bold leading-none",html:t.config?.title,as:"p"})})};export{s as NoneProductValue};
 //# sourceMappingURL=NonProductValue.js.map

package/dist/esm/components/credits/creditsRedeemList/NonProductValue.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsRedeemList/NonProductValue.tsx"],
-  "sourcesContent": ["import { Text } from '@anker-in/headless-ui'\nimport { RedeemableItem } from '../type'\nimport { ConsumeType } from '../context/const'\nimport { CreditsRedeemListCopy } from './type'\n\nexport const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {\n  // shipping coupon \u4EC5\u5C55\u793A\u6587\u6848\n  if (item.config?.type === ConsumeType.ShippingCoupon) {\n    return (\n      <div className=\"absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]\">\n        <Text\n          className=\"text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]\"\n          html={item.config?.value}\n          as=\"p\"\n        />\n      </div>\n    )\n  } else {\n    return (\n      <div className=\"absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]\">\n        {item.config?.value ? (\n          <div className=\"flex items-end\">\n            <Text\n              className=\"text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]\"\n              html={item.config?.value.toString()}\n            />\n            <Text\n              className=\"ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]\"\n              html={item.config?.type === ConsumeType.GiftCard ? copy?.giftCardLabel : copy?.off}\n            />\n          </div>\n        ) : (\n          <Text className=\"text-[24px] w-[70%] font-bold leading-none\" html={item.config?.title} as=\"p\" />\n        )}\n      </div>\n    )\n  }\n}\n"],
-  "mappings": "AAUQ,cAAAA,EAWE,QAAAC,MAXF,oBAVR,OAAS,QAAAC,MAAY,wBAErB,OAAS,eAAAC,MAAmB,mBAGrB,MAAMC,EAAmB,CAAC,CAAE,KAAAC,EAAM,KAAAC,CAAK,IAExCD,EAAK,QAAQ,OAASF,EAAY,eAElCH,EAAC,OAAI,UAAU,2HACb,SAAAA,EAACE,EAAA,CACC,UAAU,yGACV,KAAMG,EAAK,QAAQ,MACnB,GAAG,IACL,EACF,EAIAL,EAAC,OAAI,UAAU,2HACZ,SAAAK,EAAK,QAAQ,MACZJ,EAAC,OAAI,UAAU,iBACb,UAAAD,EAACE,EAAA,CACC,UAAU,4FACV,KAAMG,EAAK,QAAQ,MAAM,SAAS,EACpC,EACAL,EAACE,EAAA,CACC,UAAU,2GACV,KAAMG,EAAK,QAAQ,OAASF,EAAY,SAAWG,GAAM,cAAgBA,GAAM,IACjF,GACF,EAEAN,EAACE,EAAA,CAAK,UAAU,6CAA6C,KAAMG,EAAK,QAAQ,MAAO,GAAG,IAAI,EAElG",
-  "names": ["jsx", "jsxs", "Text", "ConsumeType", "NoneProductValue", "item", "copy"]
+  "sourcesContent": ["import { Text } from '@anker-in/headless-ui'\nimport { RedeemableItem } from '../type'\nimport { ConsumeType } from '../context/const'\nimport { useCreditsContext } from '../context/provider'\n\nexport const NoneProductValue = ({ item }: { item: RedeemableItem }) => {\n  const { pageCommon } = useCreditsContext()\n  // shipping coupon \u4EC5\u5C55\u793A\u6587\u6848\n  if (item.config?.type === ConsumeType.ShippingCoupon) {\n    return (\n      <div className=\"absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]\">\n        <Text\n          className=\"text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]\"\n          html={item.config?.value}\n          as=\"p\"\n        />\n      </div>\n    )\n  } else {\n    return (\n      <div className=\"absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]\">\n        {item.config?.value ? (\n          <div className=\"flex items-end\">\n            <Text\n              className=\"text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]\"\n              html={item.config?.value.toString()}\n            />\n            <Text\n              className=\"ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]\"\n              html={item.config?.type === ConsumeType.GiftCard ? pageCommon?.giftCardLabel : pageCommon?.off}\n            />\n          </div>\n        ) : (\n          <Text className=\"text-[24px] w-[70%] font-bold leading-none\" html={item.config?.title} as=\"p\" />\n        )}\n      </div>\n    )\n  }\n}\n"],
+  "mappings": "AAWQ,cAAAA,EAWE,QAAAC,MAXF,oBAXR,OAAS,QAAAC,MAAY,wBAErB,OAAS,eAAAC,MAAmB,mBAC5B,OAAS,qBAAAC,MAAyB,sBAE3B,MAAMC,EAAmB,CAAC,CAAE,KAAAC,CAAK,IAAgC,CACtE,KAAM,CAAE,WAAAC,CAAW,EAAIH,EAAkB,EAEzC,OAAIE,EAAK,QAAQ,OAASH,EAAY,eAElCH,EAAC,OAAI,UAAU,2HACb,SAAAA,EAACE,EAAA,CACC,UAAU,yGACV,KAAMI,EAAK,QAAQ,MACnB,GAAG,IACL,EACF,EAIAN,EAAC,OAAI,UAAU,2HACZ,SAAAM,EAAK,QAAQ,MACZL,EAAC,OAAI,UAAU,iBACb,UAAAD,EAACE,EAAA,CACC,UAAU,4FACV,KAAMI,EAAK,QAAQ,MAAM,SAAS,EACpC,EACAN,EAACE,EAAA,CACC,UAAU,2GACV,KAAMI,EAAK,QAAQ,OAASH,EAAY,SAAWI,GAAY,cAAgBA,GAAY,IAC7F,GACF,EAEAP,EAACE,EAAA,CAAK,UAAU,6CAA6C,KAAMI,EAAK,QAAQ,MAAO,GAAG,IAAI,EAElG,CAGN",
+  "names": ["jsx", "jsxs", "Text", "ConsumeType", "useCreditsContext", "NoneProductValue", "item", "pageCommon"]
 }

package/dist/esm/components/credits/creditsRedeemList/RedeemCouponModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as E,jsx as o,jsxs as l}from"react/jsx-runtime";import{Button as M,Picture as y,Text as i}from"@anker-in/headless-ui";import p from"classnames";import{useCallback as k,useEffect as I,useState as u}from"react";import L from"../context/hooks/useCopy";import{useCreditsContext as _}from"../context/provider";import{useRedeemCoupon as B}from"../context/hooks/useRedeemCoupon";import{AlpcErrorCode as c}from"../context/const";import{CreditsModalContainer as S}from"../modal/modalContainer";import{numberFormat as P}from"../context/utils";import{useHeadlessContext as z}from"@anker-in/lib";import{NoneProductValue as O}from"./RedeemProductModal/NonProductValue";function U({item:d,copy:e,onError:f,...m}){const{locale:w}=z(),[a,F]=u(),[g,s]=u(),[C,n]=u(!1),{copy:R,copied:b}=L(),{profile:x,fetchCreditInfo:v}=_(),{isMutating:N,trigger:h}=B({onSuccess(t){if(!t){s(e.redeemModal.commonError);return}if(t?.data?.success)F(t.data.coupon_code),v(x?.user_id);else{let r;t.code===c.CodeLpcShopifyCouponRuleRedeemLimit?(r=e.redeemModal.redeemLimitError,n(!0)):t.code===c.CodeLpcRuleInventoryNotEnough?(r=e.redeemModal.inventoryNotEnough,n(!0)):t.code===c.CodeLpcNotEnoughCredits?(r=e.redeemModal.creditsNotEnough,n(!0),v(x?.user_id)):t.code===c.CodeCrossSiteError&&(r=e.redeemModal.crossSiteError,n(!0)),s(r||e.redeemModal.commonError||""),f&&f(t.code)}},onError(t){s(t.message||e.redeemModal.commonError)}}),T=k(async()=>{s(""),h({user_id:x?.user_id,rule_id:Number(d.alpc?.id)})},[d,x,h]);return I(()=>{m.isOpen||(n(!1),s(""))},[m.isOpen]),l(S,{...m,className:"w-[540px] md:h-auto",scrollClassName:"mb-[40px] min-l:px-0 md:mb-[24px] px-0",titleClassName:"h-[56px] bg-[#F5F5F7]",children:[l("div",{className:p("max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:[l("div",{className:"relative mx-auto h-[164px] w-[324px]",children:[e?.imageMapping[d.config?.type]?.url&&o(y,{source:e.imageMapping[d.config.type].url,className:"h-full [&_img]:h-full"}),o("div",{className:"absolute bottom-[8px] left-[16px] font-extrabold text-white",children:d.config.value?o(O,{item:d,copy:e}):o(i,{size:3,html:d.alpc?.title})})]}),a?l("div",{className:"mt-[30px] flex items-center justify-center md:mt-[18px]",children:[o("div",{className:"mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]",children:a}),o("div",{className:p("cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]",b?"pointer-events-none":"pointer-events-auto"),onClick:()=>{R(a)},role:"button",tabIndex:0,onKeyDown:t=>{(t.key==="Enter"||t.key===" ")&&t.preventDefault()},children:b?e?.copied:e?.copy})]}):l(i,{as:"p",className:p("mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]"),children:[P(d.alpc?.consumeCredits)," ",e?.pointUnit]}),!a&&d.config?.rules?.length>0&&l("div",{className:"mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]",children:[l("div",{className:"mb-[4px]",children:[e?.ruleLabel,":"]}),o("ul",{className:"ml-4 grid grid-flow-row gap-[4px]",children:d.config?.rules?.map((t,r)=>o("li",{className:"list-disc",children:o(i,{html:t})},r))})]})]}),l("div",{className:"bg-white px-[48px] pt-[24px] text-center md:px-[16px]",children:[a&&!N?l(E,{children:[l("div",{className:"flex flex-col",children:[o(i,{className:"mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]",html:e.redeemModal.coupon.successTitle}),o(i,{className:"text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]",html:e.redeemModal.coupon.successDesc})]}),o(M,{variant:"primary",size:"lg",className:"mt-[16px] w-full",onClick:()=>{window.location.href=e.redeemModal.coupon.successButtonUrl||`/${w}`,m.onClose&&m.onClose()},disabled:C,children:e.redeemModal.coupon.successButton})]}):l(E,{children:[o(i,{className:"block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]",html:e.redeemModal.confirmTitle}),o(M,{loading:N,variant:"primary",size:"lg",className:"mt-[16px] w-full",onClick:T,disabled:C,children:e.redeemModal.confirmButton})]}),g&&o("div",{className:"mx-auto max-w-full py-[12px] text-center text-[#FF0000]",children:o(i,{className:"text-[14px] font-semibold text-[#1F2021]",html:g})})]})]})}var Y=U;export{Y as default};
+import{Fragment as E,jsx as t,jsxs as l}from"react/jsx-runtime";import{Button as y,Picture as k,Text as i}from"@anker-in/headless-ui";import u from"classnames";import{useCallback as I,useEffect as L,useState as f}from"react";import _ from"../context/hooks/useCopy";import{useCreditsContext as B}from"../context/provider";import{useRedeemCoupon as S}from"../context/hooks/useRedeemCoupon";import{AlpcErrorCode as x}from"../context/const";import{CreditsModalContainer as P}from"../modal/modalContainer";import{numberFormat as z}from"../context/utils";import{useHeadlessContext as O}from"@anker-in/lib";import{NoneProductValue as U}from"./RedeemProductModal/NonProductValue";function A({item:d,copy:o,onError:g,...a}){const{locale:w}=O(),[s,F]=f(),[C,n]=f(),[b,p]=f(!1),{copy:R,copied:v}=_(),{profile:c,fetchCreditInfo:N,pageCommon:m}=B(),{isMutating:h,trigger:M}=S({onSuccess(e){if(!e){n(o.redeemModal.commonError);return}if(e?.data?.success)F(e.data.coupon_code),N(c?.user_id);else{let r;e.code===x.CodeLpcShopifyCouponRuleRedeemLimit?(r=o.redeemModal.redeemLimitError,p(!0)):e.code===x.CodeLpcRuleInventoryNotEnough?(r=o.redeemModal.inventoryNotEnough,p(!0)):e.code===x.CodeLpcNotEnoughCredits?(r=o.redeemModal.creditsNotEnough,p(!0),N(c?.user_id)):e.code===x.CodeCrossSiteError&&(r=o.redeemModal.crossSiteError,p(!0)),n(r||o.redeemModal.commonError||""),g&&g(e.code)}},onError(e){n(e.message||o.redeemModal.commonError)}}),T=I(async()=>{n(""),M({user_id:c?.user_id,rule_id:Number(d.alpc?.id)})},[d,c,M]);return L(()=>{a.isOpen||(p(!1),n(""))},[a.isOpen]),l(P,{...a,className:"w-[540px] md:h-auto",scrollClassName:"mb-[40px] min-l:px-0 md:mb-[24px] px-0",titleClassName:"h-[56px] bg-[#F5F5F7]",children:[l("div",{className:u("max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:[l("div",{className:"relative mx-auto h-[164px] w-[324px]",children:[m?.imageMapping?.[d.config?.type]?.url&&t(k,{source:m.imageMapping[d.config.type].url,className:"h-full [&_img]:h-full"}),t("div",{className:"absolute bottom-[8px] left-[16px] font-extrabold text-white",children:d.config.value?t(U,{item:d,copy:o}):t(i,{size:3,html:d.alpc?.title})})]}),s?l("div",{className:"mt-[30px] flex items-center justify-center md:mt-[18px]",children:[t("div",{className:"mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]",children:s}),t("div",{className:u("cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]",v?"pointer-events-none":"pointer-events-auto"),onClick:()=>{R(s)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},children:v?m?.copied:m?.copy})]}):l(i,{as:"p",className:u("mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]"),children:[z(d.alpc?.consumeCredits)," ",m?.pointUnit]}),!s&&d.config?.rules?.length>0&&l("div",{className:"mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]",children:[l("div",{className:"mb-[4px]",children:[m?.ruleLabel,":"]}),t("ul",{className:"ml-4 grid grid-flow-row gap-[4px]",children:d.config?.rules?.map((e,r)=>t("li",{className:"list-disc",children:t(i,{html:e})},r))})]})]}),l("div",{className:"bg-white px-[48px] pt-[24px] text-center md:px-[16px]",children:[s&&!h?l(E,{children:[l("div",{className:"flex flex-col",children:[t(i,{className:"mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]",html:o.redeemModal.coupon.successTitle}),t(i,{className:"text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]",html:o.redeemModal.coupon.successDesc})]}),t(y,{variant:"primary",size:"lg",className:"mt-[16px] w-full",onClick:()=>{window.location.href=o.redeemModal.coupon.successButtonUrl||`/${w}`,a.onClose&&a.onClose()},disabled:b,children:o.redeemModal.coupon.successButton})]}):l(E,{children:[t(i,{className:"block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]",html:o.redeemModal.confirmTitle}),t(y,{loading:h,variant:"primary",size:"lg",className:"mt-[16px] w-full",onClick:T,disabled:b,children:o.redeemModal.confirmButton})]}),C&&t("div",{className:"mx-auto max-w-full py-[12px] text-center text-[#FF0000]",children:t(i,{className:"text-[14px] font-semibold text-[#1F2021]",html:C})})]})]})}var Z=A;export{Z as default};
 //# sourceMappingURL=RedeemCouponModal.js.map

package/dist/esm/components/credits/creditsRedeemList/RedeemCouponModal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/credits/creditsRedeemList/RedeemCouponModal.tsx"],
-  "sourcesContent": ["import { Button, Picture, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useEffect, useState } from 'react'\nimport type { ModalContainerProps } from '../modal/modalContainer'\nimport useCopy from '../context/hooks/useCopy'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemCoupon } from '../context/hooks/useRedeemCoupon'\nimport { AlpcErrorCode } from '../context/const'\nimport { CreditsModalContainer } from '../modal/modalContainer'\nimport { numberFormat } from '../context/utils'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { CreditsRedeemListCopy } from './type'\nimport { NoneProductValue } from './RedeemProductModal/NonProductValue'\n\nfunction RedeemCouponModal({\n  item,\n  copy,\n  onError,\n  ...props\n}: ModalContainerProps & {\n  item: RedeemableItemType\n  copy: CreditsRedeemListCopy\n  onError: (code: number) => void\n}) {\n  const { locale } = useHeadlessContext()\n  const [couponCode, setCouponCode] = useState<string>()\n  const [errorInfo, setErrorInfo] = useState<string>()\n\n  const [disabled, setDisabled] = useState(false)\n  const { copy: copyText, copied: copiedStatus } = useCopy()\n\n  const { profile, fetchCreditInfo } = useCreditsContext()\n\n  const { isMutating: loading, trigger } = useRedeemCoupon({\n    onSuccess(responseData) {\n      if (!responseData) {\n        setErrorInfo(copy.redeemModal.commonError)\n        return\n      }\n\n      if (responseData?.data?.success) {\n        setCouponCode(responseData.data.coupon_code)\n        fetchCreditInfo(profile?.user_id)\n      } else {\n        let errorMsg\n        if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {\n          errorMsg = copy.redeemModal.redeemLimitError\n          setDisabled(true)\n        } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n          errorMsg = copy.redeemModal.inventoryNotEnough\n          setDisabled(true)\n        } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {\n          errorMsg = copy.redeemModal.creditsNotEnough\n          setDisabled(true)\n          fetchCreditInfo(profile?.user_id)\n        } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {\n          errorMsg = copy.redeemModal.crossSiteError\n          setDisabled(true)\n        }\n\n        setErrorInfo(errorMsg || copy.redeemModal.commonError || '')\n        onError && onError(responseData.code)\n      }\n    },\n    onError(error) {\n      setErrorInfo(error.message || copy.redeemModal.commonError)\n    },\n  })\n\n  const handleConfirm = useCallback(async () => {\n    setErrorInfo('')\n    trigger({\n      user_id: profile?.user_id,\n      rule_id: Number(item.alpc?.id),\n    })\n  }, [item, profile, trigger])\n\n  useEffect(() => {\n    if (!props.isOpen) {\n      setDisabled(false)\n      setErrorInfo('')\n    }\n  }, [props.isOpen])\n\n  return (\n    <CreditsModalContainer\n      {...props}\n      className=\"w-[540px] md:h-auto\"\n      scrollClassName=\"mb-[40px] min-l:px-0 md:mb-[24px] px-0\"\n      titleClassName=\"h-[56px] bg-[#F5F5F7]\"\n    >\n      <div\n        className={classNames(\n          'max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]'\n        )}\n      >\n        <div className=\"relative mx-auto h-[164px] w-[324px]\">\n          {copy?.imageMapping[item.config?.type]?.url && (\n            <Picture source={copy.imageMapping[item.config.type].url} className=\"h-full [&_img]:h-full\" />\n          )}\n          <div className=\"absolute bottom-[8px] left-[16px] font-extrabold text-white\">\n            {item.config.value ? (\n              <NoneProductValue item={item} copy={copy} />\n            ) : (\n              <Text size={3} html={item.alpc?.title} />\n            )}\n          </div>\n        </div>\n        {couponCode ? (\n          <div className=\"mt-[30px] flex items-center justify-center md:mt-[18px]\">\n            <div className=\"mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]\">{couponCode}</div>\n            <div\n              className={classNames(\n                'cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]',\n                copiedStatus ? 'pointer-events-none' : 'pointer-events-auto'\n              )}\n              onClick={() => {\n                copyText(couponCode)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {copiedStatus ? copy?.copied : copy?.copy}\n            </div>\n          </div>\n        ) : (\n          <Text\n            as=\"p\"\n            className={classNames(\n              'mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]'\n            )}\n          >\n            {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}\n          </Text>\n        )}\n        {!couponCode && item.config?.rules?.length > 0 && (\n          <div className=\"mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]\">\n            <div className=\"mb-[4px]\">{copy?.ruleLabel}:</div>\n            <ul className=\"ml-4 grid grid-flow-row gap-[4px]\">\n              {item.config?.rules?.map((text, index) => (\n                <li className=\"list-disc\" key={index}>\n                  <Text html={text} />\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n      <div className=\"bg-white px-[48px] pt-[24px] text-center md:px-[16px]\">\n        {couponCode && !loading ? (\n          <>\n            <div className=\"flex flex-col\">\n              <Text\n                className=\"mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]\"\n                html={copy.redeemModal.coupon.successTitle}\n              ></Text>\n              <Text\n                className=\"text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]\"\n                html={copy.redeemModal.coupon.successDesc}\n              ></Text>\n            </div>\n            <Button\n              variant=\"primary\"\n              size=\"lg\"\n              className=\"mt-[16px] w-full\"\n              onClick={() => {\n                window.location.href = copy.redeemModal.coupon.successButtonUrl || `/${locale}`\n                if (props.onClose) {\n                  props.onClose()\n                }\n              }}\n              disabled={disabled}\n            >\n              {copy.redeemModal.coupon.successButton}\n            </Button>\n          </>\n        ) : (\n          <>\n            <Text\n              className=\"block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]\"\n              html={copy.redeemModal.confirmTitle}\n            ></Text>\n            <Button\n              loading={loading}\n              variant=\"primary\"\n              size=\"lg\"\n              className=\"mt-[16px] w-full\"\n              onClick={handleConfirm}\n              disabled={disabled}\n            >\n              {copy.redeemModal.confirmButton}\n            </Button>\n          </>\n        )}\n        {errorInfo && (\n          <div className=\"mx-auto max-w-full py-[12px] text-center text-[#FF0000]\">\n            <Text className=\"text-[14px] font-semibold text-[#1F2021]\" html={errorInfo} />\n          </div>\n        )}\n      </div>\n    </CreditsModalContainer>\n  )\n}\n\nexport default RedeemCouponModal\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Button", "Picture", "Text", "classNames", "useCallback", "useEffect", "useState", "useCopy", "useCreditsContext", "useRedeemCoupon", "AlpcErrorCode", "CreditsModalContainer", "numberFormat", "useHeadlessContext", "NoneProductValue", "RedeemCouponModal", "item", "copy", "onError", "props", "locale", "couponCode", "setCouponCode", "errorInfo", "setErrorInfo", "disabled", "setDisabled", "copyText", "copiedStatus", "profile", "fetchCreditInfo", "loading", "trigger", "responseData", "errorMsg", "error", "handleConfirm", "e", "text", "index", "RedeemCouponModal_default"]
+  "sourcesContent": ["import { Button, Picture, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { useCallback, useEffect, useState } from 'react'\nimport type { ModalContainerProps } from '../modal/modalContainer'\nimport useCopy from '../context/hooks/useCopy'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemCoupon } from '../context/hooks/useRedeemCoupon'\nimport { AlpcErrorCode } from '../context/const'\nimport { CreditsModalContainer } from '../modal/modalContainer'\nimport { numberFormat } from '../context/utils'\nimport type { RedeemableItem as RedeemableItemType } from '../type'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { CreditsRedeemListCopy } from './type'\nimport { NoneProductValue } from './RedeemProductModal/NonProductValue'\n\nfunction RedeemCouponModal({\n  item,\n  copy,\n  onError,\n  ...props\n}: ModalContainerProps & {\n  item: RedeemableItemType\n  copy: CreditsRedeemListCopy\n  onError: (code: number) => void\n}) {\n  const { locale } = useHeadlessContext()\n  const [couponCode, setCouponCode] = useState<string>()\n  const [errorInfo, setErrorInfo] = useState<string>()\n\n  const [disabled, setDisabled] = useState(false)\n  const { copy: copyText, copied: copiedStatus } = useCopy()\n\n  const { profile, fetchCreditInfo, pageCommon } = useCreditsContext()\n\n  const { isMutating: loading, trigger } = useRedeemCoupon({\n    onSuccess(responseData) {\n      if (!responseData) {\n        setErrorInfo(copy.redeemModal.commonError)\n        return\n      }\n\n      if (responseData?.data?.success) {\n        setCouponCode(responseData.data.coupon_code)\n        fetchCreditInfo(profile?.user_id)\n      } else {\n        let errorMsg\n        if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {\n          errorMsg = copy.redeemModal.redeemLimitError\n          setDisabled(true)\n        } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n          errorMsg = copy.redeemModal.inventoryNotEnough\n          setDisabled(true)\n        } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {\n          errorMsg = copy.redeemModal.creditsNotEnough\n          setDisabled(true)\n          fetchCreditInfo(profile?.user_id)\n        } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {\n          errorMsg = copy.redeemModal.crossSiteError\n          setDisabled(true)\n        }\n\n        setErrorInfo(errorMsg || copy.redeemModal.commonError || '')\n        onError && onError(responseData.code)\n      }\n    },\n    onError(error) {\n      setErrorInfo(error.message || copy.redeemModal.commonError)\n    },\n  })\n\n  const handleConfirm = useCallback(async () => {\n    setErrorInfo('')\n    trigger({\n      user_id: profile?.user_id,\n      rule_id: Number(item.alpc?.id),\n    })\n  }, [item, profile, trigger])\n\n  useEffect(() => {\n    if (!props.isOpen) {\n      setDisabled(false)\n      setErrorInfo('')\n    }\n  }, [props.isOpen])\n\n  return (\n    <CreditsModalContainer\n      {...props}\n      className=\"w-[540px] md:h-auto\"\n      scrollClassName=\"mb-[40px] min-l:px-0 md:mb-[24px] px-0\"\n      titleClassName=\"h-[56px] bg-[#F5F5F7]\"\n    >\n      <div\n        className={classNames(\n          'max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]'\n        )}\n      >\n        <div className=\"relative mx-auto h-[164px] w-[324px]\">\n          {pageCommon?.imageMapping?.[item.config?.type]?.url && (\n            <Picture source={pageCommon.imageMapping[item.config.type].url} className=\"h-full [&_img]:h-full\" />\n          )}\n          <div className=\"absolute bottom-[8px] left-[16px] font-extrabold text-white\">\n            {item.config.value ? (\n              <NoneProductValue item={item} copy={copy} />\n            ) : (\n              <Text size={3} html={item.alpc?.title} />\n            )}\n          </div>\n        </div>\n        {couponCode ? (\n          <div className=\"mt-[30px] flex items-center justify-center md:mt-[18px]\">\n            <div className=\"mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]\">{couponCode}</div>\n            <div\n              className={classNames(\n                'cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]',\n                copiedStatus ? 'pointer-events-none' : 'pointer-events-auto'\n              )}\n              onClick={() => {\n                copyText(couponCode)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {copiedStatus ? pageCommon?.copied : pageCommon?.copy}\n            </div>\n          </div>\n        ) : (\n          <Text\n            as=\"p\"\n            className={classNames(\n              'mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]'\n            )}\n          >\n            {numberFormat(item.alpc?.consumeCredits)} {pageCommon?.pointUnit}\n          </Text>\n        )}\n        {!couponCode && item.config?.rules?.length > 0 && (\n          <div className=\"mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]\">\n            <div className=\"mb-[4px]\">{pageCommon?.ruleLabel}:</div>\n            <ul className=\"ml-4 grid grid-flow-row gap-[4px]\">\n              {item.config?.rules?.map((text, index) => (\n                <li className=\"list-disc\" key={index}>\n                  <Text html={text} />\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n      <div className=\"bg-white px-[48px] pt-[24px] text-center md:px-[16px]\">\n        {couponCode && !loading ? (\n          <>\n            <div className=\"flex flex-col\">\n              <Text\n                className=\"mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]\"\n                html={copy.redeemModal.coupon.successTitle}\n              ></Text>\n              <Text\n                className=\"text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]\"\n                html={copy.redeemModal.coupon.successDesc}\n              ></Text>\n            </div>\n            <Button\n              variant=\"primary\"\n              size=\"lg\"\n              className=\"mt-[16px] w-full\"\n              onClick={() => {\n                window.location.href = copy.redeemModal.coupon.successButtonUrl || `/${locale}`\n                if (props.onClose) {\n                  props.onClose()\n                }\n              }}\n              disabled={disabled}\n            >\n              {copy.redeemModal.coupon.successButton}\n            </Button>\n          </>\n        ) : (\n          <>\n            <Text\n              className=\"block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]\"\n              html={copy.redeemModal.confirmTitle}\n            ></Text>\n            <Button\n              loading={loading}\n              variant=\"primary\"\n              size=\"lg\"\n              className=\"mt-[16px] w-full\"\n              onClick={handleConfirm}\n              disabled={disabled}\n            >\n              {copy.redeemModal.confirmButton}\n            </Button>\n          </>\n        )}\n        {errorInfo && (\n          <div className=\"mx-auto max-w-full py-[12px] text-center text-[#FF0000]\">\n            <Text className=\"text-[14px] font-semibold text-[#1F2021]\" html={errorInfo} />\n          </div>\n        )}\n      </div>\n    </CreditsModalContainer>\n  )\n}\n\nexport default RedeemCouponModal\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Button", "Picture", "Text", "classNames", "useCallback", "useEffect", "useState", "useCopy", "useCreditsContext", "useRedeemCoupon", "AlpcErrorCode", "CreditsModalContainer", "numberFormat", "useHeadlessContext", "NoneProductValue", "RedeemCouponModal", "item", "copy", "onError", "props", "locale", "couponCode", "setCouponCode", "errorInfo", "setErrorInfo", "disabled", "setDisabled", "copyText", "copiedStatus", "profile", "fetchCreditInfo", "pageCommon", "loading", "trigger", "responseData", "errorMsg", "error", "handleConfirm", "text", "index", "RedeemCouponModal_default"]
 }

package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/Address.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as v,Text as r}from"@anker-in/headless-ui";import b from"classnames";import{AddressForm as g}from"../AddressForm";import{useHeadlessContext as h}from"@anker-in/lib";import{ProductInfo as C}from"./ProductInfo";import N from"../../context/hooks/useCountries";const k=({copy:o,shippingAddress:s,setAddress:i,validateAddress:m,validateErrors:a,shippingProduct:d,loading:n,address:p,disabled:l,handlePayment:x,item:c})=>{const{storeDomain:f}=h(),{countries:u=[],isLoading:y}=N({shopifyStoreDomain:f});return t("div",{className:"relative",children:[e("div",{className:b("max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:t("div",{children:[s&&e(r,{className:"mb-5 text-[16px] font-bold",html:s}),e(g,{onChange:i,validate:m,errors:a,form:o.redeemModal.product.addressForm,countries:u,countriesLoading:y})]})}),t("div",{className:"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]",children:[t("div",{className:"flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]",children:[d&&e(r,{className:"mb-5 text-[16px] font-bold",html:d}),e(C,{item:c,copy:o})]}),e(v,{loading:n||!p,variant:"primary",className:"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full",onClick:x,disabled:l,children:o.redeemModal.product.paymentButton})]})]})};export{k as Address};
+import{jsx as e,jsxs as d}from"react/jsx-runtime";import{Button as N,Text as r}from"@anker-in/headless-ui";import a from"classnames";import{AddressForm as R}from"../AddressForm";import{useHeadlessContext as h,ROUNDED_BRANDS as A}from"@anker-in/lib";import{ProductInfo as C}from"./ProductInfo";import F from"../../context/hooks/useCountries";const M=({copy:o,shippingAddress:t,setAddress:m,validateAddress:i,validateErrors:n,shippingProduct:s,loading:p,address:l,disabled:x,handlePayment:c,item:u})=>{const{storeDomain:f,brand:v}=h(),y=A.includes(v),{countries:b=[],isLoading:g}=F({shopifyStoreDomain:f});return d("div",{className:"relative",children:[e("div",{className:a("max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:d("div",{children:[t&&e(r,{className:"mb-5 text-[16px] font-bold",html:t}),o.redeemModal?.product?.addressForm&&e(R,{onChange:m,validate:i,errors:n,form:o.redeemModal.product.addressForm,countries:b,countriesLoading:g})]})}),d("div",{className:"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]",children:[d("div",{className:a("flex w-full items-center bg-[#F5F5F7] p-[16px]",!y&&"rounded-none"),children:[s&&e(r,{className:"mb-5 text-[16px] font-bold",html:s}),e(C,{item:u,copy:o})]}),e(N,{loading:p||!l,variant:"primary",className:"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full",onClick:c,disabled:x,children:o.redeemModal.product.paymentButton})]})]})};export{M as Address};
 //# sourceMappingURL=Address.js.map

package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/Address.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx"],
-  "sourcesContent": ["import { Button, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { AddressForm } from '../AddressForm'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { ProductInfo } from './ProductInfo'\nimport useCountries from '../../context/hooks/useCountries'\n\ntype AddressProps = {\n  copy: CreditsRedeemListCopy\n  shippingAddress: string\n  setAddress: (address: Record<string, any>) => void\n  validateAddress: (address: Record<string, any>) => boolean\n  validateErrors: { key: string; message: string }[]\n  item: RedeemableItemType\n  loading: boolean\n  address: Record<string, any> | undefined\n  disabled: boolean\n  handlePayment: () => void\n  shippingProduct: string\n}\n\nexport const Address = ({\n  copy,\n  shippingAddress,\n  setAddress,\n  validateAddress,\n  validateErrors,\n  shippingProduct,\n  loading,\n  address,\n  disabled,\n  handlePayment,\n  item,\n}: AddressProps) => {\n  const { storeDomain } = useHeadlessContext()\n  const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })\n\n  return (\n    <div className=\"relative\">\n      <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>\n        <div>\n          {shippingAddress && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingAddress}></Text>}\n          <AddressForm\n            onChange={setAddress}\n            validate={validateAddress}\n            errors={validateErrors}\n            form={copy.redeemModal.product.addressForm}\n            countries={countries}\n            countriesLoading={countriesLoading}\n          ></AddressForm>\n        </div>\n      </div>\n      <div className=\"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]\">\n        <div className=\"flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]\">\n          {shippingProduct && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingProduct}></Text>}\n          <ProductInfo item={item} copy={copy} />\n        </div>\n        <Button\n          loading={loading || !address}\n          variant=\"primary\"\n          className=\"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full\"\n          onClick={handlePayment}\n          disabled={disabled}\n        >\n          {copy.redeemModal.product.paymentButton}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "AA0CQ,OACsB,OAAAA,EADtB,QAAAC,MAAA,oBA1CR,OAAS,UAAAC,EAAQ,QAAAC,MAAY,wBAC7B,OAAOC,MAAgB,aACvB,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,sBAAAC,MAA0B,gBAGnC,OAAS,eAAAC,MAAmB,gBAC5B,OAAOC,MAAkB,mCAgBlB,MAAMC,EAAU,CAAC,CACtB,KAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAAoB,CAClB,KAAM,CAAE,YAAAC,CAAY,EAAIf,EAAmB,EACrC,CAAE,UAAAgB,EAAY,CAAC,EAAG,UAAWC,CAAiB,EAAIf,EAAa,CAAE,mBAAoBa,CAAY,CAAC,EAExG,OACEpB,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAWI,EAAW,iFAAiF,EAC1G,SAAAH,EAAC,OACE,UAAAU,GAAmBX,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMQ,EAAiB,EACxFX,EAACK,EAAA,CACC,SAAUO,EACV,SAAUC,EACV,OAAQC,EACR,KAAMJ,EAAK,YAAY,QAAQ,YAC/B,UAAWY,EACX,iBAAkBC,EACnB,GACH,EACF,EACAtB,EAAC,OAAI,UAAU,qGACb,UAAAA,EAAC,OAAI,UAAU,gEACZ,UAAAc,GAAmBf,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMY,EAAiB,EACxFf,EAACO,EAAA,CAAY,KAAMa,EAAM,KAAMV,EAAM,GACvC,EACAV,EAACE,EAAA,CACC,QAASc,GAAW,CAACC,EACrB,QAAQ,UACR,UAAU,qDACV,QAASE,EACT,SAAUD,EAET,SAAAR,EAAK,YAAY,QAAQ,cAC5B,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Button", "Text", "classNames", "AddressForm", "useHeadlessContext", "ProductInfo", "useCountries", "Address", "copy", "shippingAddress", "setAddress", "validateAddress", "validateErrors", "shippingProduct", "loading", "address", "disabled", "handlePayment", "item", "storeDomain", "countries", "countriesLoading"]
+  "sourcesContent": ["import { Button, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { AddressForm } from '../AddressForm'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { ProductInfo } from './ProductInfo'\nimport useCountries from '../../context/hooks/useCountries'\n\ntype AddressProps = {\n  copy: CreditsRedeemListCopy\n  shippingAddress: string\n  setAddress: (address: Record<string, any>) => void\n  validateAddress: (address: Record<string, any>) => boolean\n  validateErrors: { key: string; message: string }[]\n  item: RedeemableItemType\n  loading: boolean\n  address: Record<string, any> | undefined\n  disabled: boolean\n  handlePayment: () => void\n  shippingProduct: string\n}\n\nexport const Address = ({\n  copy,\n  shippingAddress,\n  setAddress,\n  validateAddress,\n  validateErrors,\n  shippingProduct,\n  loading,\n  address,\n  disabled,\n  handlePayment,\n  item,\n}: AddressProps) => {\n  const { storeDomain, brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n  const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })\n\n  return (\n    <div className=\"relative\">\n      <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>\n        <div>\n          {shippingAddress && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingAddress}></Text>}\n          {copy.redeemModal?.product?.addressForm && (\n            <AddressForm\n              onChange={setAddress}\n              validate={validateAddress}\n              errors={validateErrors}\n              form={copy.redeemModal.product.addressForm}\n              countries={countries}\n              countriesLoading={countriesLoading}\n            ></AddressForm>\n          )}\n        </div>\n      </div>\n      <div className=\"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]\">\n        <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>\n          {shippingProduct && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingProduct}></Text>}\n          <ProductInfo item={item} copy={copy} />\n        </div>\n        <Button\n          loading={loading || !address}\n          variant=\"primary\"\n          className=\"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full\"\n          onClick={handlePayment}\n          disabled={disabled}\n        >\n          {copy.redeemModal.product.paymentButton}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AA2CQ,OACsB,OAAAA,EADtB,QAAAC,MAAA,oBA3CR,OAAS,UAAAC,EAAQ,QAAAC,MAAY,wBAC7B,OAAOC,MAAgB,aACvB,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,sBAAAC,EAAoB,kBAAAC,MAAsB,gBAGnD,OAAS,eAAAC,MAAmB,gBAC5B,OAAOC,MAAkB,mCAgBlB,MAAMC,EAAU,CAAC,CACtB,KAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAAoB,CAClB,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIjB,EAAmB,EAC5CkB,EAAUjB,EAAe,SAASgB,CAAK,EACvC,CAAE,UAAAE,EAAY,CAAC,EAAG,UAAWC,CAAiB,EAAIjB,EAAa,CAAE,mBAAoBa,CAAY,CAAC,EAExG,OACErB,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAWI,EAAW,iFAAiF,EAC1G,SAAAH,EAAC,OACE,UAAAW,GAAmBZ,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMS,EAAiB,EACvFD,EAAK,aAAa,SAAS,aAC1BX,EAACK,EAAA,CACC,SAAUQ,EACV,SAAUC,EACV,OAAQC,EACR,KAAMJ,EAAK,YAAY,QAAQ,YAC/B,UAAWc,EACX,iBAAkBC,EACnB,GAEL,EACF,EACAzB,EAAC,OAAI,UAAU,qGACb,UAAAA,EAAC,OAAI,UAAWG,EAAW,iDAAkD,CAACoB,GAAW,cAAc,EACpG,UAAAR,GAAmBhB,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMa,EAAiB,EACxFhB,EAACQ,EAAA,CAAY,KAAMa,EAAM,KAAMV,EAAM,GACvC,EACAX,EAACE,EAAA,CACC,QAASe,GAAW,CAACC,EACrB,QAAQ,UACR,UAAU,qDACV,QAASE,EACT,SAAUD,EAET,SAAAR,EAAK,YAAY,QAAQ,cAC5B,GACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "Button", "Text", "classNames", "AddressForm", "useHeadlessContext", "ROUNDED_BRANDS", "ProductInfo", "useCountries", "Address", "copy", "shippingAddress", "setAddress", "validateAddress", "validateErrors", "shippingProduct", "loading", "address", "disabled", "handlePayment", "item", "storeDomain", "brand", "rounded", "countries", "countriesLoading"]
 }

package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/Init.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as N,jsx as e,jsxs as d}from"react/jsx-runtime";import{Button as c,Picture as a,Text as i}from"@anker-in/headless-ui";import m from"classnames";import{Fragment as u,useMemo as f}from"react";import{numberFormat as g}from"../../context/utils";import{ConsumeType as v}from"../../context/const";import{NoneProductValue as b}from"./NonProductValue";const I=({copy:l,item:t,loading:r,disabled:x,setStatus:n})=>{const p=f(()=>t.config.rules?.length?t.config.rules:[...t.config.desc?.split("<br>")||[],...l.redeemModal.product.rules||[]],[t.config.rules,t.config.desc,l.redeemModal.product.rules]);return d("div",{className:"flex flex-col",children:[e("div",{className:m("max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:d(N,{children:[d("div",{className:"relative mx-auto h-[164px] w-fit",children:[e(a,{source:t.config?.type===v.Product?t.product.images[0]?.url:l?.imageMapping[t.config.type]?.url||t.config.image?.url,className:"h-full w-auto [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"}),e("div",{className:"absolute bottom-[8px] left-[16px] font-extrabold text-white",children:t.config.value&&e(b,{item:t,copy:l})})]}),d("div",{className:"mt-[30px] md:mt-[18px]",children:[t.config.type==="product"&&e("div",{className:m("mb-[4px] text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"),children:t.config.title}),d(i,{as:"p",className:m(" text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"),children:[g(t.alpc?.consumeCredits)," ",l?.pointUnit]})]}),d("div",{className:"mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]",children:[e("div",{className:"text-[16px] font-bold leading-[1.4]",children:l.redeemModal.product.stepTitle}),e("div",{className:"mt-[4px] flex items-center justify-center",children:l.redeemModal.product.steps?.map((s,o)=>d(u,{children:[d("div",{className:"flex w-[76px] flex-col items-center text-center md:h-[94px] min-l:w-[130px]",children:[e(a,{source:s.imageUrl,className:"mb-[4px] h-[58px] w-[58px]"}),e("div",{className:"min-h-[34px] text-[14px] font-bold text-[#777] md:min-h-[28px] md:text-[12px]",children:s.title})]}),o!==l.redeemModal.product.steps.length-1&&e(a,{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]"})]},o))}),e("div",{className:"overflow-auto",children:p?.length&&e("ul",{className:"ml-[18px] mt-[16px] grid grid-flow-row gap-[4px] text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px]",children:p.map((s,o)=>e("li",{className:"list-disc",children:e(i,{as:"div",html:s,className:"font-bold"})},o))})})]})]})}),d("div",{className:"flex-1 bg-white px-[48px] py-[24px] text-center md:px-[16px]",children:[e(i,{as:"p",className:"block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]",html:l.redeemModal.confirmTitle}),e(c,{loading:r,disabled:x,variant:"primary",size:"lg",className:"mt-[16px] w-full md:mt-[12px]",onClick:()=>{n("address")},children:l.redeemModal.confirmButton})]})]})};export{I as Init};
+import{Fragment as w,jsx as e,jsxs as o}from"react/jsx-runtime";import{Button as u,Picture as m,Text as i}from"@anker-in/headless-ui";import a from"classnames";import{Fragment as f,useMemo as g}from"react";import{numberFormat as v}from"../../context/utils";import{ConsumeType as b}from"../../context/const";import{NoneProductValue as N}from"./NonProductValue";import{useCreditsContext as h}from"../../context/provider";const B=({copy:s,item:t,loading:x,disabled:n,setStatus:c})=>{const{pageCommon:p}=h(),r=g(()=>t.config.rules?.length?t.config.rules:[...t.config.desc?.split("<br>")||[],...s.redeemModal.product.rules||[]],[t.config.rules,t.config.desc,s.redeemModal.product.rules]);return o("div",{className:"flex flex-col",children:[e("div",{className:a("max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:o(w,{children:[o("div",{className:"relative mx-auto h-[164px] w-fit",children:[e(m,{source:t.config?.type===b.Product?t.product.images[0]?.url:p?.imageMapping?.[t.config.type]?.url||t.config.image?.url,className:"h-full w-auto [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"}),e("div",{className:"absolute bottom-[8px] left-[16px] font-extrabold text-white",children:t.config.value&&e(N,{item:t,copy:s})})]}),o("div",{className:"mt-[30px] md:mt-[18px]",children:[t.config.type==="product"&&e("div",{className:a("mb-[4px] text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"),children:t.config.title}),o(i,{as:"p",className:a(" text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"),children:[v(t.alpc?.consumeCredits)," ",p?.pointUnit]})]}),o("div",{className:"mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]",children:[e("div",{className:"text-[16px] font-bold leading-[1.4]",children:s.redeemModal.product.stepTitle}),e("div",{className:"mt-[4px] flex items-center justify-center",children:s.redeemModal.product.steps?.map((d,l)=>o(f,{children:[o("div",{className:"flex w-[76px] flex-col items-center text-center md:h-[94px] min-l:w-[130px]",children:[e(m,{source:d.imageUrl,className:"mb-[4px] h-[58px] w-[58px]"}),e("div",{className:"min-h-[34px] text-[14px] font-bold text-[#777] md:min-h-[28px] md:text-[12px]",children:d.title})]}),l!==s.redeemModal.product.steps.length-1&&e(m,{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]"})]},l))}),e("div",{className:"overflow-auto",children:r?.length&&e("ul",{className:"ml-[18px] mt-[16px] grid grid-flow-row gap-[4px] text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px]",children:r.map((d,l)=>e("li",{className:"list-disc",children:e(i,{as:"div",html:d,className:"font-bold"})},l))})})]})]})}),o("div",{className:"flex-1 bg-white px-[48px] py-[24px] text-center md:px-[16px]",children:[e(i,{as:"p",className:"block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]",html:s.redeemModal.confirmTitle}),e(u,{loading:x,disabled:n,variant:"primary",size:"lg",className:"mt-[16px] w-full md:mt-[12px]",onClick:()=>{c("address")},children:s.redeemModal.confirmButton})]})]})};export{B as Init};
 //# sourceMappingURL=Init.js.map