@nuskin/react-loyalty-elements/dist/SubscriptionRewardBanner/index.mjs.map

A React based component library for reusable Nextgen Loyalty component

{"version":3,"sources":["/gitlab-runner-data/builds/nextgen-development/loyalty/npm/react-loyalty-elements/dist/SubscriptionRewardBanner/index.mjs","../../src/SubscriptionRewardBanner/SubscriptionRewardBanner.tsx","../../src/SubscriptionRewardBanner/SubscriptionRewardBanner.styled.tsx"],"names":["d","C","e","w","v","useState","import_foundation_theme","SubscriptionRewardContainer","r","styled","div","CardImage","img","CardContent","CardHeader","h2","CardText","p","CardButton","button","CardLogo","Fragment","jsx","jsxs","SubscriptionRewardBanner","props","translationConfig","header","body","learnMore","loyaltyLogoBlack","loyaltyBanner","learnMoreConfig","tagLine","cardOneDescription","cardOneVoucherAmount","cardTwoDescription","cardTwoVoucherAmount","loyaltyLogoWhite","show","setShow","handleOpen","handleClose","children","src","alt","onClick","SubscriptionRewardModal","close","SubscriptionRewardBanner_default"],"mappings":"k0FAAA,OAAOA,KAAKC,CAAC,KAAK,uBAAwB,QAAOC,KAAKC,CAAC,CAACC,KAAKJ,CAAC,KAAK,uBCAnE,QAAgBK,YAAAA,CAAAA,KAAgB,OCAhC,CAAA,IAAAC,EAAuBH,EAAAF,KAEVM,EAA8BC,EAAAC,MAAA,CAAOC,GAAA,MAgBrCC,EAAYH,EAAAC,MAAA,CAAOG,GAAA,MAYnBC,EAAcL,EAAAC,MAAA,CAAOC,GAAA,MAcrBI,EAAaN,EAAAC,MAAA,CAAOM,EAAA,MAQpBC,EAAWR,EAAAC,MAAA,CAAOQ,CAAA,MASlBC,EAAaV,EAAAC,MAAA,CAAOU,MAAA,MAepBC,EAAWZ,EAAAC,MAAA,CAAOG,GAAA,KDtCvB,QAAAS,YAAAA,CAAAA,CAIgBC,OAAAA,CAAAA,CAEJC,QAAAA,CAAAA,KANZ,mBAzBR,CAAA,IAAMC,EAA4BC,SAAAA,GAC9B,IACIC,EAkBAD,EAlBAC,kBAAAA,EAAAA,WAAoB,CAChBC,OAAQ,GACRC,KAAM,GACNC,UAAW,GACXC,iBAAkB,GAClBC,cAAe,EACnB,EANAL,EAOAM,EAWAP,EAXAO,gBAAAA,EAAAA,WAAkB,CACdC,QAAS,GACTC,mBAAoB,GACpBC,qBAAsB,GACtBC,mBAAoB,GACpBC,qBAAsB,GACtBV,OAAQ,GACRW,iBAAkB,GAClBP,cAAe,GACfF,UAAW,EACf,EAVAG,EAYoB3B,IAAAA,EAAS,CAAA,MAA1BkC,EAAiBlC,KAAXmC,EAAWnC,KAClBoC,EAAa,kBAAMD,EAAQ,CAAA,IAC3BE,EAAc,kBAAMF,EAAQ,CAAA,IAClC,OACIjB,EAAAF,EAAA,CACKsB,SAAA,CAAAjB,GACGH,EAAChB,EAAA,CACIoC,SAAA,CAAAjB,EAAkBK,aAAA,EACfT,EAACX,EAAA,CAAUiC,IAAKlB,EAAkBK,aAAA,CAAec,IAAI,eAAA,GAEzDtB,EAACV,EAAA,CACI8B,SAAA,CAAAjB,EAAkBC,MAAA,EAAUL,EAACR,EAAA,CAAY6B,SAAAjB,EAAkBC,MAAA,GAC3DD,EAAkBI,gBAAA,EACfR,EAACF,EAAA,CAASwB,IAAKlB,EAAkBI,gBAAA,CAAkBe,IAAI,cAAA,GAE1DnB,EAAkBE,IAAA,EAAQN,EAACN,EAAA,CAAU2B,SAAAjB,EAAkBE,IAAA,GACvDI,EAAgBH,SAAA,EACbP,EAACJ,EAAA,CAAW4B,QAASL,EAAaE,SAAAX,EAAgBH,SAAA,GAAU,GAEpE,GAGPG,GACGV,EAACyB,EAAA,CACGR,KAAMA,EACNS,MAAON,EACPV,gBAAiBA,EACjBN,kBAAmBA,CAAAA,GACvB,EAIhB,EAEOuB,EAAQzB,SAAAA,KAAAA,wBAAAA","sourcesContent":["import{d as C}from\"../chunk-B5UVKXR6.mjs\";import{e as w,v as d}from\"../chunk-YZGRTK3A.mjs\";import{useState as y}from\"react\";var r=w(C()),i=r.styled.div`\n    display: flex;\n    flex-direction: row;\n    background-color: #fff;\n    border-radius: 10px;\n    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    margin-top: 10px;\n    border: 1px solid #e0e0e0;\n\n    @media (max-width: 767px) {\n        flex-direction: column;\n        padding: 10px;\n    }\n`,p=r.styled.img`\n    width: 40%;\n    height: 345px;\n    display: block;\n    object-fit: cover;\n\n    @media (max-width: 767px) {\n        width: 100%;\n        border-radius: 10px 10px 0 0;\n    }\n`,l=r.styled.div`\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 0px 40px;\n    width: 60%;\n    background-color: #f5f5f5;\n\n    @media (max-width: 767px) {\n        width: 100%;\n        padding: 20px;\n    }\n`,c=r.styled.h2`\n    font-family: Inter, sans-serif;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n    margin-bottom: 10px;\n`,s=r.styled.p`\n    font-family: Inter, sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 22px;\n    color: #252525;\n    margin-top: 2rem;\n`,x=r.styled.button`\n    width: 257px;\n    margin-top: 15px;\n    background-color: #252525;\n    color: #fff;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n\n    &:hover {\n        background-color: #8c8c8c;\n    }\n`,f=r.styled.img`\n    max-width: 360px;\n`;import{Fragment as R,jsx as e,jsxs as a}from\"react/jsx-runtime\";var b=g=>{let{translationConfig:o={header:\"\",body:\"\",learnMore:\"\",loyaltyLogoBlack:\"\",loyaltyBanner:\"\"},learnMoreConfig:t={tagLine:\"\",cardOneDescription:\"\",cardOneVoucherAmount:\"\",cardTwoDescription:\"\",cardTwoVoucherAmount:\"\",header:\"\",loyaltyLogoWhite:\"\",loyaltyBanner:\"\",learnMore:\"\"}}=g,[h,n]=y(!1),m=()=>n(!0),u=()=>n(!1);return a(R,{children:[o&&a(i,{children:[o.loyaltyBanner&&e(p,{src:o.loyaltyBanner,alt:\"Beauty Device\"}),a(l,{children:[o.header&&e(c,{children:o.header}),o.loyaltyLogoBlack&&e(f,{src:o.loyaltyLogoBlack,alt:\"Rewards Logo\"}),o.body&&e(s,{children:o.body}),t.learnMore&&e(x,{onClick:m,children:t.learnMore})]})]}),t&&e(d,{show:h,close:u,learnMoreConfig:t,translationConfig:o})]})},B=b;export{B as SubscriptionRewardBanner};\n","import React, { useState } from 'react';\nimport {\n    SubscriptionRewardContainer,\n    CardContent,\n    CardImage,\n    CardHeader,\n    CardText,\n    CardButton,\n    CardLogo,\n} from './SubscriptionRewardBanner.styled';\nimport { RewardBannerProps } from './types';\nimport { SubscriptionRewardModal } from '../SubscriptionRewardModal';\n\nconst SubscriptionRewardBanner = (props: RewardBannerProps) => {\n    const {\n        translationConfig = {\n            header: '',\n            body: '',\n            learnMore: '',\n            loyaltyLogoBlack: '',\n            loyaltyBanner: '',\n        },\n        learnMoreConfig = {\n            tagLine: '',\n            cardOneDescription: '',\n            cardOneVoucherAmount: '',\n            cardTwoDescription: '',\n            cardTwoVoucherAmount: '',\n            header: '',\n            loyaltyLogoWhite: '',\n            loyaltyBanner: '',\n            learnMore: '',\n        },\n    } = props;\n    const [show, setShow] = useState(false);\n    const handleOpen = () => setShow(true);\n    const handleClose = () => setShow(false);\n    return (\n        <>\n            {translationConfig && (\n                <SubscriptionRewardContainer>\n                    {translationConfig.loyaltyBanner && (\n                        <CardImage src={translationConfig.loyaltyBanner} alt=\"Beauty Device\" />\n                    )}\n                    <CardContent>\n                        {translationConfig.header && <CardHeader>{translationConfig.header}</CardHeader>}\n                        {translationConfig.loyaltyLogoBlack && (\n                            <CardLogo src={translationConfig.loyaltyLogoBlack} alt=\"Rewards Logo\" />\n                        )}\n                        {translationConfig.body && <CardText>{translationConfig.body}</CardText>}\n                        {learnMoreConfig.learnMore && (\n                            <CardButton onClick={handleOpen}>{learnMoreConfig.learnMore}</CardButton>\n                        )}\n                    </CardContent>\n                </SubscriptionRewardContainer>\n            )}\n            {learnMoreConfig && (\n                <SubscriptionRewardModal\n                    show={show}\n                    close={handleClose}\n                    learnMoreConfig={learnMoreConfig}\n                    translationConfig={translationConfig}\n                />\n            )}\n        </>\n    );\n};\n\nexport default SubscriptionRewardBanner;\n","import { styled } from '@nuskin/foundation-theme';\n\nexport const SubscriptionRewardContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    background-color: #fff;\n    border-radius: 10px;\n    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    margin-top: 10px;\n    border: 1px solid #e0e0e0;\n\n    @media (max-width: 767px) {\n        flex-direction: column;\n        padding: 10px;\n    }\n`;\n\nexport const CardImage = styled.img`\n    width: 40%;\n    height: 345px;\n    display: block;\n    object-fit: cover;\n\n    @media (max-width: 767px) {\n        width: 100%;\n        border-radius: 10px 10px 0 0;\n    }\n`;\n\nexport const CardContent = styled.div`\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 0px 40px;\n    width: 60%;\n    background-color: #f5f5f5;\n\n    @media (max-width: 767px) {\n        width: 100%;\n        padding: 20px;\n    }\n`;\n\nexport const CardHeader = styled.h2`\n    font-family: Inter, sans-serif;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n    margin-bottom: 10px;\n`;\n\nexport const CardText = styled.p`\n    font-family: Inter, sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 22px;\n    color: #252525;\n    margin-top: 2rem;\n`;\n\nexport const CardButton = styled.button`\n    width: 257px;\n    margin-top: 15px;\n    background-color: #252525;\n    color: #fff;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n\n    &:hover {\n        background-color: #8c8c8c;\n    }\n`;\n\nexport const CardLogo = styled.img`\n    max-width: 360px;\n`;\n"]}