@newskit-render/core 1.34.0 → 1.40.0

package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap

@@ -625,7 +625,27 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
   }
 }
 
-.emotion-69 {
+.emotion-46 {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: 0;
+  height: auto;
+  width: 100%;
+  border-radius: 0;
+}
+
+.emotion-47 {
+  opacity: 1;
+  display: block;
+  border-radius: inherit;
+  height: auto;
+  width: 100%;
+  -webkit-animation: fadeIn 300ms;
+  animation: fadeIn 300ms;
+}
+
+.emotion-68 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -731,7 +751,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
                   <img
                     alt="image alt"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -787,7 +807,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
                   <img
                     alt="image alt 2"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -835,15 +855,12 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
                 class="emotion-19"
               >
                 <picture
-                  class="emotion-20"
+                  class="emotion-46"
                 >
-                  <div
-                    class="emotion-21"
-                  />
                   <img
-                    alt="image alt 3"
-                    class="emotion-22"
-                    src="some-url-to-image"
+                    alt=""
+                    class="emotion-47"
+                    src=""
                   />
                 </picture>
               </div>
@@ -899,7 +916,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
                   <img
                     alt="image alt 3"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -941,7 +958,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-69"
+      class="emotion-68"
       data-testid="divider"
     />
   </div>
@@ -1573,7 +1590,27 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
   }
 }
 
