@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","r","e","i","useState","SubscriptionRewardContainer","newStyled","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":"g7FAAA,OAAOA,KAAKC,CAAC,CAACC,KAAKC,CAAC,KAAK,uBCAzB,QAAgBC,YAAAA,CAAAA,KAAgB,OCEzB,CAAA,IAAMC,EAA8BC,EAAOC,GAAA,MAgBrCC,EAAYF,EAAOG,GAAA,MAYnBC,EAAcJ,EAAOC,GAAA,MAcrBI,EAAaL,EAAOM,EAAA,MAQpBC,EAAWP,EAAOQ,CAAA,MASlBC,EAAaT,EAAOU,MAAA,MAoBpBC,EAAWX,EAAOG,GAAA,KD3CvB,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,EAYoBzB,IAAAA,EAAS,CAAA,MAA1BgC,EAAiBhC,KAAXiC,EAAWjC,KAClBkC,EAAa,kBAAMD,EAAQ,CAAA,IAC3BE,EAAc,kBAAMF,EAAQ,CAAA,IAClC,OACIjB,EAAAF,EAAA,CACKsB,SAAA,CAAAjB,GACGH,EAACf,EAAA,CACImC,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 r,e as i}from\"../chunk-Z6ATMGBY.mjs\";import{useState as w}from\"react\";var d=r.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`,l=r.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`,p=r.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.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.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.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    &:focus-visible {\n        outline: 2px solid #252525 !important;\n        outline-offset: 2px;\n    }\n`,f=r.img`\n    max-width: 360px;\n`;import{Fragment as b,jsx as e,jsxs as a}from\"react/jsx-runtime\";var C=g=>{let{translationConfig:o={header:\"\",body:\"\",learnMore:\"\",loyaltyLogoBlack:\"\",loyaltyBanner:\"\"},learnMoreConfig:t={tagLine:\"\",cardOneDescription:\"\",cardOneVoucherAmount:\"\",cardTwoDescription:\"\",cardTwoVoucherAmount:\"\",header:\"\",loyaltyLogoWhite:\"\",loyaltyBanner:\"\",learnMore:\"\"}}=g,[m,n]=w(!1),h=()=>n(!0),u=()=>n(!1);return a(b,{children:[o&&a(d,{children:[o.loyaltyBanner&&e(l,{src:o.loyaltyBanner,alt:\"Beauty Device\"}),a(p,{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:h,children:t.learnMore})]})]}),t&&e(i,{show:m,close:u,learnMoreConfig:t,translationConfig:o})]})},y=C;export{y 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 '@emotion/styled';\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    &:focus-visible {\n        outline: 2px solid #252525 !important;\n        outline-offset: 2px;\n    }\n`;\n\nexport const CardLogo = styled.img`\n    max-width: 360px;\n`;\n"]}