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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/react-loyalty-elements",
-    "version": "1.1.0-loyalty-exclude.2",
+    "version": "1.1.0-loyalty-mvp.6",
     "description": "A React based component library for reusable Nextgen Loyalty component",
     "main": "src/common/index.ts",
     "repository": {
@@ -30,7 +30,9 @@
     "dependencies": {
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.0.0",
+        "react-circular-progressbar": "^2.1.0"
     },
     "devDependencies": {
         "@babel/core": "^7.23.2",

package/src/CircularProgressBar/CircularProgressBar.styled.tsx

@@ -0,0 +1,157 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const RewardProgressBarContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 1.5rem;
+    margin-bottom: 20px;
+    height: 50%;
+    margin: auto;
+
+    @media (max-width: 950px) {
+        flex-direction: column;
+    }
+`;
+
+export const LoyaltyProgressSubcontainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+
+    .reward-logo {
+        width: 200px;
+        margin-bottom: 12px;
+    }
+
+    .reward-progress {
+        height: 150px;
+        width: 150px;
+    }
+    .progress-bar {
+        background-color: #e0e0e0;
+        height: 100%;
+    }
+
+    @media (max-width: 950px) {
+        flex-direction: column;
+
+        .info-container {
+            margin-left: 0px;
+            align-items: center;
+        }
+        .reward-progress-total-div {
+            margin-top: 10px;
+        }
+    }
+`;
+export const StyledCard = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 16px;
+
+    .info-item {
+        margin: 5px 0;
+        font-weight: 600;
+    }
+`;
+export const Learn3XLink = styled.div`
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+`;
+export const ProgressBarCenter = styled.div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: black;
+
+    .center-value-progress-bar-price {
+        margin: 0;
+    }
+    .center-value-progress-bar-voucher {
+        margin: 0;
+        letter-spacing: 0.01em;
+    }
+`;
+export const RewardProgressTotalContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .total-button {
+        display: flex;
+        align-items: center;
+        background-color: #e5edf6;
+        border-radius: 20px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+    }
+    .reward-subtitle {
+        letter-spacing: 0;
+        display: flex;
+    }
+
+    @media (max-width: 950px) {
+        margin-top: 10px;
+    }
+`;
+
+export const RewardProgressTotalButtonWithIcon = styled.div`
+    display: flex;
+    align-items: center;
+    background-color: #e5edf6;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    padding: 1rem;
+    margin-bottom: 14px;
+
+    @media (max-width: 950px) {
+        margin-top: 14px;
+    }
+`;
+
+export const IconContainer = styled.span`
+    .info-icon {
+        margin-left: 6px !important;
+    }
+    .loyalty-icon {
+        height: 19px !important;
+        width: 19px !important;
+        margin-left: 6px !important;
+    }
+    .loyalty-warning-icon {
+        height: 19px !important;
+        width: 19px !important;
+        margin-right: 6px !important;
+    }
+    .outline-exclamation-icon {
+        height: 48px !important;
+        width: 48px !important;
+    }
+`;
+
+export const SeparatorCard = styled.div`
+    position: absolute;
+    height: 100%;
+`;
+
+export const SeparatorInnerCard = styled.div`
+    background: #fff;
+    width: 6px;
+    height: 13%;
+`;

package/src/CircularProgressBar/RadialSeperator.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import RadialSeparators from './RadialSeprator';
+import { SeparatorCard, SeparatorInnerCard } from './CircularProgressBar.styled';
+
+// Mock the styled components to avoid rendering issues
+jest.mock('./CircularProgressBar.styled', () => ({
+    SeparatorCard: ({ style, children }: any) => <div data-testid="separator-card" style={style}>{children}</div>,
+    SeparatorInnerCard: () => <div data-testid="separator-inner-card" />,
+}));
+
+describe('RadialSeparators', () => {
+    it('renders the correct number of separators', () => {
+        const { getAllByTestId } = render(<RadialSeparators count={5} />);
+        const separators = getAllByTestId('separator-card');
+        expect(separators.length).toBe(5);
+    });
+
+    it('applies the correct rotation to each separator', () => {
+        const { getAllByTestId } = render(<RadialSeparators count={4} />);
+        const separators = getAllByTestId('separator-card');
+
+        separators.forEach((separator, index) => {
+            const expectedRotation = `${index * (1 / 4)}turn`;
+            expect(separator).toHaveStyle(`transform: rotate(${expectedRotation})`);
+        });
+    });
+
+    it('renders SeparatorInnerCard inside each SeparatorCard', () => {
+        const { getAllByTestId } = render(<RadialSeparators count={3} />);
+        const separators = getAllByTestId('separator-card');
+
+        separators.forEach((separator) => {
+            const innerCard = separator.querySelector('[data-testid="separator-inner-card"]');
+            expect(innerCard).toBeInTheDocument();
+        });
+    });
+});

package/src/CircularProgressBar/RadialSeprator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import _ from 'lodash';
+import { SeparatorCard, SeparatorInnerCard } from './CircularProgressBar.styled';
+
+function Separator(props: { turns: any; style: React.CSSProperties | undefined }) {
+    return (
+        <SeparatorCard
+            style={{
+                transform: `rotate(${props.turns}turn)`,
+            }}
+        >
+            <SeparatorInnerCard />
+        </SeparatorCard>
+    );
+}
+
+function RadialSeparators(props: { count: number }) {
+  const turns = 1 / props.count;
+  return _.range(props.count).map((index) => (
+      <Separator 
+      key={index}
+      turns={index * turns} style={undefined}         
+      />
+  ));
+}
+
+export default RadialSeparators;

package/src/CircularProgressBar/RewardProgressBar.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RewardProgressBar from './RewardProgressBar';
+
+describe('RewardProgressBar Component', () => {
+    const mockProps = {
+        value: 3,
+        title: 'Monthly Reward',
+        voucherValue: 50,
+        maxMonths: 6,
+        handleOpenSubscriptionRewardPopup: jest.fn(),
+        notQualifyForRewardThisMonth: false,
+    };
+
+    test('renders correctly with given props', () => {
+        render(<RewardProgressBar {...mockProps} />);
+
+        // Check if the voucher value is displayed
+        expect(screen.getByText('$ 50')).toBeInTheDocument();
+        // Check if the title is displayed
+        expect(screen.getByText('Monthly Reward')).toBeInTheDocument();
+    });
+
+    test('displays the correct progress value', () => {
+        render(<RewardProgressBar {...mockProps} />);
+
+        // Check if the CircularProgressbar is rendered with the correct value
+        const progressBar = screen.getByRole('progressbar');
+        expect(progressBar).toHaveAttribute('aria-valuenow', '50'); // 3/6 = 50%
+    });
+
+    test('shows SubscriptionVoucherIcon when maxMonths is reached', () => {
+        const props = { ...mockProps, value: 6, notQualifyForRewardThisMonth: false };
+        render(<RewardProgressBar {...props} />);
+
+        // Check if the SubscriptionVoucherIcon is rendered
+        expect(screen.getByTestId('subscription-voucher-icon')).toBeInTheDocument();
+    });
+
+    test('shows warning icon when not qualifying for reward', () => {
+        const props = { ...mockProps, notQualifyForRewardThisMonth: true };
+        render(<RewardProgressBar {...props} />);
+
+        // Check if the warning icon is rendered using its class name
+        const warningIcon = screen.getByRole('img', { hidden: true }); // Assuming the icon is rendered as an <img>
+        expect(warningIcon).toHaveClass('outline-exclamation-icon'); // Check for the specific class
+    });
+
+    test('calls handleOpenSubscriptionRewardPopup when clicked', () => {
+        render(<RewardProgressBar {...mockProps} />);
+
+        // Simulate a click event on the RewardSubscriptionMonthDescription
+        const descriptionElement = screen.getByText('Monthly Reward'); // Adjust this to match the actual text
+        descriptionElement.click();
+
+        // Check if the function was called
+        expect(mockProps.handleOpenSubscriptionRewardPopup).toHaveBeenCalled();
+    });
+});

package/src/CircularProgressBar/RewardProgressBar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar';
+//import 'react-circular-progressbar/dist/styles.css';
+import RadialSeparators from './RadialSeprator';
+import { FaExclamationTriangle } from 'react-icons/fa';
+import SubscriptionVoucherIcon from '../Icons/SubscriptionVoucherIcon';
+import { IconContainer, LoyaltyProgressSubcontainer, ProgressBarCenter } from './CircularProgressBar.styled';
+import RewardSubscriptionMonthDescription from './RewardSubscriptionMonthDescription';
+import { NsTypography } from '@nuskin/foundation-ui-components';
+import { RewardProgressBarProps } from './type';
+
+class RewardProgressBar extends React.Component<RewardProgressBarProps> {
+    constructor(props: RewardProgressBarProps) {
+        super(props);
+    }
+
+    render() {
+        const {
+            value,
+            title,
+            voucherValue,
+            maxMonths,
+            handleOpenSubscriptionRewardPopup,
+            notQualifyForRewardThisMonth,
+        } = this.props;
+        return (
+            <>
+                <LoyaltyProgressSubcontainer>
+                    <div className="reward-progress">
+                        <CircularProgressbarWithChildren
+                            value={(value / maxMonths) * 100}
+                            strokeWidth={12}
+                            background
+                            styles={buildStyles({
+                                strokeLinecap: 'butt',
+                                backgroundColor:
+                                    value === maxMonths && !notQualifyForRewardThisMonth
+                                        ? 'rgb(195 240 194)'
+                                        : notQualifyForRewardThisMonth
+                                        ? '#fff'
+                                        : '#fff',
+                                pathColor: '#6BC56A',
+                                trailColor: '#E0E0E0',
+                            })}
+                        >
+                            <RadialSeparators count={maxMonths} />
+                            {value === maxMonths && !notQualifyForRewardThisMonth ? (
+                                <SubscriptionVoucherIcon />
+                            ) : notQualifyForRewardThisMonth ? (
+                                <IconContainer>
+                                    <FaExclamationTriangle className="outline-exclamation-icon" color="#91ACC8" />
+                                </IconContainer>
+                            ) : (
+                                <ProgressBarCenter>
+                                    <NsTypography
+                                        component="div"
+                                        className="center-value-progress-bar-price"
+                                        variant="title-l"
+                                        weight="bold"
+                                    >{`$ ${voucherValue}`}</NsTypography>
+                                    <NsTypography
+                                        variant="label-s"
+                                        weight="bold"
+                                        component="div"
+                                        className="center-value-progress-bar-voucher"
+                                    >
+                                        {title}
+                                    </NsTypography>
+                                </ProgressBarCenter>
+                            )}
+                        </CircularProgressbarWithChildren>
+                    </div>
+                    <RewardSubscriptionMonthDescription
+                        value={value}
+                        voucherValue={voucherValue}
+                        handleOpenSubscriptionRewardPopup={handleOpenSubscriptionRewardPopup}
+                        maxMonths={maxMonths}
+                    />
+                </LoyaltyProgressSubcontainer>
+            </>
+        );
+    }
+}
+
+export default RewardProgressBar;
+export { RewardProgressBar };

package/src/CircularProgressBar/RewardSubscriptionMonthDescription.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RewardSubscriptionMonthDescription from './RewardSubscriptionMonthDescription';
+
+describe('RewardSubscriptionMonthDescription', () => {
+    const defaultProps = {
+        value: 3,
+        voucherValue: 50,
+        maxMonths: 6,
+        handleOpenSubscriptionRewardPopup: jest.fn(),
+    };
+
+    it('renders without crashing', () => {
+        const { getByAltText } = render(<RewardSubscriptionMonthDescription {...defaultProps} />);
+        expect(getByAltText('Rewards Logo')).toBeInTheDocument();
+    });
+
+    it('displays the correct message when the voucher is earned', () => {
+        const { getByText } = render(<RewardSubscriptionMonthDescription {...{ ...defaultProps, value: 6 }} />);
+        expect(getByText('Congrats, you earned a $50 voucher!')).toBeInTheDocument();
+    });
+
+    it('displays the correct message when the voucher is not yet earned', () => {
+        const { getByText } = render(<RewardSubscriptionMonthDescription {...defaultProps} />);
+        expect(getByText('3 of 6 Months Completed')).toBeInTheDocument();
+    });
+
+    it('calls handleOpenSubscriptionRewardPopup when the link is clicked', () => {
+        const { getByText } = render(<RewardSubscriptionMonthDescription {...defaultProps} />);
+        const link = getByText('Learn how to 3x your voucher!');
+        fireEvent.click(link);
+        expect(defaultProps.handleOpenSubscriptionRewardPopup).toHaveBeenCalledTimes(1);
+    });
+});

package/src/CircularProgressBar/RewardSubscriptionMonthDescription.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import rewardsLogoBlack from '../images/rewards-logo-black.png';
+import { Learn3XLink, StyledCard } from './CircularProgressBar.styled';
+import { RewardSubscriptionMonthDescriptionProps } from './type';
+
+class RewardSubscriptionMonthDescription extends React.Component<RewardSubscriptionMonthDescriptionProps> {
+    constructor(props: RewardSubscriptionMonthDescriptionProps) {
+        super(props);
+    }
+
+    render() {
+        const { value, voucherValue, maxMonths, handleOpenSubscriptionRewardPopup } = this.props;
+
+        return (
+            <StyledCard>
+                <img className="reward-logo" src={rewardsLogoBlack} alt="Rewards Logo" />
+                {value === maxMonths ? (
+                    <div className="info-item">{`Congrats, you earned a $${voucherValue} voucher!`}</div>
+                ) : (
+                    <div className="info-item">{`${value} of ${maxMonths} Months Completed`}</div>
+                )}
+                <Learn3XLink onClick={handleOpenSubscriptionRewardPopup}>
+                    <u>{'Learn how to 3x your voucher!'}</u>
+                </Learn3XLink>
+            </StyledCard>
+        );
+    }
+}
+
+export default RewardSubscriptionMonthDescription;
+export { RewardSubscriptionMonthDescription };

package/src/CircularProgressBar/RewardSubscriptionTotal.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RewardSubscriptionTotal from './RewardSubscriptionTotal';
+
+describe('RewardSubscriptionTotal', () => {
+    const defaultProps = {
+        value: 1,
+        title: 'Reward Title',
+        voucherValue: 100,
+        maxMonths: 12,
+        handleOpenSubscriptionRewardPopup: jest.fn(),
+        notQualifyForRewardThisMonth: false,
+    };
+
+    test('renders the component with reward information when qualified', () => {
+        render(<RewardSubscriptionTotal {...defaultProps} />);
+
+        expect(screen.getByText(/Approximate Monthly Total:/i)).toBeInTheDocument();
+        expect(screen.getByText(/\$157.56/i)).toBeInTheDocument();
+        expect(screen.getByText(/You’re currently on track for a \$ 100 voucher!/i)).toBeInTheDocument();
+    });
+
+    test('renders warning message when not qualified for rewards', () => {
+        render(<RewardSubscriptionTotal {...defaultProps} notQualifyForRewardThisMonth={true} />);
+
+        expect(screen.getByText(/You may not qualify for rewards this month!/i)).toBeInTheDocument();
+        expect(screen.getByText(/This month’s approximate total:/i)).toBeInTheDocument();
+        expect(screen.getByText(/\$157.56/i)).toBeInTheDocument();
+    });
+
+    test('does not show voucher information when max months are reached', () => {
+        render(<RewardSubscriptionTotal {...defaultProps} value={12} />);
+
+        expect(screen.queryByText(/You’re currently on track for a/i)).not.toBeInTheDocument();
+    });
+
+    test('renders the correct voucher value', () => {
+        render(<RewardSubscriptionTotal {...defaultProps} voucherValue={200} />);
+
+        expect(screen.getByText(/You’re currently on track for a \$ 200 voucher!/i)).toBeInTheDocument();
+    });
+});

package/src/CircularProgressBar/RewardSubscriptionTotal.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { AiOutlineExclamationCircle } from 'react-icons/ai';
+import { FaExclamationTriangle } from 'react-icons/fa';
+import {
+    IconContainer,
+    RewardProgressTotalButtonWithIcon,
+    RewardProgressTotalContainer,
+} from './CircularProgressBar.styled';
+import { NsTypography } from '@nuskin/foundation-ui-components';
+import { RewardProgressBarProps } from './type';
+import Info from '../Icons/Info';
+class RewardSubscriptionTotal extends React.Component<RewardProgressBarProps> {
+    constructor(props: RewardProgressBarProps) {
+        super(props);
+    }
+
+    render() {
+        const {
+            value,
+            title,
+            voucherValue,
+            maxMonths,
+            handleOpenSubscriptionRewardPopup,
+            notQualifyForRewardThisMonth,
+        } = this.props;
+        return (
+            <>
+                <RewardProgressTotalContainer>
+                    <RewardProgressTotalButtonWithIcon>
+                        {notQualifyForRewardThisMonth ? (
+                            <>
+                                <IconContainer>
+                                    <FaExclamationTriangle className="loyalty-warning-icon" color="#4A6987" />
+                                </IconContainer>
+                                <NsTypography
+                                    variant="body-s"
+                                    weight="normal"
+                                    className="reward-subtitle"
+                                    colorOverride="#293A4A"
+                                    noSpacing
+                                >
+                                    You may not qualify for rewards this month!
+                                </NsTypography>
+                            </>
+                        ) : (
+                            <>
+                                <NsTypography
+                                    variant="body-s"
+                                    weight="normal"
+                                    colorOverride="#252525"
+                                    className="reward-subtitle"
+                                    component="span"
+                                    noSpacing
+                                >
+                                    Approximate Monthly Total:{' '}
+                                </NsTypography>{' '}
+                                <NsTypography weight="bold" className="button-price" variant="body-s" component="span">
+                                    $157.56
+                                </NsTypography>
+                                <IconContainer>
+                                    <span className="info-icon">
+                                        <Info />
+                                    </span>
+                                </IconContainer>
+                            </>
+                        )}
+                    </RewardProgressTotalButtonWithIcon>
+                    {value === maxMonths ? (
+                        ''
+                    ) : notQualifyForRewardThisMonth ? (
+                        <NsTypography
+                            variant="body-s"
+                            weight="normal"
+                            className="reward-subtitle"
+                            colorOverride="#252525"
+                            component="div"
+                        >
+                            This month’s approximate total:{' '}
+                            <NsTypography component="span" className="button-price" variant="body-s" weight="bold">
+                                $157.56
+                            </NsTypography>
+                        </NsTypography>
+                    ) : (
+                        <NsTypography
+                            variant="body-s"
+                            weight="bold"
+                            className="reward-subtitle"
+                            colorOverride="#252525"
+                        >
+                            {`You’re currently on track for a $ ${voucherValue} voucher!*`}
+                        </NsTypography>
+                    )}
+                </RewardProgressTotalContainer>
+            </>
+        );
+    }
+}
+
+export default RewardSubscriptionTotal;
+export { RewardSubscriptionTotal };

package/src/CircularProgressBar/SubscriptionReward.spec.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SubscriptionReward from './SubscriptionReward';
+import { application } from '../Utils/application';
+
+// Mock the child components
+jest.mock('./RewardProgressBar', () => () => <div>RewardProgressBar</div>);
+jest.mock('./RewardSubscriptionTotal', () => () => <div>RewardSubscriptionTotal</div>);
+jest.mock('./SubscriptionRewardMobile', () => () => <div>SubscriptionRewardMobile</div>);
+
+describe('SubscriptionReward Component', () => {
+    const mockHandleOpenSubscriptionRewardPopup = jest.fn();
+    const props = {
+        title: 'Test Title',
+        handleOpenSubscriptionRewardPopup: mockHandleOpenSubscriptionRewardPopup,
+        notQualifyForRewardThisMonth: false,
+        value: 1, // Add the required value prop
+        voucherValue: 50, // Add the required voucherValue prop
+        maxMonths: 3, // Add the required maxMonths prop
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders correctly in mobile view', () => {
+        // Mock application.isMobile to return true
+        jest.spyOn(application, 'isMobile', 'get').mockReturnValue(true);
+
+        render(<SubscriptionReward {...props} />);
+
+        expect(screen.getByText('SubscriptionRewardMobile')).toBeInTheDocument();
+        expect(screen.queryByText('RewardProgressBar')).not.toBeInTheDocument();
+        expect(screen.queryByText('RewardSubscriptionTotal')).not.toBeInTheDocument();
+    });
+
+    it('renders correctly in desktop view', () => {
+        // Mock application.isMobile to return false
+        jest.spyOn(application, 'isMobile', 'get').mockReturnValue(false);
+
+        render(<SubscriptionReward {...props} />);
+
+        expect(screen.getByText('RewardProgressBar')).toBeInTheDocument();
+        expect(screen.getByText('RewardSubscriptionTotal')).toBeInTheDocument();
+        expect(screen.queryByText('SubscriptionRewardMobile')).not.toBeInTheDocument();
+    });
+
+    it('updates value correctly', () => {
+        jest.spyOn(application, 'isMobile', 'get').mockReturnValue(false);
+        const { rerender } = render(<SubscriptionReward {...props} />);
+
+        // Check initial value
+        expect(screen.getByText('RewardProgressBar')).toBeInTheDocument();
+
+        // Simulate updating the value
+        // Note: You may need to adjust this part based on how you want to test the updateValue method
+        // This is a placeholder for how you might simulate a value change
+        // You may need to expose the updateValue method or use a different approach to test state changes
+
+        // Rerender to check if the value has updated
+        rerender(<SubscriptionReward {...props} />);
+        // Check if the state has updated (this part may need adjustment based on your implementation)
+    });
+
+    it('does not update value beyond maxMonths', () => {
+        jest.spyOn(application, 'isMobile', 'get').mockReturnValue(false);
+        const { rerender } = render(<SubscriptionReward {...props} />);
+
+        // Simulate an attempt to set value beyond maxMonths
+        // This is a placeholder for how you might simulate a value change
+        // You may need to expose the updateValue method or use a different approach to test state changes
+
+        // Rerender to check if the value has not updated
+        rerender(<SubscriptionReward {...props} />);
+        // Check if the state has not updated (this part may need adjustment based on your implementation)
+    });
+});

package/src/CircularProgressBar/SubscriptionReward.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { SubscriptionRewardModal } from '../SubscriptionRewardModal';
+import RewardProgressBar from './RewardProgressBar';
+import RewardSubscriptionTotal from './RewardSubscriptionTotal';
+import { RewardProgressBarContainer } from './CircularProgressBar.styled';
+import { RewardProgressBarProps } from './type';
+import SubscriptionRewardMobile from './SubscriptionRewardMobile';
+import {application} from '../Utils/application'
+
+
+interface SubscriptionRewardState {
+    value: number;
+    voucherValue: number;
+}
+
+class SubscriptionReward extends React.Component<RewardProgressBarProps, SubscriptionRewardState> {
+    constructor(props: RewardProgressBarProps) {
+        super(props);
+        this.state = {
+            value: 1,
+            voucherValue: 50,
+        };
+    }
+
+    updateValue = (newValue: number) => {
+        const maxMonths = 3;
+        // const maxMonths = APPConfig?.getAppConfig()?.subscriptionRewardMonths;
+        if (newValue >= 0 && newValue <= maxMonths) {
+            this.setState({ value: newValue });
+        }
+    };
+
+    render() {
+        const [show, setShow] = useState(false);
+        const handleOpen = () => setShow(true);
+        const handleClose = () => setShow(false);
+        const { title, notQualifyForRewardThisMonth } = this.props;
+        const { value, voucherValue } = this.state;
+        const maxMonths = 3;
+        // const maxMonths = APPConfig?.getAppConfig()?.subscriptionRewardMonths;
+console.log(application.isMobile,'application.isMobile')
+        return (
+            <RewardProgressBarContainer>
+                {application.isMobile ? (
+                <SubscriptionRewardMobile
+                    value={value}
+                    title={title}
+                    voucherValue={voucherValue}
+                    maxMonths={maxMonths}
+                    handleOpenSubscriptionRewardPopup={handleOpen}
+                    notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
+                />
+                ):(
+                <>
+                    <RewardProgressBar
+                        value={value}
+                        title={title}
+                        notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
+                        maxMonths={maxMonths}
+                        voucherValue={voucherValue}
+                        handleOpenSubscriptionRewardPopup={handleOpen}
+                    />
+                    <RewardSubscriptionTotal
+                        notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
+                        value={value}
+                        voucherValue={voucherValue}
+                        maxMonths={maxMonths}
+                        title={title}
+                        handleOpenSubscriptionRewardPopup={handleOpen}
+                    />
+                </>
+                )}
+                <SubscriptionRewardModal show={show} close={handleClose} />
+            </RewardProgressBarContainer>
+        );
+    }
+}
+
+export default SubscriptionReward;
+export { SubscriptionReward };

package/src/CircularProgressBar/SubscriptionRewardMobile.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SubscriptionRewardMobile from './SubscriptionRewardMobile';
+import { RewardProgressBarProps } from './type';
+
+describe('SubscriptionRewardMobile', () => {
+    const mockHandleOpenSubscriptionRewardPopup = jest.fn();
+
+    const defaultProps: RewardProgressBarProps = {
+        title: 'Monthly Reward',
+        handleOpenSubscriptionRewardPopup: mockHandleOpenSubscriptionRewardPopup,
+        notQualifyForRewardThisMonth: false,
+        value: 0,
+        voucherValue: 0,
+        maxMonths: 0
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('renders correctly with default props', () => {
+        render(<SubscriptionRewardMobile {...defaultProps} />);
+        
+        expect(screen.getByText('Monthly Reward')).toBeInTheDocument();
+        expect(screen.getByText('0 of 3 Months Completed')).toBeInTheDocument();
+        expect(screen.getByText('You’re currently on track for a $ 50 voucher!*')).toBeInTheDocument();
+        expect(screen.getByText('Learn how to 3x your voucher!')).toBeInTheDocument();
+    });
+
+    test('displays the correct message when all months are completed', () => {
+        const { rerender } = render(<SubscriptionRewardMobile {...defaultProps} />);
+        
+        // Simulate completing all months
+        rerender(<SubscriptionRewardMobile {...defaultProps} />);
+        const instance = screen.getByText('Congrats, you earned a $50 voucher!');
+        
+        expect(instance).toBeInTheDocument();
+    });
+
+    test('displays warning message when not qualifying for rewards', () => {
+        const propsWithWarning = {
+            ...defaultProps,
+            notQualifyForRewardThisMonth: true,
+        };
+
+        render(<SubscriptionRewardMobile {...propsWithWarning} />);
+        
+        expect(screen.getByText('You may not qualify for rewards this month!')).toBeInTheDocument();
+        expect(screen.getByText('This month’s approximate total:')).toBeInTheDocument();
+    });
+
+    test('calls handleOpenSubscriptionRewardPopup when Learn link is clicked', () => {
+        render(<SubscriptionRewardMobile {...defaultProps} />);
+        
+        const learnLink = screen.getByText('Learn how to 3x your voucher!');
+        fireEvent.click(learnLink);
+        
+        expect(mockHandleOpenSubscriptionRewardPopup).toHaveBeenCalledTimes(1);
+    });
+
+    test('updates the progress value correctly', () => {
+        const { rerender } = render(<SubscriptionRewardMobile {...defaultProps} />);
+        
+        // Simulate updating the value to 3
+        rerender(<SubscriptionRewardMobile {...defaultProps} />);
+        
+        // Check if the progress reflects the new value
+        expect(screen.getByText('3 of 3 Months Completed')).toBeInTheDocument();
+        expect(screen.getByText('Congrats, you earned a $50 voucher!')).toBeInTheDocument();
+    });
+});

package/src/CircularProgressBar/SubscriptionRewardMobile.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import {
+    IconContainer,
+    Learn3XLink,
+    LoyaltyProgressSubcontainer,
+    ProgressBarCenter,
+    StyledCard,
+} from './CircularProgressBar.styled';
+import { RewardProgressBarProps } from './type';
+import RadialSeparators from './RadialSeprator';
+import SubscriptionVoucherIcon from '../Icons/SubscriptionVoucherIcon';
+import { FaExclamationTriangle } from 'react-icons/fa';
+import { NsTypography } from '@nuskin/foundation-ui-components';
+import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar';
+import rewardsLogoBlack from '../images/rewards-logo-black.png';
+import { RewardProgressTotalButtonWithIcon, RewardProgressTotalContainer } from './CircularProgressBar.styled';
+import Info from '../Icons/Info';
+
+interface SubscriptionRewardState {
+    value: number;
+    voucherValue: number;
+}
+
+class SubscriptionRewardMobile extends React.Component<RewardProgressBarProps, SubscriptionRewardState> {
+    constructor(props: RewardProgressBarProps) {
+        super(props);
+        this.state = {
+            value: 1,
+            voucherValue: 50,
+        };
+    }
+
+    updateValue = (newValue: number) => {
+        const maxMonths = 3;
+        // const maxMonths = APPConfig?.getAppConfig()?.subscriptionRewardMonths;
+        if (newValue >= 0 && newValue <= maxMonths) {
+            this.setState({ value: newValue });
+        }
+    };
+
+    render() {
+        const { title, handleOpenSubscriptionRewardPopup, notQualifyForRewardThisMonth } = this.props;
+        const { value, voucherValue } = this.state;
+        const maxMonths = 3;
+        // const maxMonths = APPConfig?.getAppConfig()?.subscriptionRewardMonths;
+
+        return (
+            <LoyaltyProgressSubcontainer>
+                <StyledCard>
+                    <img className="reward-logo" src={rewardsLogoBlack} alt="Rewards Logo" />
+                </StyledCard>
+                <div className="reward-progress">
+                    <CircularProgressbarWithChildren
+                        value={(value / maxMonths) * 100}
+                        strokeWidth={12}
+                        background
+                        styles={buildStyles({
+                            strokeLinecap: 'butt',
+                            backgroundColor:
+                                value === maxMonths && !notQualifyForRewardThisMonth
+                                    ? 'rgb(195 240 194)'
+                                    : notQualifyForRewardThisMonth
+                                    ? '#fff'
+                                    : '#fff',
+                            pathColor: '#6BC56A',
+                            trailColor: '#E0E0E0',
+                        })}
+                    >
+                        <RadialSeparators count={maxMonths} />
+                        {value === maxMonths && !notQualifyForRewardThisMonth ? (
+                            <SubscriptionVoucherIcon />
+                        ) : notQualifyForRewardThisMonth ? (
+                            <IconContainer>
+                                <FaExclamationTriangle className="outline-exclamation-icon" color="#91ACC8" />
+                            </IconContainer>
+                        ) : (
+                            <ProgressBarCenter>
+                                <NsTypography
+                                    component="div"
+                                    className="center-value-progress-bar-price"
+                                    variant="title-l"
+                                    weight="bold"
+                                >{`$ ${voucherValue}`}</NsTypography>
+                                <NsTypography
+                                    variant="label-s"
+                                    weight="bold"
+                                    component="div"
+                                    className="center-value-progress-bar-voucher"
+                                >
+                                    {title}
+                                </NsTypography>
+                            </ProgressBarCenter>
+                        )}
+                    </CircularProgressbarWithChildren>
+                </div>
+                {value === maxMonths ? (
+                    <div className="info-item">{`Congrats, you earned a $${voucherValue} voucher!`}</div>
+                ) : (
+                    <div className="info-item">{`${value} of ${maxMonths} Months Completed`}</div>
+                )}
+
+                <RewardProgressTotalContainer>
+                    {value === maxMonths ? (
+                        ''
+                    ) : notQualifyForRewardThisMonth ? (
+                        <NsTypography
+                            variant="body-s"
+                            weight="normal"
+                            className="reward-subtitle"
+                            colorOverride="#252525"
+                            component="div"
+                        >
+                            This month’s approximate total:{' '}
+                            <NsTypography component="span" className="button-price" variant="body-s" weight="bold">
+                                $157.56
+                            </NsTypography>
+                        </NsTypography>
+                    ) : (
+                        <NsTypography
+                            variant="body-s"
+                            weight="bold"
+                            className="reward-subtitle"
+                            colorOverride="#252525"
+                        >
+                            {`You’re currently on track for a $ ${voucherValue} voucher!*`}
+                        </NsTypography>
+                    )}
+                    <RewardProgressTotalButtonWithIcon>
+                        {notQualifyForRewardThisMonth ? (
+                            <>
+                                <IconContainer>
+                                    <FaExclamationTriangle className="loyalty-warning-icon" color="#4A6987" />
+                                </IconContainer>
+                                <NsTypography
+                                    variant="body-s"
+                                    weight="normal"
+                                    className="reward-subtitle"
+                                    colorOverride="#293A4A"
+                                    noSpacing
+                                >
+                                    You may not qualify for rewards this month!
+                                </NsTypography>
+                            </>
+                        ) : (
+                            <>
+                                <NsTypography
+                                    variant="body-s"
+                                    weight="normal"
+                                    colorOverride="#252525"
+                                    className="reward-subtitle"
+                                    component="span"
+                                    noSpacing
+                                >
+                                    Approximate Monthly Total:{' '}
+                                </NsTypography>{' '}
+                                <NsTypography weight="bold" className="button-price" variant="body-s" component="span">
+                                    $157.56
+                                </NsTypography>
+                                <IconContainer>
+                                    <span className="info-icon">
+                                        <Info />
+                                    </span>
+                                </IconContainer>
+                            </>
+                        )}
+                    </RewardProgressTotalButtonWithIcon>
+                </RewardProgressTotalContainer>
+
+                <Learn3XLink onClick={handleOpenSubscriptionRewardPopup}>
+                    <u>{'Learn how to 3x your voucher!'}</u>
+                </Learn3XLink>
+            </LoyaltyProgressSubcontainer>
+        );
+    }
+}
+
+export default SubscriptionRewardMobile;
+export { SubscriptionRewardMobile };

package/src/CircularProgressBar/index.ts

@@ -0,0 +1,6 @@
+export { default as RadialSeprator } from './RadialSeprator';
+export { default as RewardProgressBar } from './RewardProgressBar';
+export { default as RewardSubscriptionMonthDescription } from './RewardSubscriptionMonthDescription';
+export { default as RewardSubscriptionTotal } from './RewardSubscriptionTotal';
+export { default as SubscriptionReward } from './SubscriptionReward';
+export { default as SubscriptionRewardMobile } from './SubscriptionRewardMobile';

package/src/CircularProgressBar/type.ts

@@ -0,0 +1,15 @@
+export type RewardProgressBarProps = {
+    value: number;
+    title: string;
+    voucherValue: number;
+    maxMonths: number;
+    handleOpenSubscriptionRewardPopup: () => void;
+    notQualifyForRewardThisMonth: boolean;
+};
+
+export type RewardSubscriptionMonthDescriptionProps = {
+    value: number;
+    voucherValue: number;
+    maxMonths: number;
+    handleOpenSubscriptionRewardPopup: () => void;
+};

package/src/Icons/Info.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function Info() {
+    return (
+        <svg width="19" height="19" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M0.833344 9.99967C0.833344 4.93706 4.9374 0.833008 10 0.833008C15.0626 0.833008 19.1667 4.93706 19.1667 9.99967C19.1667 15.0623 15.0626 19.1663 10 19.1663C4.9374 19.1663 0.833344 15.0623 0.833344 9.99967ZM10 2.49967C5.85787 2.49967 2.50001 5.85754 2.50001 9.99967C2.50001 14.1418 5.85787 17.4997 10 17.4997C14.1421 17.4997 17.5 14.1418 17.5 9.99967C17.5 5.85754 14.1421 2.49967 10 2.49967Z"
+                fill="#4A6987"
+            />
+            <line x1="10.1667" y1="9.375" x2="10.1667" y2="14.7917" stroke="#4A6987" stroke-width="2" />
+            <path
+                d="M10.0052 7.75009C10.6338 7.75009 11.1718 7.22807 11.1771 6.57821C11.1718 5.93901 10.6338 5.41699 10.0052 5.41699C9.35537 5.41699 8.82803 5.93901 8.83335 6.57821C8.82803 7.22807 9.35537 7.75009 10.0052 7.75009Z"
+                fill="#4A6987"
+            />
+        </svg>
+    );
+}
+
+export default Info;

package/src/Icons/SubscriptionVoucherIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+function SubscriptionVoucherIcon() {
+  return (
+    <svg
+      width="71"
+      height="42"
+      viewBox="0 0 71 42"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.32847 36.176C3.52571 36.176 2.06348 34.7138 2.06348 32.911L2.15695 28.3574L4.8277 28.4108L4.73422 32.9378C4.73422 33.2382 5.0013 33.5053 5.32847 33.5053H30.7606L34.0056 33.3584L34.1258 36.0291L30.8207 36.1827H5.32847V36.176Z"
+        fill="#405E50"
+      />
+      <path
+        d="M68.3914 12.9147H65.7207V9.1156C65.7207 8.78843 65.4536 8.52136 65.1264 8.52136L36.3491 8.48129V5.81055L65.1264 5.85061C66.9225 5.85061 68.3914 7.31284 68.3914 9.1156V12.9147Z"
+        fill="#405E50"
+      />
+      <path
+        d="M62.3222 41.6454C62.1152 41.6454 61.9082 41.6253 61.7012 41.5853L2.99822 30.2079C2.14358 30.041 1.40245 29.5536 0.915037 28.8325C0.427626 28.1114 0.24735 27.2434 0.414272 26.3821L4.94119 3.0197C5.10811 2.16506 5.59552 1.42393 6.31662 0.936522C7.03772 0.44911 7.90572 0.268835 8.76703 0.435756L67.47 11.8131C69.2394 12.1537 70.3945 13.8696 70.054 15.639L65.5271 39.0013C65.2199 40.5637 63.8512 41.6454 62.3222 41.6454ZM62.2087 38.968C62.5225 39.028 62.843 38.8211 62.9031 38.5006L67.43 15.1382C67.4901 14.8177 67.2831 14.5039 66.9626 14.4438L8.25291 3.05977C8.04593 3.0197 7.88569 3.09983 7.80556 3.15324C7.73212 3.20666 7.59858 3.32016 7.55184 3.53382L3.02493 26.8962C2.96484 27.2167 3.17182 27.5305 3.49231 27.5906L62.2087 38.968Z"
+        fill="#405E50"
+      />
+      <path
+        d="M13.5344 22.0957C13.1405 22.0957 12.7398 22.0556 12.3392 21.9822C8.95406 21.3279 6.73066 18.0362 7.385 14.651C7.70549 13.0085 8.64025 11.593 10.029 10.6582C11.4178 9.72348 13.0804 9.38296 14.7229 9.70345C16.3654 10.0239 17.7809 10.9587 18.7156 12.3475C19.6504 13.7363 19.9909 15.3988 19.6704 17.0413C19.0895 20.0125 16.4655 22.0957 13.5344 22.0957ZM13.521 12.254C12.8133 12.254 12.1189 12.461 11.5247 12.8683C10.7301 13.4024 10.196 14.217 10.009 15.1584C9.6351 17.1014 10.9037 18.9843 12.8467 19.3582C14.7896 19.7321 16.6725 18.4635 17.0464 16.5205C17.2267 15.5791 17.0331 14.6243 16.4989 13.8298C15.9648 13.0352 15.1502 12.5011 14.2088 12.3141C13.9817 12.274 13.7481 12.254 13.521 12.254Z"
+        fill="#405E50"
+      />
+      <path
+        d="M23.9338 15.4855L23.4255 18.1074L59.9361 25.1845L60.4443 22.5626L23.9338 15.4855Z"
+        fill="#405E50"
+      />
+      <path
+        d="M22.8916 19.7002L22.3838 22.3223L58.8956 29.393L59.4034 26.771L22.8916 19.7002Z"
+        fill="#405E50"
+      />
+    </svg>
+  )
+}
+
+export default SubscriptionVoucherIcon

package/src/Icons/index.tsx

@@ -1 +1,3 @@
-export { default as PromoLayoutIcon } from './PromoLayoutIcon';
+export { default as PromoLayoutIcon } from './PromoLayoutIcon';
+export * from './SubscriptionVoucherIcon';
+export * from './Info';

package/src/SubscriptionRewardBanner/SubscriptionRewardBanner.styled.tsx

@@ -18,7 +18,7 @@ export const SubscriptionRewardContainer = styled.div`
 
 export const CardImage = styled.img`
     width: 40%;
-    height: auto;
+    height: 345px;
     display: block;
     object-fit: cover;
 

package/src/Utils/application/application.ts

@@ -0,0 +1,23 @@
+const IS_BROWSER = typeof window === 'object';
+
+class ApplicationStore {
+    width = IS_BROWSER ? window.innerWidth : 0;
+
+    scroll = {
+        vertical: IS_BROWSER ? window.scrollY : 0,
+        horizontal: IS_BROWSER ? window.scrollX : 0,
+        direction: 'none',
+    };
+
+    get isMobile() {
+        return this.isPhone;
+    }
+
+    get isPhone() {
+        return IS_BROWSER ? window.innerWidth < 768 : this.width < 768;
+    }
+}
+
+const applicationContainer = new ApplicationStore();
+export { IS_BROWSER, ApplicationStore, applicationContainer, applicationContainer as application };
+export default applicationContainer;

package/src/Utils/application/index.ts

@@ -0,0 +1,2 @@
+export * from './application'
+export { default } from './application'

package/src/images.d.ts

@@ -0,0 +1,25 @@
+
+declare module '*.png' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.jpg' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.jpeg' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.gif' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}

package/src/index.ts

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