minor textual and style updates to affiliate pages

jam-ui/cypress/e2e/affiliates/affiliates-earnings-page.cy.js

@@ -21,7 +21,7 @@ describe('Affiliate Earnings', () => {
       }).as('fetchAllEarnings');
       cy.visit('/affiliate/earnings');
       cy.wait('@fetchAllEarnings');
-      cy.contains('No Records!');
+      cy.contains('There is no earnings data yet ');
     });
   });
 

jam-ui/cypress/e2e/affiliates/affiliates-signups-page.cy.js

@@ -22,7 +22,7 @@ describe('affiliate signups', () => {
       }).as('fetchAllSignups');
       cy.visit('/affiliate/signups');
       cy.wait('@fetchAllSignups');
-      cy.contains('No Records!');
+      cy.contains('There is no signup data yet ');
     });
   });
 

jam-ui/src/assets/scss/_user.scss

@@ -10,3 +10,4 @@
 @import './custom/form';
 @import './custom/chips';  
 @import './custom/common'; 
+@import './custom/partner_agreement_v1';

jam-ui/src/assets/scss/custom/_partner_agreement_v1.scss

@@ -0,0 +1,298 @@
+#partner-agreement-v1 {
+
+ 
+  * {
+    color:black! important;
+  }
+
+  .c1, .c20 {
+    border-bottom-color: #CCCCCC ! important;
+    border-top-color: #CCCCCC ! important;
+    border-left-color: #CCCCCC ! important;
+    border-right-color: #CCCCCC ! important;
+  }
+
+  .c12 {
+    color: #CCCCCC ! important;
+  }
+
+  ol {
+    margin: 0;
+    padding: 0
+  }
+
+  li {
+    color: #000000;
+    font-size: 10pt;
+    font-family: "Times New Roman";
+    margin-bottom: 1em;
+  }
+
+  .c1 {
+    border-bottom-width: 1pt;
+    border-top-style: solid;
+    width: 193.2pt;
+    border-right-style: solid;
+    padding: 0pt 5.8pt 0pt 5.8pt;
+    border-bottom-color: #000000;
+    border-top-width: 1pt;
+    border-bottom-style: solid;
+    vertical-align: top;
+    border-top-color: #000000;
+    border-left-color: #000000;
+    border-right-color: #000000;
+    border-left-style: solid;
+    border-right-width: 1pt;
+    border-left-width: 1pt
+  }
+
+  .c20 {
+    border-bottom-width: 1pt;
+    border-top-style: solid;
+    width: 238.2pt;
+    border-right-style: solid;
+    padding: 0pt 5.8pt 0pt 5.8pt;
+    border-bottom-color: #000000;
+    border-top-width: 1pt;
+    border-bottom-style: solid;
+    vertical-align: top;
+    border-top-color: #000000;
+    border-left-color: #000000;
+    border-right-color: #000000;
+    border-left-style: solid;
+    border-right-width: 1pt;
+    border-left-width: 1pt
+  }
+
+  .c3 {
+    padding-left: 0pt;
+    line-height: 1.0;
+    padding-top: 0pt;
+    margin-left: 36pt;
+    padding-bottom: 0pt
+  }
+
+  .c12 {
+    vertical-align: baseline;
+    color: #000000;
+    font-style: normal;
+    text-decoration: none
+  }
+
+  .c4 {
+    line-height: 1.0;
+    padding-top: 0pt;
+    text-align: left;
+    padding-bottom: 0pt
+  }
+
+  .c11 {
+    max-width: 432pt;
+    background-color: #ffffff;
+    padding: 72pt 90pt 72pt 90pt
+  }
+
+  .c2 {
+    widows: 2;
+    orphans: 2;
+    direction: ltr
+  }
+
+  .c16 {
+    margin-right: auto;
+    border-collapse: collapse;
+    margin-left: -5.8pt
+  }
+
+  .c9 {
+    line-height: 1.0;
+    padding-top: 36pt;
+    padding-bottom: 0pt
+  }
+
+  .c21 {
+    line-height: 1.0;
+    padding-top: 0pt;
+    padding-bottom: 36pt
+  }
+
+  .c15 {
+    font-size: 14pt;
+    font-family: "Calibri"
+  }
+
+  .c18 {
+    font-size: 12pt;
+    font-family: "Times New Roman"
+  }
+
+  .c6 {
+    margin: 0;
+    padding: 0
+  }
+
+  .c0 {
+    font-size: 12pt;
+    font-family: "Calibri"
+  }
+
+  .c22 {
+    font-size: 10pt;
+    font-family: "Times New Roman"
+  }
+
+  .c13 {
+    color: #000000;
+    background-color: #ffff00
+  }
+
+  .c14 {
+    font-size: 9pt;
+    font-family: "Times New Roman"
+  }
+
+  .c10 {
+    text-decoration: underline
+  }
+
+  .c17 {
+    color: #ff0000
+  }
+
+  .c7 {
+    font-weight: bold
+  }
+
+  .c19 {
+    height: 0pt
+  }
+
+  .c8 {
+    font-weight: normal
+  }
+
+  .c5 {
+    height: 10pt
+  }
+
+  .title {
+    widows: 2;
+    padding-top: 0pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: center;
+    color: #000000;
+    font-size: 14pt;
+    font-family: "Times New Roman";
+    font-weight: bold;
+    padding-bottom: 0pt;
+    page-break-after: avoid
+  }
+
+  .subtitle {
+    widows: 2;
+    padding-top: 18pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: left;
+    color: #666666;
+    font-style: italic;
+    font-size: 24pt;
+    font-family: "Georgia";
+    padding-bottom: 4pt;
+    page-break-after: avoid
+  }
+
+
+
+  p {
+    color: #000000;
+    font-size: 10pt;
+    margin: 0;
+    font-family: "Times New Roman"
+  }
+
+  h1 {
+    widows: 2;
+    padding-top: 0pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: center;
+    color: #000000;
+    font-size: 12pt;
+    font-family: "Times New Roman";
+    font-weight: bold;
+    padding-bottom: 0pt;
+    page-break-after: avoid
+  }
+
+  h2 {
+    widows: 2;
+    padding-top: 0pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: left;
+    color: #000000;
+    font-size: 10pt;
+    font-family: "Times New Roman";
+    font-weight: bold;
+    padding-bottom: 0pt;
+    page-break-after: avoid
+  }
+
+  h3 {
+    widows: 2;
+    padding-top: 0pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: left;
+    color: #000000;
+    font-size: 10pt;
+    text-decoration: underline;
+    font-family: "Times New Roman";
+    padding-bottom: 0pt;
+    page-break-after: avoid
+  }
+
+  h4 {
+    widows: 2;
+    padding-top: 12pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: left;
+    color: #000000;
+    font-size: 12pt;
+    font-family: "Times New Roman";
+    font-weight: bold;
+    padding-bottom: 2pt;
+    page-break-after: avoid
+  }
+
+  h5 {
+    widows: 2;
+    padding-top: 11pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: left;
+    color: #000000;
+    font-size: 11pt;
+    font-family: "Times New Roman";
+    font-weight: bold;
+    padding-bottom: 2pt;
+    page-break-after: avoid
+  }
+
+  h6 {
+    widows: 2;
+    padding-top: 10pt;
+    line-height: 1.0;
+    orphans: 2;
+    text-align: left;
+    color: #000000;
+    font-size: 10pt;
+    font-family: "Times New Roman";
+    font-weight: bold;
+    padding-bottom: 2pt;
+    page-break-after: avoid
+  }
+}

