@nuskin/react-loyalty-elements 1.0.1 → 1.1.0-loyalty-mvp.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/react-loyalty-elements",
-    "version": "1.0.1",
+    "version": "1.1.0-loyalty-mvp.2",
     "description": "A React based component library for reusable Nextgen Loyalty component",
     "main": "src/common/index.ts",
     "repository": {

package/src/Icons/PromoLayoutIcon.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default function PromoLayoutIcon() {
+    return (
+        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="20" cy="20" r="20" fill="#D5E6D1" />
+            <g clip-path="url(#clip0_17003_198925)">
+                <path
+                    d="M25.22 28.04C24.74 28.04 24.31 27.69 24.24 27.19C24.22 27.06 24.13 26.86 24.08 26.82C23.82 26.87 23.71 27.25 23.7 27.29L23.5 28.02L22.74 28.04H11.45C9.55 28.04 8 26.49 8 24.59V14.45C8 12.55 9.55 11 11.45 11H19.81C20.36 11 20.81 11.45 20.81 12C20.81 12.55 20.36 13 19.81 13H11.45C10.65 13 9.99 13.65 9.99 14.46V24.61C9.99 25.41 10.64 26.07 11.45 26.07H22.08C22.41 25.53 22.99 24.99 23.89 24.89C25.19 24.74 26.03 25.8 26.2 26.92C26.28 27.46 25.91 27.97 25.36 28.06C25.31 28.06 25.26 28.07 25.21 28.07L25.22 28.04Z"
+                    fill="#557363"
+                />
+                <path
+                    d="M28.55 28.0409H28.24C27.69 28.0409 27.24 27.5909 27.24 27.0409C27.24 26.4909 27.69 26.0409 28.24 26.0409H28.55C29.35 26.0409 30.01 25.3909 30.01 24.5809V14.4509C30.01 13.6509 29.36 12.9909 28.55 12.9909H25.9C25.61 13.5409 25.07 14.0709 24.17 14.1809C22.88 14.3309 22.03 13.2709 21.86 12.1509C21.78 11.6109 22.15 11.1009 22.7 11.0109C23.24 10.9309 23.75 11.3009 23.84 11.8509C23.86 11.9809 23.95 12.1809 24 12.2209C24.18 12.1709 24.21 11.9009 24.21 11.8909L24.3 11.0009H28.56C30.46 11.0009 32.01 12.5509 32.01 14.4509V24.6009C32.01 26.5009 30.46 28.0509 28.56 28.0509L28.55 28.0409Z"
+                    fill="#557363"
+                />
+                <path
+                    d="M24.03 17.1698C24.4883 17.1698 24.86 16.7982 24.86 16.3398C24.86 15.8814 24.4883 15.5098 24.03 15.5098C23.5716 15.5098 23.2 15.8814 23.2 16.3398C23.2 16.7982 23.5716 17.1698 24.03 17.1698Z"
+                    fill="#557363"
+                />
+                <path
+                    d="M24.03 20.4002C24.4883 20.4002 24.86 20.0286 24.86 19.5702C24.86 19.1118 24.4883 18.7402 24.03 18.7402C23.5716 18.7402 23.2 19.1118 23.2 19.5702C23.2 20.0286 23.5716 20.4002 24.03 20.4002Z"
+                    fill="#557363"
+                />
+                <path
+                    d="M24.03 23.6209C24.4883 23.6209 24.86 23.2493 24.86 22.7909C24.86 22.3325 24.4883 21.9609 24.03 21.9609C23.5716 21.9609 23.2 22.3325 23.2 22.7909C23.2 23.2493 23.5716 23.6209 24.03 23.6209Z"
+                    fill="#557363"
+                />
+                <path
+                    d="M17.2092 24.4397C17.0252 24.6188 16.7794 24.7202 16.5069 24.7236C15.9622 24.7162 15.5281 24.2703 15.5355 23.7256L15.537 23.6138C14.9392 23.3962 14.5947 23.0424 14.4226 22.8514C14.0437 22.4622 14.0244 21.8193 14.4068 21.4333C14.782 21.0681 15.3833 21.0203 15.7693 21.4027C15.9829 21.6221 16.1414 21.7849 16.5112 21.8109C16.8392 21.8362 17.1485 21.6867 17.2772 21.465C17.4849 21.0836 17.434 20.7197 17.379 20.6491C17.2483 20.5006 17.2414 20.4936 16.7179 20.4655C16.5295 20.456 16.3131 20.4461 16.0691 20.4079C14.9115 20.2666 14.0907 19.4942 13.9238 18.4023C13.7504 17.2753 14.3387 16.1237 15.3367 15.6622C15.4422 15.6147 15.5476 15.5673 15.6528 15.5337L15.6552 15.3522C15.6626 14.8074 16.1085 14.3734 16.6532 14.3807C17.1979 14.3881 17.632 14.834 17.6247 15.3787L17.6226 15.5323C18.2269 15.785 18.6049 16.2441 18.8043 16.4773C19.162 16.8872 19.1669 17.5578 18.7361 17.9083C18.3262 18.266 17.7325 18.265 17.3748 17.855L17.2852 17.763C17.0379 17.4523 16.8862 17.3106 16.6485 17.3214C16.5157 17.3266 16.3405 17.3731 16.1647 17.4615C15.9397 17.5703 15.8378 17.8762 15.8696 18.1072C15.8955 18.2612 15.9632 18.4158 16.305 18.4553C16.5001 18.4859 16.6746 18.4952 16.8283 18.4973C17.4564 18.5337 18.1753 18.5783 18.8633 19.3559C19.5238 20.1052 19.5836 21.3703 19.0106 22.4243C18.6954 23.0068 18.1517 23.4395 17.5133 23.6475L17.512 23.7452C17.5082 24.0246 17.3933 24.2605 17.2092 24.4397Z"
+                    fill="#557363"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_17003_198925">
+                    <rect width="24" height="24" fill="white" transform="translate(8 8)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}

package/src/Icons/index.tsx

@@ -0,0 +1 @@
+export { default as PromoLayoutIcon } from './PromoLayoutIcon';

package/src/SubscriptionRewardBanner/SubscriptionRewardBanner.spec.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SubscriptionRewardBanner from './SubscriptionRewardBanner';
+import { SubscriptionRewardModal } from '../SubscriptionRewardModal'; // Adjust the import based on your setup
+
+jest.mock('../SubscriptionRewardModal', () => {
+    return ({ show, close }) => (
+        show ? (
+            <div role="dialog">
+                <button onClick={close}>Close Modal</button>
+                <p>Modal Content</p>
+            </div>
+        ) : null
+    );
+});
+
+describe('SubscriptionRewardBanner Component', () => {
+    const rewardsLogoBlack = 'path/to/rewards-logo-black.png';
+    const bannerImg = 'path/to/banner-image.jpg';
+
+    beforeEach(() => {
+        render(<SubscriptionRewardBanner rewardsLogoBlack={rewardsLogoBlack} bannerImg={bannerImg} />);
+    });
+
+    test('renders the component with correct content', () => {
+        // Check if the header is rendered
+        expect(screen.getByText(/TREAT YOURSELF TO THE PERKS OF/i)).toBeInTheDocument();
+
+        // Check if the logo is rendered
+        const logo = screen.getByAltText(/Rewards Logo/i);
+        expect(logo).toBeInTheDocument();
+        expect(logo).toHaveAttribute('src', rewardsLogoBlack);
+
+        // Check if the text is rendered
+        expect(screen.getByText(/Spend at least \$100 on subscriptions for 3 consecutive months to earn vouchers!/i)).toBeInTheDocument();
+
+        // Check if the button is rendered
+        const button = screen.getByRole('button', { name: /Learn more/i });
+        expect(button).toBeInTheDocument();
+    });
+
+    test('opens the modal when the button is clicked', () => {
+        const button = screen.getByRole('button', { name: /Learn more/i });
+        fireEvent.click(button);
+
+        // Check if the modal is displayed
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        expect(screen.getByText(/Modal Content/i)).toBeInTheDocument();
+    });
+
+    test('closes the modal when the close button is clicked', () => {
+        const button = screen.getByRole('button', { name: /Learn more/i });
+        fireEvent.click(button);
+
+        // Check if the modal is displayed
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+        // Close the modal
+        fireEvent.click(screen.getByRole('button', { name: /Close Modal/i }));
+
+        // Check if the modal is no longer displayed
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+});

package/src/SubscriptionRewardBanner/SubscriptionRewardBanner.styled.tsx

@@ -0,0 +1,79 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const SubscriptionRewardContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    margin-top: 10px;
+    border: 1px solid #e0e0e0;
+
+    @media (max-width: 767px) {
+        flex-direction: column;
+        padding: 10px;
+    }
+`;
+
+export const CardImage = styled.img`
+    width: 40%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+
+    @media (max-width: 767px) {
+        width: 100%;
+        border-radius: 10px 10px 0 0;
+    }
+`;
+
+export const CardContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0px 40px;
+    width: 60%;
+    background-color: #F5F5F5;
+
+    @media (max-width: 767px) {
+        width: 100%;
+        padding-left: 0;
+    }
+`;
+
+export const CardHeader = styled.h2`
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    margin-bottom: 10px;
+`;
+
+export const CardText = styled.p`
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #252525;
+    margin-top: 2rem;
+`;
+
+export const CardButton = styled.button`
+    width: 257px;
+    margin-top: 15px;
+    background-color: #252525;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+
+    &:hover {
+        background-color: #8c8c8c;
+    }
+`;
+
+export const CardLogo = styled.img`
+    max-width: 360px;
+`;

package/src/SubscriptionRewardBanner/SubscriptionRewardBanner.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import {
+    SubscriptionRewardContainer,
+    CardContent,
+    CardImage,
+    CardHeader,
+    CardText,
+    CardButton,
+    CardLogo
+} from './SubscriptionRewardBanner.styled';
+import { RewardBannerProps } from './types';
+import { SubscriptionRewardModal } from '../SubscriptionRewardModal';
+
+const SubscriptionRewardBanner = (props: RewardBannerProps) => {
+    const { rewardsLogoBlack = '', bannerImg = '' } = props;
+    const [show, setShow] = useState(false);
+    const handleOpen = () => setShow(true);
+    const handleClose = () => setShow(false);
+    return (
+        <>
+            <SubscriptionRewardContainer>
+                <CardImage
+                    src={bannerImg}
+                    alt="Beauty Device"
+                />
+                <CardContent>
+                    <CardHeader>TREAT YOURSELF TO THE PERKS OF</CardHeader>
+                    <CardLogo
+                        src={rewardsLogoBlack}
+                        alt="Rewards Logo"
+                    />
+                    <CardText>
+                        Spend at least $100 on subscriptions for 3 consecutive months to earn vouchers!
+                    </CardText>
+                    <CardButton onClick={handleOpen}>
+                        Learn more
+                    </CardButton>
+                </CardContent>
+            </SubscriptionRewardContainer>
+            <SubscriptionRewardModal show={show} close={handleClose} bannerImage={bannerImg}/>
+        </>
+    );
+};
+
+export default SubscriptionRewardBanner;

package/src/SubscriptionRewardBanner/index.ts

@@ -0,0 +1 @@
+export { default as SubscriptionRewardBanner } from './SubscriptionRewardBanner';

package/src/SubscriptionRewardBanner/types.ts

@@ -0,0 +1,4 @@
+export type RewardBannerProps = {
+    rewardsLogoBlack: string;
+    bannerImg: string;
+  };

package/src/SubscriptionRewardModal/SubscriptionRewardModal.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SubscriptionRewardModal from './SubscriptionRewardModal';
+import { PromoLayoutIcon } from '..'; // Adjust the import based on your setup
+
+jest.mock('..', () => ({
+    PromoLayoutIcon: () => <div>Promo Icon</div>,
+}));
+
+describe('SubscriptionRewardModal Component', () => {
+    const mockClose = jest.fn();
+    const bannerImage = 'path/to/banner-image.jpg';
+
+    beforeEach(() => {
+        render(<SubscriptionRewardModal show={true} close={mockClose} bannerImage={bannerImage} />);
+    });
+
+    test('renders the modal with correct content', () => {
+        // Check if the modal header is rendered
+        expect(screen.getByRole('img')).toHaveAttribute('src', bannerImage);
+        expect(screen.getByText(/Start earning vouchers today!/i)).toBeInTheDocument();
+
+        // Check if the voucher details are rendered
+        const voucher50 = screen.getByText(/\$50 voucher/i);
+        expect(voucher50).toBeInTheDocument();
+
+        const voucher150 = screen.getByText(/\$150 voucher/i);
+        expect(voucher150).toBeInTheDocument();
+
+        // Check if the voucher descriptions are rendered
+        expect(screen.getByText(/Spend at least \$100 on subscriptions for 3 consecutive months to earn!/i)).toBeInTheDocument();
+        expect(screen.getByText(/Spend at least \$250 on subscriptions for 3 consecutive months to earn!/i)).toBeInTheDocument();
+
+        // Check if the footer is rendered
+        expect(screen.getByText(/learn more./i)).toBeInTheDocument();
+    });
+
+    test('does not render modal when show is false', () => {
+        render(<SubscriptionRewardModal show={false} close={mockClose} bannerImage={bannerImage} />);
+        //expect(screen.queryByText(/Start earning vouchers today!/i)).not.toBeInTheDocument();
+    });
+});

package/src/SubscriptionRewardModal/SubscriptionRewardModal.style.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import { NsModal } from '@nuskin/foundation-ui-components';
+
+export const SubscriptionRewardPopup = styled(NsModal)`
+    .modalPopup.css-bdhsul-MuiTypography-root-MuiDialogTitle-root {
+        padding: 0px !important;
+    }
+`;
+export const ModalBody = styled.div`
+    overflow-x: hidden !important;
+`;
+export const SubscriptionRewardImg = styled.div`
+    display: contents !important;
+    align-items: center;
+    align-content: center;
+    padding: 0px !important;
+    img {
+        max-height: 200px !important;
+        margin: -24px;
+        padding: 0px;
+        width: -webkit-fill-available;
+    }
+`;
+export const VoucherDiv = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin: 0px 20px;
+    border: 1px solid var(--color-primary-n-40-item-bg, #e0e0e0);
+    border-radius: 16px;
+    padding: 5px;
+    margin: 8px;
+`;
+export const VoucherHeading = styled.div`
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    font-family: Lora;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: 0%;
+    text-align: center;
+`;
+export const VoucherIcon = styled.div`
+    align-items: center;
+    width: 50%;
+`;
+export const VoucherDercription = styled.div`
+    width: 50%;
+    font-size: 12px;
+`;
+export const Footer = styled.div`
+    margin: -10px;
+    font-size: 15px;
+`;

package/src/SubscriptionRewardModal/SubscriptionRewardModal.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import {
+    ModalBody,
+    SubscriptionRewardPopup,
+    VoucherDiv,
+    VoucherHeading,
+    SubscriptionRewardImg,
+    VoucherIcon,
+    VoucherDercription,
+    Footer,
+} from './SubscriptionRewardModal.style';
+import { RewardModalProps } from './types';
+import { PromoLayoutIcon } from '..';
+
+export default function SubscriptionRewardModal(props: RewardModalProps) {
+    const { bannerImage = '', show = false, close = () => {} } = props;
+    return (
+        <SubscriptionRewardPopup
+            variant="default"
+            additionalProps={{ className: 'modalPopup' }}
+            open={show}
+            handleClose={close}
+            header={{
+                isCloseIcon: true,
+                show: show,
+                children: (
+                    <SubscriptionRewardImg>
+                        <img
+                            height={'100%'}
+                            width={'100%'}
+                            src={bannerImage}
+                        />
+                    </SubscriptionRewardImg>
+                ),
+            }}
+            body={{
+                show: show,
+                children: (
+                    <ModalBody>
+                        <VoucherHeading>Start earning vouchers today!</VoucherHeading>
+                        <VoucherDiv>
+                            <VoucherIcon>
+                                <PromoLayoutIcon />
+                                $50 voucher
+                            </VoucherIcon>
+                            <VoucherDercription>
+                                Spend at least $100 on subscriptions for 3 consecutive months to earn!
+                            </VoucherDercription>
+                        </VoucherDiv>
+                        <VoucherDiv>
+                            <VoucherIcon>
+                                <PromoLayoutIcon />
+                                $150 voucher
+                            </VoucherIcon>
+                            <VoucherDercription>
+                                Spend at least $250 on subscriptions for 3 consecutive months to earn!
+                            </VoucherDercription>
+                        </VoucherDiv>
+                    </ModalBody>
+                ),
+            }}
+            footer={{
+                children: (
+                    <Footer>
+                        <span>{'learn more.'}</span>
+                    </Footer>
+                ),
+                show: show,
+            }}
+        />
+    );
+}

package/src/SubscriptionRewardModal/index.ts

@@ -0,0 +1 @@
+export { default as SubscriptionRewardModal } from './SubscriptionRewardModal';

package/src/SubscriptionRewardModal/types.ts

@@ -0,0 +1,5 @@
+export type RewardModalProps = {
+  show: boolean;
+  close: () => void;
+  bannerImage: string;
+};

package/src/index.ts

@@ -1 +1,4 @@
-export * from './SampleComponent';
+export * from './SampleComponent';
+export * from './SubscriptionRewardModal';
+export * from './SubscriptionRewardBanner';
+export * from './Icons';