@nuskin/react-loyalty-elements 1.1.0-loyalty-mvp.3 → 1.1.0-loyalty-exclude.1

package/package.json

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

package/src/index.ts

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

package/src/CircularProgressBar/CircularProgressBar.styled.tsx

@@ -1,157 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,31 +0,0 @@
-import React from 'react';
-import rewardsLogoBlack from 'src/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

@@ -1,42 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,75 +0,0 @@
-import React from 'react';
-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 { title, handleOpenSubscriptionRewardPopup, 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={handleOpenSubscriptionRewardPopup}
-                    notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
-                />
-                ):(
-                <>
-                    <RewardProgressBar
-                        value={value}
-                        title={title}
-                        notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
-                        maxMonths={maxMonths}
-                        voucherValue={voucherValue}
-                        handleOpenSubscriptionRewardPopup={handleOpenSubscriptionRewardPopup}
-                    />
-                    <RewardSubscriptionTotal
-                        notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
-                        value={value}
-                        voucherValue={voucherValue}
-                        maxMonths={maxMonths}
-                        title={title}
-                        handleOpenSubscriptionRewardPopup={handleOpenSubscriptionRewardPopup}
-                    />
-                </>
-                )}
-            </RewardProgressBarContainer>
-        );
-    }
-}
-
-export default SubscriptionReward;
-export { SubscriptionReward };

package/src/CircularProgressBar/SubscriptionRewardMobile.spec.tsx

@@ -1,72 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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 'src/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

@@ -1,6 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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;
-};