jam-ui/src/components/affiliate/AgreementText.js

@@ -5,7 +5,7 @@ const AgreementText = () => {
     <>
       <div id="partner-agreement-v1">
         <p className="c2">
-          <span className="c0">Updated: February 9, 2021.</span>
+          <span className="c0">Updated: November 18, 2024.</span>
         </p>
 
         <p className="c2 c5">
@@ -14,30 +14,30 @@ const AgreementText = () => {
 
         <p className="c2">
           <span className="c0">This Affiliate Agreement (this &ldquo;</span>
-          <span className="c0 c10"><u>Agreement</u></span>
+          <span className="c0 c10">Agreement</span>
           <span className="c0">
             &rdquo;) contains the terms and conditions that govern your participation in the JamKazam affiliate
             marketing program (the &ldquo;
           </span>
-          <span className="c0 c10"><u>Program</u></span>
+          <span className="c0 c10">Program</span>
           <span className="c0">&rdquo;). &ldquo;</span>
-          <span className="c0 c10"><u>JamKazam</u></span>
+          <span className="c0 c10">JamKazam</span>
           <span className="c0">&rdquo;, &ldquo;</span>
-          <span className="c0 c10"><u>we</u></span>
+          <span className="c0 c10">we</span>
           <span className="c0">,&rdquo; &ldquo;</span>
-          <span className="c0 c10"><u>us</u></span>
+          <span className="c0 c10">us</span>
           <span className="c0">,&rdquo; or &ldquo;</span>
-          <span className="c0 c10"><u>our</u></span>
+          <span className="c0 c10">our</span>
           <span className="c0">&rdquo; means JamKazam, Inc. &ldquo;</span>
-          <span className="c0 c10"><u>You</u></span>
+          <span className="c0 c10">You</span>
           <span className="c0">&rdquo; or &ldquo;</span>
-          <span className="c0 c10"><u>your</u></span>
+          <span className="c0 c10">your</span>
           <span className="c0">&rdquo; means the applicant. A &ldquo;</span>
-          <span className="c0 c10"><u>site</u></span>
+          <span className="c0 c10">site</span>
           <span className="c0">&rdquo; means a website. &ldquo;</span>
           <span className="c0 c10">JamKazam Site</span>
           <span className="c0">
-            &rdquo; means the jamkazam.com website or a JamKazam applicaion or any other site that is owned or operated
+            &rdquo; means the jamkazam.com website or a JamKazam application or any other site that is owned or operated
             by or on behalf of us and which is identified as participating in the Program in the{' '}
           </span>
           <span className="c0 c10 c17">Program Advertising Fee Schedule</span>
@@ -67,8 +67,8 @@ const AgreementText = () => {
             for Qualifying Purchases (defined in Section 7) made by your Qualifying Customers (defined in Section 7). A
             &ldquo;
           </span>
-          <span className="c0 c10">Product</span>
-          <span className="c0">&rdquo; a product or service sold on the JamKazam Site and listed in the </span>
+          <span className="c0 c10">Product is a product or service</span>
+          <span className="c0">&rdquo; sold on the JamKazam Site and listed in the </span>
           <span className="c0 c10 c17">Program Advertising Fee Schedule</span>
           <span className="c0">
             &nbsp;in Section 10. In order to facilitate your advertisement of Products, we may make available to you
@@ -533,8 +533,7 @@ const AgreementText = () => {
           <li className="c3 c2">
             <div className="c0 c8">Product: JamTracks</div>
             <div className="c2">
-              JamKazam will pay US$0.25 per JamTrack sold as a Qualifying Purchase by Qualifying Customers of these
-              Products.
+            JamKazam will pay advertising fees of 30% of the net revenues from Qualifying Purchases by Qualifying Customers of these Products.
             </div>
           </li>
         </ul>
@@ -979,7 +978,7 @@ const AgreementText = () => {
         <div>
           <p className="c2 c21">
             <span className="c8 c14">JamKazam Confidential&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-            <span className="c14 c8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;02/09/2021</span>
+            <span className="c14 c8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11/18/2024</span>
           </p>
         </div>
       </div>

jam-ui/src/components/affiliate/JKAffiliateEarning.js

@@ -13,15 +13,15 @@ const JKAffiliateEarning = ({ payment }) => {
           <td>
             {monthName(payment.month - 1)} - {payment.year}
           </td>
-          <td>
+          <td className='text-center'>
             {payment.subscriptions.map((subscription, index) => (
               <div key={index}>
                 {getDisplayName(subscription.plan)} - {subscription.count}
               </div>
             ))}
           </td>
-          <td>{payment.jamtracks_sold}</td>
-          <td>${(payment.due_amount_in_cents / 100).toFixed(2)}</td>
+          <td className='text-center'>{payment.jamtracks_sold}</td>
+          <td className='text-center'>${(payment.due_amount_in_cents / 100).toFixed(2)}</td>
         </tr>
       ) : (
         <>

jam-ui/src/components/affiliate/JKAffiliateEarnings.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { Card, CardBody, Row, Col, Alert } from 'reactstrap';
+import { Card, CardBody, Row, Col } from 'reactstrap';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { useTranslation } from 'react-i18next';
 import { getAffiliatePayments } from '../../helpers/rest';
@@ -8,8 +8,8 @@ import { isIterableArray } from '../../helpers/utils';
 import { useResponsive } from '@farfetch/react-context-responsive';
 import JKAffiliateEarningsList from './JKAffiliateEarningsList';
 import JKAffiliateEarningsSwiper from './JKAffiliateEarningsSwiper';
-
 import Loader from '../common/Loader';
+import { Link } from 'react-router-dom';
 
 const JKAffiliateEarnings = () => {
   const { t } = useTranslation('affiliate');
@@ -57,9 +57,11 @@ const JKAffiliateEarnings = () => {
         ) : (
           <Row className="p-card">
             <Col>
-              <Alert color="info" className="mb-0">
-                {t('no_records', { ns: 'common' })}
-              </Alert>
+              {/* <Alert color="info" className="mb-0"> */}
+                {t('earnings.no_earnings_data')}
+                <Link to="/affiliate/links">{t('earnings.share_affiliate_links')}</Link>
+                {t('earnings.start_to_earn')}
+              {/* </Alert> */}
             </Col>
           </Row>
         )}

jam-ui/src/components/affiliate/JKAffiliateEarningsList.js

@@ -10,9 +10,9 @@ const JKAffiliateEarningsList = ({ payments }) => {
       <thead>
         <tr>
           <th>{t('earnings.list.header.date')}</th>
-          <th>{t('earnings.list.header.subscriptions')}</th>
-          <th>{t('earnings.list.header.jamtracks')}</th>
-          <th>{t('earnings.list.header.earnings')}</th>
+          <th className='text-center'>{t('earnings.list.header.subscriptions')}</th>
+          <th className='text-center'>{t('earnings.list.header.jamtracks')}</th>
+          <th className='text-center'>{t('earnings.list.header.earnings')}</th>
         </tr>
       </thead>
       <tbody>

jam-ui/src/components/affiliate/JKAffiliateSignup.js

@@ -9,8 +9,8 @@ const JKAffiliateSignup = ({signup}) => {
       {greaterThan.sm ? (
         <tr>
           <td>{signup.month}</td>
-          <td>{signup.visits}</td>
-          <td>{signup.signups}</td>
+          <td className="text-center">{signup.visits}</td>
+          <td className="text-center">{signup.signups}</td>
         </tr>
       ) : (
         <>

jam-ui/src/components/affiliate/JKAffiliateSignups.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { Card, CardBody, Row, Col, Alert } from 'reactstrap';
+import { Card, CardBody, Row, Col } from 'reactstrap';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { useTranslation } from 'react-i18next';
 import { getAffiliateSignups } from '../../helpers/rest';
@@ -9,6 +9,7 @@ import Loader from '../common/Loader';
 import JKAffiliateSignupsList from './JKAffiliateSignupsList';
 import JKAffiliateSignupsSwiper from './JKAffiliateSignupsSwiper';
 import { useResponsive } from '@farfetch/react-context-responsive';
+import { Link } from 'react-router-dom/cjs/react-router-dom.min';
 
 const JKAffiliateSignups = () => {
   const { t } = useTranslation('affiliate');
@@ -126,9 +127,11 @@ const JKAffiliateSignups = () => {
         ) : (
           <Row className="p-card">
             <Col>
-              <Alert color="info" className="mb-0">
-                {t('no_records', { ns: 'common' })}
-              </Alert>
+              {/* <Alert color="info" className="mb-0"> */}
+                {t('signups.no_signup_data')}
+                <Link to="/affiliate/links">{t('signups.share_affiliate_links')}</Link>
+                {t('signups.with_your_audience')} 
+              {/* </Alert> */}
             </Col>
           </Row>
         )}

jam-ui/src/components/affiliate/JKAffiliateSignupsList.js

@@ -12,7 +12,7 @@ const JKAffiliateSignupsList = ({ signups, nextPage, loading, stepForward }) =>
           <th width="35%" scope="col">
             {t('signups.list.header.date')}
           </th>
-          <th width="35%" scope="col">
+          <th width="35%" scope="col" className="text-center">
             {t('signups.list.header.visits')}
           </th>
           <th scope="col" className="text-center">

jam-ui/src/i18n/locales/en/affiliate.json

@@ -68,7 +68,9 @@
   },
   "signups": {
     "page_title": "Signups",
-    "no_data": "No signups yet",
+    "no_signup_data": "There is no signup data yet for your affiliate account. To start to generate affiliate signups, please ",
+    "share_affiliate_links": "share affiliate links",
+    "with_your_audience": " with your audience.",
     "load_more": "Load More",
     "list": {
       "header": {
@@ -80,7 +82,9 @@
   },
   "earnings": {
     "page_title": "Earnings",
-    "no_data": "No earnings yet",
+    "no_earnings_data": "There is no earnings data yet for your affiliate account. To start to generate affiliate signups, please ",
+    "share_affiliate_links": "share affiliate links",
+    "start_to_earn": " with your audience. Once you start to get signups, there is typically some lag time until new users convert to premium subscribers, generating affiliate income (e.g. new users get a free 30-day gold plan at signup).",
     "load_more": "Load More",
     "list": {
       "header": {