@nuskin/react-loyalty-elements 1.1.0-loyalty-mvp.18 → 1.1.0-loyalty-mvp.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/CircularProgressBar/SubscriptionRewardMobile.spec.tsx +20 -9
  3. package/src/CircularProgressBar/SubscriptionRewardMobile.tsx +7 -3
  4. package/src/SubscriptionRewardBanner/SubscriptionRewardBanner.tsx +1 -0
  5. package/src/SubscriptionRewardModal/SubscriptionRewardModal.tsx +21 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuskin/react-loyalty-elements",
3
- "version": "1.1.0-loyalty-mvp.18",
3
+ "version": "1.1.0-loyalty-mvp.20",
4
4
  "description": "A React based component library for reusable Nextgen Loyalty component",
5
5
  "main": "src/common/index.ts",
6
6
  "repository": {
package/src/CircularProgressBar/SubscriptionRewardMobile.spec.tsx CHANGED
@@ -52,11 +52,6 @@ describe('SubscriptionRewardMobile Component', () => {
52
52
  }
53
53
  };
54
54
 
55
- test('renders without crashing', () => {
56
- render(<SubscriptionRewardMobile {...defaultProps} />);
57
- expect(screen.getByText('Test Title')).toBeInTheDocument();
58
- });
59
-
60
55
  test('displays the correct popup text when voucherValue is equal to maxVoucher', () => {
61
56
  render(<SubscriptionRewardMobile {...defaultProps} voucherValue={150} notQualifyForRewardThisMonth={false} />);
62
57
  expect(screen.getByText(defaultProps.learnMoreConfig.learnMore)).toBeInTheDocument();
@@ -81,7 +76,7 @@ describe('SubscriptionRewardMobile Component', () => {
81
76
 
82
77
  test('displays the correct amount in the progress bar center when voucherValue is not empty', () => {
83
78
  render(<SubscriptionRewardMobile {...defaultProps} voucherValue={50} />);
84
- expect(screen.getByText('$ 50')).toBeInTheDocument();
79
+ expect(screen.getByText('$50')).toBeInTheDocument();
85
80
  });
86
81
 
87
82
  test('displays the correct approximate total text when notQualifyForRewardThisMonth is true', () => {
@@ -97,7 +92,7 @@ describe('SubscriptionRewardMobile Component', () => {
97
92
 
98
93
  test('does not show the progress bar center when voucherValue is empty', () => {
99
94
  render(<SubscriptionRewardMobile {...defaultProps} voucherValue="" />);
100
- expect(screen.queryByText('$ 50')).toBeNull();
95
+ expect(screen.queryByText('$50')).toBeNull();
101
96
  });
102
97
 
103
98
  test('displays the voucher earned text when value is equal to maxMonths', () => {
@@ -114,6 +109,22 @@ describe('SubscriptionRewardMobile Component', () => {
114
109
 
115
110
  test('does not show progress bar center text when voucherValue is empty', () => {
116
111
  render(<SubscriptionRewardMobile {...defaultProps} voucherValue="" />);
117
- expect(screen.queryByText('$ 50')).toBeNull();
112
+ expect(screen.queryByText('$50')).toBeNull();
113
+ });
114
+
115
+ // New test cases
116
+ test('displays the correct popup text when voucherValue is equal to minVoucher', () => {
117
+ render(<SubscriptionRewardMobile {...defaultProps} voucherValue={50} notQualifyForRewardThisMonth={false} />);
118
+ expect(screen.getByText(defaultProps.translationConfig.learn3xMore)).toBeInTheDocument();
119
+ });
120
+
121
+ test('displays the correct message when notQualifyForRewardThisMonth is true and voucherValue is not empty', () => {
122
+ render(<SubscriptionRewardMobile {...defaultProps} notQualifyForRewardThisMonth={true} voucherValue={50} />);
123
+ expect(screen.getByText(defaultProps.translationConfig.notQualify)).toBeInTheDocument();
124
+ });
125
+
126
+ test('displays the correct message when notQualifyForRewardThisMonth is true and voucherValue is empty', () => {
127
+ render(<SubscriptionRewardMobile {...defaultProps} notQualifyForRewardThisMonth={true} voucherValue="" />);
128
+ expect(screen.getByText(defaultProps.translationConfig.notQualify)).toBeInTheDocument();
118
129
  });
119
- });
130
+ });
package/src/CircularProgressBar/SubscriptionRewardMobile.tsx CHANGED
@@ -111,6 +111,10 @@ class SubscriptionRewardMobile extends React.Component<RewardProgressBarProps> {
111
111
  currency_symbol: '',
112
112
  estimated_running_subscription_spend: ''
113
113
  });
114
+ const voucherTargetAmount = this.replacePlaceholders(translationConfig.voucherTargetAmount, {
115
+ currency_symbol: '',
116
+ voucher_amount: '',
117
+ });
114
118
 
115
119
  return (
116
120
  <LoyaltyProgressSubcontainer>
@@ -149,14 +153,14 @@ class SubscriptionRewardMobile extends React.Component<RewardProgressBarProps> {
149
153
  className="center-value-progress-bar-price"
150
154
  variant="title-l"
151
155
  weight="bold"
152
- >{`$ ${voucherValue}`}</NsTypography>
156
+ >{`$${voucherValue}`}</NsTypography>
153
157
  <NsTypography
154
158
  variant="label-s"
155
159
  weight="bold"
156
160
  component="div"
157
161
  className="center-value-progress-bar-voucher"
158
162
  >
159
- {title}
163
+ {voucherTargetAmount}
160
164
  </NsTypography>
161
165
  </ProgressBarCenter>
162
166
  ) : (
@@ -235,7 +239,7 @@ class SubscriptionRewardMobile extends React.Component<RewardProgressBarProps> {
235
239
  noSpacing
236
240
  >
237
241
  {approximateMonthlyText}{' '}
238
- </NsTypography>{' '}
242
+ </NsTypography>&nbsp;
239
243
  <NsTypography weight="bold" className="button-price" variant="body-s" component="span">
240
244
  ${amountShow}
241
245
  </NsTypography>
package/src/SubscriptionRewardBanner/SubscriptionRewardBanner.tsx CHANGED
@@ -56,6 +56,7 @@ const SubscriptionRewardBanner = (props: RewardBannerProps) => {
56
56
  <SubscriptionRewardModal
57
57
  show={show}
58
58
  close={handleClose}
59
+ learnMoreConfig={learnMoreConfig}
59
60
  translationConfig={translationConfig}
60
61
  />
61
62
  </>
package/src/SubscriptionRewardModal/SubscriptionRewardModal.tsx CHANGED
@@ -28,9 +28,18 @@ export default function SubscriptionRewardModal(props: RewardModalProps) {
28
28
  loyaltyLogoWhite: '',
29
29
  loyaltyBanner: '',
30
30
  learnMore: '',
31
- learnMoreLink: ''
32
- }
33
- } = props;
31
+ }, learnMoreConfig = {
32
+ tagLine: '',
33
+ cardOneDescription: '',
34
+ cardOneVoucherAmount: '',
35
+ cardTwoDescription: '',
36
+ cardTwoVoucherAmount: '',
37
+ header: '',
38
+ loyaltyLogoWhite: '',
39
+ loyaltyBanner: '',
40
+ learnMore: '',
41
+ learnMoreLink: ''
42
+ } } = props;
34
43
  return (
35
44
  <SubscriptionRewardPopup
36
45
  variant="default"
@@ -43,11 +52,11 @@ export default function SubscriptionRewardModal(props: RewardModalProps) {
43
52
  children: (
44
53
  <HeaderSection>
45
54
  <SubscriptionRewardImg>
46
- <img height={'330px'} width={'690px'} src={translationConfig.loyaltyBanner} />
55
+ <img height={'330px'} width={'690px'} src={learnMoreConfig.loyaltyBanner} />
47
56
  </SubscriptionRewardImg>
48
57
  <HeaderDiscription>
49
58
  <span>{translationConfig.header}</span>
50
- <img height={'38.88px'} width={'360px'} src={translationConfig.loyaltyLogoWhite} />
59
+ <img height={'38.88px'} width={'360px'} src={learnMoreConfig.loyaltyLogoWhite} />
51
60
  </HeaderDiscription>
52
61
  </HeaderSection>
53
62
  ),
@@ -56,20 +65,20 @@ export default function SubscriptionRewardModal(props: RewardModalProps) {
56
65
  show: show,
57
66
  children: (
58
67
  <ModalBody>
59
- <VoucherHeading>{translationConfig.tagLine}</VoucherHeading>
68
+ <VoucherHeading>{learnMoreConfig.tagLine}</VoucherHeading>
60
69
  <VoucherDiv>
61
70
  <VoucherIcon>
62
71
  <PromoLayoutIcon />
63
- {translationConfig.cardOneVoucherAmount}
72
+ {learnMoreConfig.cardOneVoucherAmount}
64
73
  </VoucherIcon>
65
- <VoucherDercription>{translationConfig.cardOneDescription}</VoucherDercription>
74
+ <VoucherDercription>{learnMoreConfig.cardOneDescription}</VoucherDercription>
66
75
  </VoucherDiv>
67
76
  <VoucherDiv>
68
77
  <VoucherIcon>
69
78
  <PromoLayoutIcon />
70
- {translationConfig.cardTwoVoucherAmount}
79
+ {learnMoreConfig.cardTwoVoucherAmount}
71
80
  </VoucherIcon>
72
- <VoucherDercription>{translationConfig.cardTwoDescription}</VoucherDercription>
81
+ <VoucherDercription>{learnMoreConfig.cardTwoDescription}</VoucherDercription>
73
82
  </VoucherDiv>
74
83
  </ModalBody>
75
84
  ),
@@ -77,8 +86,8 @@ export default function SubscriptionRewardModal(props: RewardModalProps) {
77
86
  footer={{
78
87
  children: (
79
88
  <Footer>
80
- <a href={translationConfig.learnMoreLink} target="_blank">
81
- {translationConfig.learnMore}
89
+ <a href={learnMoreConfig.learnMoreLink} target="_blank">
90
+ {learnMoreConfig.learnMore}
82
91
  </a>
83
92
  </Footer>
84
93
  ),