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

package/package.json

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

package/src/SubscriptionRewardModal/SubscriptionRewardModal.style.tsx

@@ -10,15 +10,12 @@ export const ModalBody = styled.div`
     overflow-x: hidden !important;
 `;
 export const SubscriptionRewardImg = styled.div`
-    display: contents !important;
+    display: flex !important;
     align-items: center;
     align-content: center;
     padding: 0px !important;
     img {
-        max-height: 200px !important;
-        margin: -24px;
         padding: 0px;
-        width: -webkit-fill-available;
     }
 `;
 export const VoucherDiv = styled.div`
@@ -52,4 +49,30 @@ export const VoucherDercription = styled.div`
 export const Footer = styled.div`
     margin: -10px;
     font-size: 15px;
+    text-decoration: underline;
+`;
+export const HeaderDiscription = styled.div`
+margin-top: -100px;
+padding: 10px;
+    span {
+        font-family: Inter;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 11%;
+        text-align: center;
+        color: #ffffff;
+        display: flex;
+        justify-content: center;
+    }
+    img {
+        width: 100%;
+        height: 100%;
+        padding: 0px 100px;
+    }
+`;
+export const HeaderSection = styled.div`
+overflow: hidden;
+margin: -24px;
+}
 `;

package/src/SubscriptionRewardModal/SubscriptionRewardModal.tsx

@@ -8,12 +8,16 @@ import {
     VoucherIcon,
     VoucherDercription,
     Footer,
+    HeaderSection,
+    HeaderDiscription,
 } from './SubscriptionRewardModal.style';
 import { RewardModalProps } from './types';
-import { PromoLayoutIcon } from '..';
+import PromoLayoutIcon from '../Icons/PromoLayoutIcon';
+import bannerImage from '../images/Rewards-Hero.jpg';
+import RewardsLogo from '../images/rewards-logo-white.png';
 
 export default function SubscriptionRewardModal(props: RewardModalProps) {
-    const { bannerImage = '', show = false, close = () => {} } = props;
+    const { show = false, close = () => {} } = props;
     return (
         <SubscriptionRewardPopup
             variant="default"
@@ -24,13 +28,15 @@ export default function SubscriptionRewardModal(props: RewardModalProps) {
                 isCloseIcon: true,
                 show: show,
                 children: (
-                    <SubscriptionRewardImg>
-                        <img
-                            height={'100%'}
-                            width={'100%'}
-                            src={bannerImage}
-                        />
-                    </SubscriptionRewardImg>
+                    <HeaderSection>
+                        <SubscriptionRewardImg>
+                            <img height={'299px'} width={'690px'} src={bannerImage} />
+                        </SubscriptionRewardImg>
+                        <HeaderDiscription>
+                            <span>TREAT YOURSELF TO THE PERKS OF</span>
+                            <img height={'38.88px'} width={'360px'} src={RewardsLogo} />
+                        </HeaderDiscription>
+                    </HeaderSection>
                 ),
             }}
             body={{
@@ -62,7 +68,12 @@ export default function SubscriptionRewardModal(props: RewardModalProps) {
             footer={{
                 children: (
                     <Footer>
-                        <span>{'learn more.'}</span>
+                        <a
+                            href={'https://www.nuskin.com/content/nuskin/en_US/nu-skin-rewards-info.html'}
+                            target="_blank"
+                        >
+                            {'Learn More'}
+                        </a>
                     </Footer>
                 ),
                 show: show,