Merge branch 'develop' of https://github.com/Videodock/jw-ott-webapp …

…into feat/store-watch-history-account
jwplayer · Aug 2, 2021 · 33def81 · 33def81
2 parents 967c0e8 + 6c65bee
commit 33def81
Show file tree

Hide file tree

Showing 74 changed files with 616 additions and 420 deletions.
diff --git a/src/components/Account/Account.module.scss b/src/components/Account/Account.module.scss
@@ -18,78 +18,6 @@ button {
   margin-top: variables.$base-spacing;
 }
 
-.checkbox {
-  position: relative;
-  display: block;
-  align-items: center;
-  margin-top: variables.$base-spacing / 2;
-  margin-bottom: 0;
-  padding-left: variables.$base-spacing * 1.5;
-  font-size: 16px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  > input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    margin-right: 10px;
-    opacity: 0;
-    :not(&:disabled) {
-      &:hover ~ .checkmark:hover {
-        background-color: theme.$forms-checkbox-bg-hover;
-        cursor: pointer;
-      }
-      &:hover ~ .checkLabel {
-        cursor: pointer;
-      }
-      &:checked ~ .checkmark:hover {
-        background-color: theme.$forms-primary-color-hover;
-      }
-    }
-    &:checked ~ .checkmark {
-      background-color: theme.$forms-primary-color;
-    }
-    &:checked ~ .checkmark::after {
-      display: block;
-    }
-
-    &:disabled ~ .checkmark,
-    &:disabled ~ .checkLabel {
-      cursor: default;
-      opacity: 0.6;
-    }
-  }
-}
-
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 15px;
-  height: 15px;
-  background-color: theme.$forms-checkbox-bg;
-  border-radius: 2px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 5px;
-    display: none;
-
-    width: 5px;
-    height: 10px;
-    border: solid black;
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }
-}
-
 .submitConsents {
   margin-top: variables.$base-spacing;
 }
diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
@@ -59,6 +59,18 @@ const Account = ({
   const consentValues = useMemo(() => formatConsentValues(publisherConsents, customerConsents), [publisherConsents, customerConsents]);
   const initialValues = useMemo(() => ({ ...customer, consents: consentValues }), [customer, consentValues]);
 
+  const formatConsentLabel = (label: string): string | JSX.Element => {
+    // @todo sanitize consent label to prevent XSS
+    const hasHrefOpenTag = /<a(.|\n)*?>/.test(label);
+    const hasHrefCloseTag = /<\/a(.|\n)*?>/.test(label);
+
+    if (hasHrefOpenTag && hasHrefCloseTag) {
+      return <span dangerouslySetInnerHTML={{ __html: label }} />;
+    }
+
+    return label;
+  };
+
   const handleSubmit = (values: GenericFormValues) => {
     switch (editing) {
       case 'account':
@@ -199,25 +211,27 @@ const Account = ({
             {consentsLoading ? (
               <Spinner size="small" />
             ) : publisherConsents ? (
-              <div onClick={() => setEditing('consents')}>
+              <div className={styles.flexBox} onClick={() => setEditing('consents')}>
                 {publisherConsents.map((consent, index) => (
                   <Checkbox
                     key={index}
                     name={consent.name}
                     value={values.consents?.[consent.name] || ''}
                     checked={(values.consents?.[consent.name] as boolean) || false}
                     onChange={(event) => (handleChange ? handleChange(event, { nestInto: 'consents' }) : null)}
+                    label={formatConsentLabel(consent.label)}
                     disabled={consent.required}
-                    label={consent.label}
                   />
                 ))}
-                <Button
-                  className={styles.submitConsents}
-                  type="button"
-                  label={t('account.update_consents')}
-                  disabled={!hasChanged}
-                  onClick={handleSubmit}
-                />
+                <div className={styles.controls}>
+                  <Button
+                    className={styles.submitConsents}
+                    type="button"
+                    label={t('account.update_consents')}
+                    disabled={!hasChanged}
+                    onClick={handleSubmit}
+                  />
+                </div>
               </div>
             ) : null}
           </div>

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -22,9 +22,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
             for="text-field_1235_email"
           >
             account.email
-            <span>
-              optional
-            </span>
           </label>
           <p>
             email@domain.com
@@ -85,9 +82,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
               for="text-field_1235_firstName"
             >
               account.firstname
-              <span>
-                optional
-              </span>
             </label>
             <p>
               John
@@ -101,9 +95,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
               for="text-field_1235_lastName"
             >
               account.lastname
-              <span>
-                optional
-              </span>
             </label>
             <p>
               Doe

diff --git a/src/components/Animation/Slide/Slide.tsx b/src/components/Animation/Slide/Slide.tsx
@@ -9,7 +9,7 @@ type Props = {
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;
   children: ReactNode;
-  fromRight?: boolean;
+  direction?: 'left' | 'top' | 'right' | 'bottom';
 };
 
 const Slide = ({
@@ -19,13 +19,20 @@ const Slide = ({
   onOpenAnimationEnd,
   onCloseAnimationEnd,
   children,
-  fromRight,
+  direction = 'top',
 }: Props): JSX.Element | null => {
   const seconds = duration / 1000;
-  const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform;
+  const transition = `transform ${seconds}s ease, opacity ${seconds}s ease`; // todo: -webkit-transform;
+  const directions = {
+    left: 'translate(-15px, 0)',
+    top: 'translate(0, -15px)',
+    right: 'translate(15px, 0)',
+    bottom: 'translate(0, 15px)',
+  };
   const createStyle = (status: Status): CSSProperties => ({
     transition,
-    transform: status === 'opening' || status === 'open' ? 'translateY(0)' : `${fromRight ? 'translateX(15px)' : 'translateY(15px)'}`,
+    transform: status === 'opening' || status === 'open' ? 'translate(0, 0)' : directions[direction],
+    opacity: status === 'opening' || status === 'open' ? 1 : 0,
     zIndex: 15,
   });
 

diff --git a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.test.tsx b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.test.tsx
@@ -5,7 +5,7 @@ import CancelSubscriptionForm from './CancelSubscriptionForm';
 
 describe('<CancelSubscriptionForm>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<CancelSubscriptionForm error={null} onCancel={jest.fn()} onConfirm={jest.fn()} />);
+    const { container } = render(<CancelSubscriptionForm submitting={false} error={null} onCancel={jest.fn()} onConfirm={jest.fn()} />);
 
     expect(container).toMatchSnapshot();
   });

diff --git a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
@@ -10,9 +10,10 @@ type Props = {
   onConfirm: () => void;
   onCancel: () => void;
   error: string | null;
+  submitting: boolean;
 };
 
-const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error }: Props) => {
+const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error, submitting }: Props) => {
   const { t } = useTranslation('account');
 
   return (
@@ -27,6 +28,7 @@ const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error }:
         variant="contained"
         onClick={onConfirm}
         fullWidth
+        disabled={submitting}
       />
       <Button label={t('cancel_subscription.no_thanks')} variant="outlined" onClick={onCancel} fullWidth />
     </div>

diff --git a/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap b/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<CancelSubscriptionForm> renders and matches snapshot 1`] = `
       cancel_subscription.explanation
     </p>
     <button
+      aria-disabled="false"
       class="button confirmButton primary fullWidth"
     >
       <span>

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -19,7 +19,7 @@
 
       & .poster {
         box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
-        0 4px 5px rgb(0 0 0 / 20%);
+          0 4px 5px rgb(0 0 0 / 20%);
       }
     }
   }
@@ -162,12 +162,18 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   color: var(--card-color);
 }
 
+.tags {
+  display: flex;
+}
+
 .tag {
+  display: flex;
+  align-items: center;
   padding: 4px 8px;
   color: var(--card-color);
   font-family: var(--body-font-family);
   font-weight: 600;
-  font-size: 13px;
+  font-size: 16px;
   white-space: nowrap;
   background-color: rgba(variables.$black, 0.6);
   border-radius: 4px;
@@ -176,6 +182,15 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   }
 }
 
+.lock {
+  margin-right: variables.$base-spacing / 2;
+  padding: 2px 6px;
+  > svg {
+    width: 16px;
+    height: 21px;
+  }
+}
+
 .live {
   background-color: variables.$red;
 }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import { formatDurationTag } from '../../utils/formatting';
+import Lock from '../../icons/Lock';
 
 import styles from './Card.module.scss';
 
@@ -21,6 +22,7 @@ type CardProps = {
   disabled?: boolean;
   loading?: boolean;
   isCurrent?: boolean;
+  isLocked?: boolean;
   currentLabel?: string;
   enableTitle?: boolean;
 };
@@ -41,6 +43,7 @@ function Card({
   disabled = false,
   loading = false,
   isCurrent = false,
+  isLocked = true,
   currentLabel,
 }: CardProps): JSX.Element {
   const { t } = useTranslation('common');
@@ -85,7 +88,14 @@ function Card({
         {!loading && (
           <div className={styles.meta}>
             {featured && !disabled && enableTitle && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
-            {renderTag()}
+            <div className={styles.tags}>
+              {isLocked && (
+                <div className={classNames(styles.tag, styles.lock)}>
+                  <Lock />
+                </div>
+              )}
+              {renderTag()}
+            </div>
           </div>
         )}
         {progress ? (

diff --git a/src/components/CardGrid/CardGrid.test.tsx b/src/components/CardGrid/CardGrid.test.tsx
@@ -9,7 +9,14 @@ describe('<CardGrid>', () => {
   it('renders and matches snapshot', () => {
     const placeholderData = generatePlaylistPlaceholder();
     const { container } = render(
-      <CardGrid playlist={placeholderData.playlist} onCardHover={jest.fn()} onCardClick={jest.fn()} isLoading={false} />,
+      <CardGrid
+        playlist={placeholderData.playlist}
+        onCardHover={jest.fn()}
+        onCardClick={jest.fn()}
+        isLoading={false}
+        hasActiveSubscription={true}
+        requiresSubscription={true}
+      />,
     );
 
     expect(container).toMatchSnapshot();

diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
@@ -27,6 +27,8 @@ type CardGridProps = {
   cols?: Breakpoints;
   currentCardItem?: PlaylistItem;
   currentCardLabel?: string;
+  hasActiveSubscription: boolean;
+  requiresSubscription: boolean;
 };
 
 function CardGrid({
@@ -39,6 +41,8 @@ function CardGrid({
   cols = defaultCols,
   currentCardItem,
   currentCardLabel,
+  requiresSubscription,
+  hasActiveSubscription,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
@@ -69,6 +73,7 @@ function CardGrid({
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
             currentLabel={currentCardLabel}
+            isLocked={requiresSubscription && !hasActiveSubscription && playlistItem.requiresSubscription !== 'false'}
           />
         </div>
       </div>

diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
@@ -76,9 +76,13 @@
     &:disabled {
       opacity: 0.6;
       pointer-events: none;
+      + label {
+        cursor: default;
+        opacity: 0.6;
+      }
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       transform: scale(1.1);
     }
 

diff --git a/src/components/CheckoutForm/CheckoutForm.test.tsx b/src/components/CheckoutForm/CheckoutForm.test.tsx
@@ -24,6 +24,7 @@ describe('<CheckoutForm>', () => {
         couponFormSubmitting={false}
         order={order as Order}
         offer={offer as Offer}
+        submitting={false}
       />,
     );
-Original file line number
+Diff line change
@@ Expand Up @@
           cancel_subscription.explanation
         </p>
         <button
+          aria-disabled="false"
           class="button confirmButton primary fullWidth"
         >
           <span>
@@ Expand Down @@