feat(payment): add tvods to choose offer modal

jwplayer · May 20, 2022 · bc8e6d7 · bc8e6d7
1 parent 4ccf92c
commit bc8e6d7
Show file tree

Hide file tree

Showing 13 changed files with 479 additions and 120 deletions.
diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.module.scss b/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
@@ -14,6 +14,31 @@
   font-size: 18px;
 }
 
+.offerGroupSwitch {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  margin-bottom: 24px;
+
+  > input  {
+    &:checked + .label {
+      border-radius: 4px;
+      transform: scale(1.02);
+    }
+  }
+}
+
+.offerGroupLabel {
+  transition: transform 0.3s ease-out;
+
+  &:nth-child(2) {
+    border-radius: 4px 0 0 4px;
+  }
+  &:nth-child(4) {
+    border-radius: 0 4px 4px 0;
+  }
+}
+
 .offers {
   display: flex;
   margin: 0 -4px 24px;

diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx b/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
@@ -3,6 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 
 import monthlyOffer from '../../fixtures/monthlyOffer.json';
 import yearlyOffer from '../../fixtures/yearlyOffer.json';
+import tvodOffer from '../../fixtures/tvodOffer.json';
 import type { Offer } from '../../../types/checkout';
 
 import ChooseOfferForm from './ChooseOfferForm';
@@ -11,13 +12,31 @@ describe('<OffersForm>', () => {
   test('renders and matches snapshot', () => {
     const { container } = render(
       <ChooseOfferForm
-        values={{ periodicity: 'monthly' }}
+        values={{ offerType: 'svod', periodicity: 'monthly' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         monthlyOffer={monthlyOffer as Offer}
         yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders and matches snapshot', () => {
+    const { container } = render(
+      <ChooseOfferForm
+        values={{ offerType: 'tvod', periodicity: 'monthly' }}
+        errors={{}}
+        onChange={vi.fn()}
+        onSubmit={vi.fn()}
+        submitting={false}
+        monthlyOffer={monthlyOffer as Offer}
+        yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
       />,
     );
 
@@ -27,13 +46,14 @@ describe('<OffersForm>', () => {
   test('checks the monthly offer correctly', () => {
     const { getByLabelText } = render(
       <ChooseOfferForm
-        values={{ periodicity: 'monthly' }}
+        values={{ offerType: 'svod', periodicity: 'monthly' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         monthlyOffer={monthlyOffer as Offer}
         yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
       />,
     );
 
@@ -43,30 +63,49 @@ describe('<OffersForm>', () => {
   test('checks the yearly offer correctly', () => {
     const { getByLabelText } = render(
       <ChooseOfferForm
-        values={{ periodicity: 'yearly' }}
+        values={{ offerType: 'svod', periodicity: 'yearly' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         monthlyOffer={monthlyOffer as Offer}
         yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
       />,
     );
 
     expect(getByLabelText('choose_offer.yearly_subscription')).toBeChecked();
   });
 
+  test('checks the tvod offer correctly', () => {
+    const { getByLabelText } = render(
+      <ChooseOfferForm
+        values={{ offerType: 'tvod', periodicity: 'yearly', tvodOfferId: 'R892134629_NL' }}
+        errors={{}}
+        onChange={vi.fn()}
+        onSubmit={vi.fn()}
+        submitting={false}
+        monthlyOffer={monthlyOffer as Offer}
+        yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
+      />,
+    );
+
+    expect(getByLabelText('One Time - TVOD offer')).toBeChecked();
+  });
+
   test('calls the onChange callback when changing the offer', () => {
     const onChange = vi.fn();
     const { getByLabelText } = render(
       <ChooseOfferForm
-        values={{ periodicity: 'monthly' }}
+        values={{ offerType: 'svod', periodicity: 'monthly' }}
         errors={{}}
         onChange={onChange}
         onSubmit={vi.fn()}
         submitting={false}
         monthlyOffer={monthlyOffer as Offer}
         yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
       />,
     );
 
@@ -79,13 +118,14 @@ describe('<OffersForm>', () => {
     const onSubmit = vi.fn();
     const { getByTestId } = render(
       <ChooseOfferForm
-        values={{ periodicity: 'monthly' }}
+        values={{ offerType: 'svod', periodicity: 'monthly' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={onSubmit}
         submitting={false}
         monthlyOffer={monthlyOffer as Offer}
         yearlyOffer={yearlyOffer as Offer}
+        tvodOffers={[tvodOffer as Offer]}
       />,
     );