-.emotion-69 {
+.emotion-46 {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: 0;
+  height: auto;
+  width: 100%;
+  border-radius: 0;
+}
+
+.emotion-47 {
+  opacity: 1;
+  display: block;
+  border-radius: inherit;
+  height: auto;
+  width: 100%;
+  -webkit-animation: fadeIn 300ms;
+  animation: fadeIn 300ms;
+}
+
+.emotion-68 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -1679,7 +1716,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
                   <img
                     alt="image alt"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -1735,7 +1772,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
                   <img
                     alt="image alt 2"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -1783,15 +1820,12 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
                 class="emotion-19"
               >
                 <picture
-                  class="emotion-20"
+                  class="emotion-46"
                 >
-                  <div
-                    class="emotion-21"
-                  />
                   <img
-                    alt="image alt 3"
-                    class="emotion-22"
-                    src="some-url-to-image"
+                    alt=""
+                    class="emotion-47"
+                    src=""
                   />
                 </picture>
               </div>
@@ -1847,7 +1881,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
                   <img
                     alt="image alt 3"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -1889,7 +1923,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-69"
+      class="emotion-68"
       data-testid="divider"
     />
   </div>
@@ -2521,7 +2555,27 @@ exports[`SectionRow SectionRow with title 1`] = `
   }
 }
 
-.emotion-69 {
+.emotion-46 {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: 0;
+  height: auto;
+  width: 100%;
+  border-radius: 0;
+}
+
+.emotion-47 {
+  opacity: 1;
+  display: block;
+  border-radius: inherit;
+  height: auto;
+  width: 100%;
+  -webkit-animation: fadeIn 300ms;
+  animation: fadeIn 300ms;
+}
+
+.emotion-68 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -2627,7 +2681,7 @@ exports[`SectionRow SectionRow with title 1`] = `
                   <img
                     alt="image alt"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -2683,7 +2737,7 @@ exports[`SectionRow SectionRow with title 1`] = `
                   <img
                     alt="image alt 2"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -2731,15 +2785,12 @@ exports[`SectionRow SectionRow with title 1`] = `
                 class="emotion-19"
               >
                 <picture
-                  class="emotion-20"
+                  class="emotion-46"
                 >
-                  <div
-                    class="emotion-21"
-                  />
                   <img
-                    alt="image alt 3"
-                    class="emotion-22"
-                    src="some-url-to-image"
+                    alt=""
+                    class="emotion-47"
+                    src=""
                   />
                 </picture>
               </div>
@@ -2795,7 +2846,7 @@ exports[`SectionRow SectionRow with title 1`] = `
                   <img
                     alt="image alt 3"
                     class="emotion-22"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -2837,7 +2888,7 @@ exports[`SectionRow SectionRow with title 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-69"
+      class="emotion-68"
       data-testid="divider"
     />
   </div>
@@ -3485,6 +3536,26 @@ exports[`SectionRow SectionRow without extra space 1`] = `
   }
 }
 
+.emotion-48 {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: 0;
+  height: auto;
+  width: 100%;
+  border-radius: 0;
+}
+
+.emotion-49 {
+  opacity: 1;
+  display: block;
+  border-radius: inherit;
+  height: auto;
+  width: 100%;
+  -webkit-animation: fadeIn 300ms;
+  animation: fadeIn 300ms;
+}
+
 <div
     class="emotion-0"
   >
@@ -3589,7 +3660,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
                   <img
                     alt="image alt"
                     class="emotion-24"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -3645,7 +3716,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
                   <img
                     alt="image alt 2"
                     class="emotion-24"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -3693,15 +3764,12 @@ exports[`SectionRow SectionRow without extra space 1`] = `
                 class="emotion-21"
               >
                 <picture
-                  class="emotion-22"
+                  class="emotion-48"
                 >
-                  <div
-                    class="emotion-23"
-                  />
                   <img
-                    alt="image alt 3"
-                    class="emotion-24"
-                    src="some-url-to-image"
+                    alt=""
+                    class="emotion-49"
+                    src=""
                   />
                 </picture>
               </div>
@@ -3757,7 +3825,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
                   <img
                     alt="image alt 3"
                     class="emotion-24"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -4195,7 +4263,27 @@ exports[`SectionRow SectionRow without title 1`] = `
   }
 }
 
-.emotion-56 {
+.emotion-33 {
+  position: relative;
+  width: 100%;
+  display: block;
+  padding-top: 0;
+  height: auto;
+  width: 100%;
+  border-radius: 0;
+}
+
+.emotion-34 {
+  opacity: 1;
+  display: block;
+  border-radius: inherit;
+  height: auto;
+  width: 100%;
+  -webkit-animation: fadeIn 300ms;
+  animation: fadeIn 300ms;
+}
+
+.emotion-55 {
   border-style: solid;
   border-color: #DEDEDE;
   border-width: 1px;
@@ -4239,7 +4327,7 @@ exports[`SectionRow SectionRow without title 1`] = `
                   <img
                     alt="image alt"
                     class="emotion-9"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -4295,7 +4383,7 @@ exports[`SectionRow SectionRow without title 1`] = `
                   <img
                     alt="image alt 2"
                     class="emotion-9"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -4343,15 +4431,12 @@ exports[`SectionRow SectionRow without title 1`] = `
                 class="emotion-6"
               >
                 <picture
-                  class="emotion-7"
+                  class="emotion-33"
                 >
-                  <div
-                    class="emotion-8"
-                  />
                   <img
-                    alt="image alt 3"
-                    class="emotion-9"
-                    src="some-url-to-image"
+                    alt=""
+                    class="emotion-34"
+                    src=""
                   />
                 </picture>
               </div>
@@ -4407,7 +4492,7 @@ exports[`SectionRow SectionRow without title 1`] = `
                   <img
                     alt="image alt 3"
                     class="emotion-9"
-                    src="some-url-to-image"
+                    src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
                   />
                 </picture>
               </div>
@@ -4449,7 +4534,7 @@ exports[`SectionRow SectionRow without title 1`] = `
     </div>
     <hr
       aria-hidden="true"
-      class="emotion-56"
+      class="emotion-55"
       data-testid="divider"
     />
   </div>

package/components/section/sectionUtils.ts

@@ -12,15 +12,15 @@ export const getMedia = (media?: Media) => {
       loadingAspectRatio: '',
     }
   }
-  return 'crop' in media
+  return 'crops' in media
     ? {
-        src: media?.crop?.url || '',
-        alt: media?.crop?.alt || '',
-        loadingAspectRatio: media?.crop?.aspectRatio || '',
+        src: media?.crops[0].url || '',
+        alt: media?.crops[0].alt || '',
+        loadingAspectRatio: media?.crops[0].aspectRatio || '',
       }
     : {
-        src: media.posterImage?.crop?.url || '',
-        alt: media.posterImage?.crop?.alt || '',
+        src: media?.posterImage?.crop?.url || '',
+        alt: media?.posterImage?.crop?.alt || '',
         loadingAspectRatio: media?.posterImage?.crop?.aspectRatio || '',
       }
 }

package/cypress/e2e/account/account-subscription.spec.js

