@nuskin/react-loyalty-elements 1.1.0-review-comments.5 → 1.1.0-review-comments.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/react-loyalty-elements",
-    "version": "1.1.0-review-comments.5",
+    "version": "1.1.0-review-comments.6",
     "description": "A React based component library for reusable Nextgen Loyalty component",
     "types": "dist/index.d.ts",
     "main": "dist/index.js",
@@ -84,6 +84,7 @@
     },
     "files": [
         "dist",
+        "src",
         "README.md",
         "package.json"
     ],

package/src/CircularProgressBar/CircularProgressBar.styled.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+export declare const RewardProgressBarContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LoyaltyProgressSubContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Learn3XLink: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ProgressBarCenter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RewardProgressTotalContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RewardProgressTotalButtonWithIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const SeparatorCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SeparatorInnerCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/CircularProgressBar/CircularProgressBar.styled.tsx

@@ -0,0 +1,162 @@
+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) {
+        .reward-subtitle {
+            letter-spacing: 0;
+            display: flex;
+            text-align: center;
+        }
+        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: 17%;
+`;

package/src/CircularProgressBar/RadialSeparator.d.ts

@@ -0,0 +1,4 @@
+declare function RadialSeparators(props: {
+    count: number;
+}): import("react/jsx-runtime").JSX.Element[];
+export default RadialSeparators;

package/src/CircularProgressBar/RadialSeparator.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SeparatorCard, SeparatorInnerCard } from './CircularProgressBar.styled';
+
+function Separator(props: { readonly turns: number }) {
+    return (
+        <SeparatorCard
+            style={{
+                transform: `rotate(${props.turns}turn)`,
+            }}
+        >
+            <SeparatorInnerCard />
+        </SeparatorCard>
+    );
+}
+
+function RadialSeparators(props: { count: number }) {
+    const turns = 1 / props.count;
+    return Array(props.count)
+        .fill(null)
+        .map((_, index) => <Separator key={index} turns={index * turns + 0.5} />);
+}
+
+export default RadialSeparators;

package/src/CircularProgressBar/RewardProgressBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RewardProgressBarProps } from './types';
+declare class RewardProgressBar extends React.Component<RewardProgressBarProps> {
+    constructor(props: RewardProgressBarProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default RewardProgressBar;
+export { RewardProgressBar };

package/src/CircularProgressBar/RewardProgressBar.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar';
+import RadialSeparators from './RadialSeparator';
+import { FaExclamationTriangle } from 'react-icons/fa';
+import SubscriptionVoucherIcon from '../Icons/SubscriptionVoucherIcon';
+import SubscriptionVoucherIconGrey from '../Icons/SubscriptionVoucherIconGrey';
+import { IconContainer, LoyaltyProgressSubContainer, ProgressBarCenter } from './CircularProgressBar.styled';
+import RewardSubscriptionMonthDescription from './RewardSubscriptionMonthDescription';
+import { NsTypography } from '@nuskin/foundation-ui-components';
+import { RewardProgressBarProps } from './types';
+import { replacePlaceholders } from '../Utils/helper';
+
+class RewardProgressBar extends React.Component<RewardProgressBarProps> {
+    constructor(props: RewardProgressBarProps) {
+        super(props);
+    }
+
+    render() {
+        const {
+            value,
+            voucherValue,
+            maxMonths,
+            handleOpenSubscriptionRewardPopup,
+            notQualifyForRewardThisMonth,
+            translationConfig = {
+                voucherTargetAmount: '',
+                monthsComplete: '',
+                voucherEarned: '',
+                learnMore: '',
+                learn3xMore: '',
+                callToAction: '',
+                notQualify: '',
+                approximateMonthly: '',
+                approximateTotal: '',
+                currentlyTrack: '',
+                loyaltyLogoBlack: '',
+            },
+            learnMoreConfig = {
+                tagLine: '',
+                cardOneDescription: '',
+                cardOneVoucherAmount: '',
+                cardTwoDescription: '',
+                cardTwoVoucherAmount: '',
+                header: '',
+                loyaltyLogoWhite: '',
+                loyaltyBanner: '',
+                learnMore: '',
+            },
+        } = this.props;
+        const voucherTargetAmount = replacePlaceholders(translationConfig.voucherTargetAmount, {
+            currency_symbol: '',
+            voucher_amount: '',
+        });
+        return (
+            <LoyaltyProgressSubContainer>
+                <div className="reward-progress">
+                    <CircularProgressbarWithChildren
+                        value={(value / maxMonths) * 100}
+                        strokeWidth={12}
+                        background
+                        styles={buildStyles({
+                            rotation: 0.5,
+                            strokeLinecap: 'butt',
+                            backgroundColor: (() => {
+                                if (value === maxMonths && !notQualifyForRewardThisMonth) {
+                                    return 'rgb(195 240 194)';
+                                }
+                                if (notQualifyForRewardThisMonth) {
+                                    return '#fff';
+                                }
+                                return '#fff';
+                            })(),
+                            pathColor: '#6BC56A',
+                            trailColor: '#E0E0E0',
+                        })}
+                    >
+                        <RadialSeparators count={maxMonths} />
+                        {(() => {
+                            if (value === maxMonths && !notQualifyForRewardThisMonth) {
+                                return <SubscriptionVoucherIcon />;
+                            } else if (notQualifyForRewardThisMonth) {
+                                return (
+                                    <IconContainer>
+                                        <FaExclamationTriangle className="outline-exclamation-icon" color="#91ACC8" />
+                                    </IconContainer>
+                                );
+                            } else if (voucherValue != null || voucherValue != undefined) {
+                                return (
+                                    <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"
+                                        >
+                                            {voucherTargetAmount}
+                                        </NsTypography>
+                                    </ProgressBarCenter>
+                                );
+                            } else {
+                                return (
+                                    <ProgressBarCenter>
+                                        <SubscriptionVoucherIconGrey />
+                                    </ProgressBarCenter>
+                                );
+                            }
+                        })()}
+                    </CircularProgressbarWithChildren>
+                </div>
+                <RewardSubscriptionMonthDescription
+                    value={value}
+                    voucherValue={voucherValue}
+                    notQualifyForRewardThisMonth={notQualifyForRewardThisMonth}
+                    handleOpenSubscriptionRewardPopup={handleOpenSubscriptionRewardPopup}
+                    maxMonths={maxMonths}
+                    translationConfig={translationConfig}
+                    learnMoreConfig={learnMoreConfig}
+                />
+            </LoyaltyProgressSubContainer>
+        );
+    }
+}
+
+export default RewardProgressBar;
+export { RewardProgressBar };

package/src/CircularProgressBar/RewardSubscriptionMonthDescription.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RewardSubscriptionMonthDescriptionProps } from './types';
+declare class RewardSubscriptionMonthDescription extends React.Component<RewardSubscriptionMonthDescriptionProps> {
+    constructor(props: RewardSubscriptionMonthDescriptionProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default RewardSubscriptionMonthDescription;
+export { RewardSubscriptionMonthDescription };

package/src/CircularProgressBar/RewardSubscriptionMonthDescription.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Learn3XLink, StyledCard } from './CircularProgressBar.styled';
+import { RewardSubscriptionMonthDescriptionProps } from './types';
+import { replacePlaceholders, currencySymbol } from '../Utils/helper';
+
+class RewardSubscriptionMonthDescription extends React.Component<RewardSubscriptionMonthDescriptionProps> {
+    constructor(props: RewardSubscriptionMonthDescriptionProps) {
+        super(props);
+    }
+
+    render() {
+        const {
+            value,
+            voucherValue,
+            maxMonths,
+            handleOpenSubscriptionRewardPopup,
+            notQualifyForRewardThisMonth,
+            translationConfig = {
+                voucherTargetAmount: '',
+                monthsComplete: '',
+                voucherEarned: '',
+                learnMore: '',
+                learn3xMore: '',
+                callToAction: '',
+                notQualify: '',
+                approximateMonthly: '',
+                approximateTotal: '',
+                currentlyTrack: '',
+                loyaltyLogoBlack: '',
+            },
+            learnMoreConfig = {
+                tagLine: '',
+                cardOneDescription: '',
+                cardOneVoucherAmount: '',
+                cardTwoDescription: '',
+                cardTwoVoucherAmount: '',
+                header: '',
+                loyaltyLogoWhite: '',
+                loyaltyBanner: '',
+                learnMore: '',
+            },
+        } = this.props;
+
+        let popupText = '';
+        const minVoucher = 50;
+        const maxVoucher = 150;
+        if (voucherValue === minVoucher && !notQualifyForRewardThisMonth) {
+            popupText = translationConfig.learn3xMore;
+        } else if (voucherValue === maxVoucher || notQualifyForRewardThisMonth) {
+            popupText = learnMoreConfig.learnMore;
+        } else if (voucherValue === null || voucherValue === undefined) {
+            popupText = translationConfig.learnMore;
+        }
+        const monthsCompleteText = replacePlaceholders(translationConfig.monthsComplete, {
+            completed_months: value,
+            total_months: maxMonths,
+        });
+
+        const voucherEarnedText = replacePlaceholders(translationConfig.voucherEarned, {
+            currency_symbol: currencySymbol(),
+        });
+
+        return (
+            <StyledCard>
+                <img className="reward-logo" src={translationConfig.loyaltyLogoBlack} alt="Rewards Logo" />
+                {value === maxMonths ? (
+                    <div className="info-item">{voucherEarnedText}</div>
+                ) : (
+                    <div className="info-item">{monthsCompleteText}</div>
+                )}
+                <Learn3XLink id="learnMore" onClick={handleOpenSubscriptionRewardPopup}>
+                    <u>{popupText}</u>
+                </Learn3XLink>
+            </StyledCard>
+        );
+    }
+}
+
+export default RewardSubscriptionMonthDescription;
+export { RewardSubscriptionMonthDescription };

package/src/CircularProgressBar/RewardSubscriptionTotal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RewardProgressBarProps } from './types';
+declare class RewardSubscriptionTotal extends React.Component<RewardProgressBarProps> {
+    constructor(props: RewardProgressBarProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default RewardSubscriptionTotal;
+export { RewardSubscriptionTotal };

package/src/CircularProgressBar/RewardSubscriptionTotal.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { FaExclamationTriangle } from 'react-icons/fa';
+import {
+    IconContainer,
+    RewardProgressTotalButtonWithIcon,
+    RewardProgressTotalContainer,
+} from './CircularProgressBar.styled';
+import { NsTypography } from '@nuskin/foundation-ui-components';
+import { RewardProgressBarProps } from './types';
+import Info from '../Icons/Info';
+import { Tooltip, IconButton } from '@mui/material';
+import { replacePlaceholders } from '../Utils/helper';
+class RewardSubscriptionTotal extends React.Component<RewardProgressBarProps> {
+    constructor(props: RewardProgressBarProps) {
+        super(props);
+    }
+
+    render() {
+        const {
+            value,
+            voucherValue,
+            maxMonths,
+            notQualifyForRewardThisMonth,
+            amountShow,
+            translationConfig = {
+                voucherTargetAmount: '',
+                monthsComplete: '',
+                voucherEarned: '',
+                learnMore: '',
+                learn3xMore: '',
+                callToAction: '',
+                notQualify: '',
+                approximateMonthly: '',
+                approximateTotal: '',
+                currentlyTrack: '',
+                loyaltyLogoBlack: '',
+                estimateDisclaimer: '',
+            },
+            storeConfig = {
+                tiers: [
+                    {
+                        consecutive_months: 0,
+                        min_spend: 0,
+                        max_spend: 0,
+                        promo_code: '',
+                    },
+                    {
+                        consecutive_months: 0,
+                        min_spend: 0,
+                        promo_code: '',
+                    },
+                ],
+            },
+        } = this.props;
+
+        const currentlyTrackText = replacePlaceholders(translationConfig.currentlyTrack, {
+            currency_symbol: '$',
+            currency_amount: voucherValue,
+        });
+        const approximateTotalText = replacePlaceholders(translationConfig.approximateTotal, {
+            currency_symbol: '',
+            projected_month_spend: '',
+        });
+        const minAmount = storeConfig?.tiers?.[0]?.min_spend ?? 0;
+        const callToActionText = replacePlaceholders(translationConfig.callToAction, {
+            currency_symbol: '$',
+            current_spend_target: minAmount,
+        });
+        const approximateMonthlyText = replacePlaceholders(translationConfig.approximateMonthly, {
+            currency_symbol: '',
+            estimated_running_subscription_spend: '',
+        });
+        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
+                            >
+                                {translationConfig.notQualify}
+                            </NsTypography>
+                        </>
+                    ) : (
+                        <>
+                            <NsTypography
+                                variant="body-s"
+                                weight="normal"
+                                colorOverride="#252525"
+                                className="reward-subtitle"
+                                component="span"
+                                noSpacing
+                            >
+                                {approximateMonthlyText}
+                            </NsTypography>
+                            &nbsp;
+                            <NsTypography weight="bold" className="button-price" variant="body-s" component="span">
+                                {`$${amountShow}`}
+                            </NsTypography>
+                            <IconContainer>
+                                <Tooltip
+                                    slotProps={{
+                                        tooltip: {
+                                            sx: {
+                                                color: '#FFFFFF',
+                                                backgroundColor: '#252525',
+                                                fontFamily: 'Inter',
+                                                fontWeight: 400,
+                                                fontSize: '14px',
+                                                lineHeight: '20px',
+                                                '& .MuiTooltip-arrow': {
+                                                    color: '#252525',
+                                                },
+                                            },
+                                        },
+                                    }}
+                                    title={translationConfig.estimateDisclaimer}
+                                    arrow
+                                    placement="top"
+                                >
+                                    <span className="info-icon">
+                                        <IconButton>
+                                            <Info />
+                                        </IconButton>
+                                    </span>
+                                </Tooltip>
+                            </IconContainer>
+                        </>
+                    )}
+                </RewardProgressTotalButtonWithIcon>
+                {(() => {
+                    if (value === maxMonths) {
+                        return '';
+                    } else if (notQualifyForRewardThisMonth) {
+                        return (
+                            <NsTypography
+                                variant="body-s"
+                                weight="normal"
+                                className="reward-subtitle"
+                                colorOverride="#252525"
+                                component="div"
+                            >
+                                {approximateTotalText}&nbsp;
+                                <NsTypography component="span" className="button-price" variant="body-s" weight="bold">
+                                    {` $${amountShow}`}
+                                </NsTypography>
+                            </NsTypography>
+                        );
+                    } else if (voucherValue != null || voucherValue != undefined) {
+                        return (
+                            <NsTypography
+                                variant="body-s"
+                                weight="bold"
+                                className="reward-subtitle"
+                                colorOverride="#252525"
+                            >
+                                {currentlyTrackText}
+                            </NsTypography>
+                        );
+                    } else {
+                        return (
+                            <NsTypography
+                                variant="body-s"
+                                weight="bold"
+                                className="reward-subtitle"
+                                colorOverride="#252525"
+                            >
+                                {callToActionText}
+                            </NsTypography>
+                        );
+                    }
+                })()}
+            </RewardProgressTotalContainer>
+        );
+    }
+}
+
+export default RewardSubscriptionTotal;
+export { RewardSubscriptionTotal };