@@ -0,0 +1,222 @@
+describe('Account Subscription & Cancellation', () => {
+  it('Should show no subscription view', () => {
+    cy.GetAcsSession('noSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.contains('You don’t have a subscription')
+    cy.contains('Start a subscription and get access to all benefits.')
+    cy.get('[data-testid="primary-button"]')
+      .should('have.attr', 'href', '/title-storefrount')
+      .contains('View subscription options')
+  })
+
+  it('Should show Pending Activation view', () => {
+    cy.GetAcsSession('expiredSub')
+    cy.mockConsent()
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.subscriptions[0].status =
+              'Pending Activation'
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.contains('Your subscription is being activated')
+    cy.contains(
+      'Your membership is being set up at the moment, so you can’t access your subscription and billing details yet.'
+    )
+    cy.contains(
+      'Setting up your account can take a couple of hours, so please come back and try again later.'
+    )
+  })
+
+  it('Should show expired subscription view', () => {
+    cy.GetAcsSession('expiredSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() - 24 * 35 * 3600 * 1000)
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+
+    cy.contains('You’ve previously had a subscription that has now expired')
+
+    cy.contains(
+      `On ${date.toLocaleDateString(
+        'en-GB'
+      )} your Digital subscription expired. You can can re-subscribe by confirming a few details or view other packages that are available.`
+    )
+    cy.get('[data-testid="primary-button"]')
+      .should('have.attr', 'href', '/title-re-subscribe')
+      .contains('Re-subscribe')
+    cy.get('[data-testid="secondary-button"]')
+      .should('have.attr', 'href', '/title-subscription-options')
+      .contains('View subscription options')
+  })
+
+  it('should got through cancellation workflow', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.contains('h1', 'Subscription & Billing')
+    cy.contains(
+      'All your subscription details, including payment info and transactions.'
+    )
+    cy.contains('4AAA038742030')
+    cy.contains('************1111')
+    cy.contains('expiry date 01/31')
+
+    cy.get('a[href="/account/cancellation"]').should('be.visible').click()
+
+    cy.get('[type="radio"]').first().check()
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains('Are you sure you want to cancel your subscription?')
+    cy.contains(
+      'You will lose unlimited access to exclusive content and benefits.'
+    )
+    cy.contains(
+      'Your subscription full access will be revoked by the end of your current bill cycle.'
+    )
+
+    // mock sussesful cancellation
+    cy.intercept('POST', '/api/account/mutate', {
+      statusCode: 200,
+      body: { data: { cancelSubscription: { success: true } } },
+    })
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.get('[data-testid="dialog-content"]').should('be.visible')
+    // go back to subscription and billing
+    cy.contains('Back to account').click()
+    cy.intercept('/account/subscription-and-billing')
+    // reload with correct mock data to show past banner
+    const date = new Date(Date.now() + 20 * 30 * 3600 * 1000)
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription will end soon.')
+    cy.contains(
+      `You have cancelled your subscription and will lose access to all benefits on ${date.getDate()}/${
+        date.getMonth() + 1
+      }/${date.getFullYear()}. To re-activate your subscription call XXXX-XXX-XXXX.`
+    )
+    cy.contains(
+      'If you change your mind or cancelled by mistake, speak to one of our advisors on XXXX-XXX-XXXX'
+    )
+  })
+
+  it('Should show warning when you dont give a cancellation reason', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/cancellation')
+    cy.contains('Please tell us why you want to cancel')
+    cy.contains(
+      'We value your opinion and this information will help us understand how we can improve our product and the services we provide.'
+    )
+    cy.get('[data-testid="primary-button"]').click()
+    cy.contains('Please, select one option')
+  })
+
+  it('Should display textfield for other', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/cancellation')
+    cy.contains('Please tell us why you want to cancel')
+    cy.get('[type="radio"]').check('Other')
+    cy.get('input[name="extra"]').clear().type('Thanks my buisness')
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains('Are you sure you want to cancel your subscription?')
+  })
+
+  it('Should not show banner once it has been dismissed', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() + 20 * 30 * 3600 * 1000)
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription will end soon.')
+    cy.get('[data-testid="close-banner"]').click({
+      force: true,
+      multiple: true,
+    })
+    cy.reload()
+    cy.get('[data-testid="banner-container"]').should('not.exist')
+  })
+
+  it('Should not display banner if set date is passed current date', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() - 24 * 35 * 3600 * 1000)
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription has been cancelled.').then(() => {
+      window.localStorage.setItem(
+        'cancelledBanner',
+        new Date(new Date().setDate(new Date().getDate() - 7)).toDateString()
+      )
+    })
+    cy.reload()
+    cy.get('[data-testid="banner-container"]').should('not.exist')
+    cy.clearLocalStorage()
+  })
+})