Release Candidate - v6.1.1

.github/workflows/release-build-tag-release.yml

@@ -8,6 +8,11 @@ on:
 jobs:
   create-new-release-version:
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -52,7 +57,7 @@ jobs:
         if: ${{ steps.package-version.outputs.current-version }}
         with:
           commit: 'release'
-          artifacts: 'web/build/ott-web-app-build-*.tar.gz, web/build/ott-web-app-build-*.zip'
+          artifacts: 'platforms/web/build/ott-web-app-build-*.tar.gz, platforms/web/build/ott-web-app-build-*.zip'
           tag: v${{ steps.package-version.outputs.current-version }}
           bodyFile: '.github/RELEASE_BODY_TEMPLATE.md'
           token: ${{ secrets.github_token }}

CHANGELOG.md

@@ -1,3 +1,28 @@
+## [6.1.1](https://github.com/jwplayer/ott-web-app/compare/v6.1.0...v6.1.1) (2024-04-23)
+
+
+### Bug Fixes
+
+* **a11y:** close menu focus with voice over ([5e6d445](https://github.com/jwplayer/ott-web-app/commit/5e6d445bc78926011477121adcd4dda5b233ee40))
+* **a11y:** header navigation list ([1d22ab0](https://github.com/jwplayer/ott-web-app/commit/1d22ab05d4f5004fff8740827dc37b3d8460debf))
+* **a11y:** icon button to use button element ([7d5beae](https://github.com/jwplayer/ott-web-app/commit/7d5beae6f12ab4de55414bc2f2f1a46386915921))
+* **a11y:** lose focus after activating share button ([1cd135e](https://github.com/jwplayer/ott-web-app/commit/1cd135ea3eccae6d956d71493611d3e8cf79adc0))
+* **a11y:** read title while searching ([b46e659](https://github.com/jwplayer/ott-web-app/commit/b46e6595c423e33452185751807372ed8fc8ddd2))
+* **a11y:** sitename in logo alt ([051e46f](https://github.com/jwplayer/ott-web-app/commit/051e46f54a55aec5a6cde3b296859472bb362e6a))
+* add social login buttons to signup screen ([#496](https://github.com/jwplayer/ott-web-app/issues/496)) ([c2e3f52](https://github.com/jwplayer/ott-web-app/commit/c2e3f5266f0e29637e9e85ccef53c9dc54d962ce))
+* change wording ([#488](https://github.com/jwplayer/ott-web-app/issues/488)) ([1011dd2](https://github.com/jwplayer/ott-web-app/commit/1011dd28252afe0c001b1a27c5b1c3589a5c1cea))
+* **e2e:** search results based on typeahead changes ([1b3bebf](https://github.com/jwplayer/ott-web-app/commit/1b3bebff20027645003c657c5964ceb3580a6f2c))
+* Leave the path intact and only remove token from hash after login with social media ([#499](https://github.com/jwplayer/ott-web-app/issues/499)) ([8abc55c](https://github.com/jwplayer/ott-web-app/commit/8abc55c537fc50a39b85d9c941f038e7688d9c94))
+* **payment:** catch cleeng invalid coupon for offer ([930d52b](https://github.com/jwplayer/ott-web-app/commit/930d52b015434f968f9a0bef477ddcadcb0013c9))
+* **payment:** cleeng paypal invalid url error ([880e4af](https://github.com/jwplayer/ott-web-app/commit/880e4af3ef3a01054a65f3bebb75e32287aae469))
+* plans prompt after social register ([#498](https://github.com/jwplayer/ott-web-app/issues/498)) ([fa8c142](https://github.com/jwplayer/ott-web-app/commit/fa8c142331a87fe363aa639ab70ef14015a01439))
+* **project:** fix workflow ([bf73a1b](https://github.com/jwplayer/ott-web-app/commit/bf73a1b7e9f0fe904164db2a425269e3dd2f9bda))
+* **project:** improve form validation on account page ([0dfa380](https://github.com/jwplayer/ott-web-app/commit/0dfa380a07be113cdb691eaaa5b245a54f91afc2))
+* **project:** old password form error after validation ([7e11074](https://github.com/jwplayer/ott-web-app/commit/7e11074c1ba9aebc02f01e0dfffcc47d39a9a370))
+* **project:** retain password input during sign up ([2a5e2fe](https://github.com/jwplayer/ott-web-app/commit/2a5e2fe5a395f019e430993d14d3fd9e2de5340d))
+* **project:** scroll to top on static pages ([a9a0d1f](https://github.com/jwplayer/ott-web-app/commit/a9a0d1fa4d9266bb532544f1377010819ac47ff5))
+* **videodetail:** unnecessary scrollbar in videolist ([11a0e32](https://github.com/jwplayer/ott-web-app/commit/11a0e32f26b68d4ceeab5edfba2e912e8423198d))
+
 ## [6.1.0](https://github.com/jwplayer/ott-web-app/compare/v6.0.0...v6.1.0) (2024-04-05)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",

packages/common/src/controllers/CheckoutController.ts

@@ -103,6 +103,8 @@ export default class CheckoutController {
           useCheckoutStore.getState().setOrder(null);
         } else if (error.message === 'Invalid coupon code') {
           throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
+        } else if (error.message === 'Invalid coupon code for this offer') {
+          throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid_for_offer')] });
         }
       }
 

packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts

@@ -97,6 +97,10 @@ export default class CleengCheckoutService extends CheckoutService {
       if (response.errors[0].includes(`Coupon ${payload.couponCode} not found`)) {
         throw new Error('Invalid coupon code');
       }
+
+      if (response.errors[0].includes(`Coupon ${payload.couponCode} cannot be applied on this offer`)) {
+        throw new Error('Invalid coupon code for this offer');
+      }
     }
 
     return response;

packages/common/src/services/integrations/jwp/JWPAccountService.ts

@@ -393,15 +393,18 @@ export default class JWPAccountService extends AccountService {
     return data;
   };
 
-  getCaptureStatus: GetCaptureStatus = async ({ customer }) => {
+  getCaptureStatus: GetCaptureStatus = async ({ customer: { firstName, lastName } }) => {
+    const firstNameTrimmed = firstName?.trim() || '';
+    const lastNameTrimmed = lastName?.trim() || '';
+
     return {
       isCaptureEnabled: true,
-      shouldCaptureBeDisplayed: true,
+      shouldCaptureBeDisplayed: !firstNameTrimmed || !lastNameTrimmed,
       settings: [
         {
           answer: {
-            firstName: customer.firstName || null,
-            lastName: customer.lastName || null,
+            firstName: firstNameTrimmed || null,
+            lastName: lastNameTrimmed || null,
           },
           enabled: true,
           key: 'firstNameLastName',

packages/common/src/utils/urlFormatting.ts

@@ -5,8 +5,16 @@ import { getLegacySeriesPlaylistIdFromEpisodeTags, getSeriesPlaylistIdFromCustom
 
 export type QueryParamsArg = { [key: string]: string | number | string[] | undefined | null };
 
-// Creates a new URL from a url string (could include search params) and an object to add and remove query params
-// For example: createURL(window.location.pathname, { foo: 'bar' });
+/**
+ * Creates a new URL from an url string (preserving the search params) and an object to add and remove query params
+ *
+ * @example
+ * createURL('/m/123456?play=1', { foo: 'bar' }) === '/m/123456?play=6&foo=bar'
+ * createURL('/m/123456?play=1', { play: null }) === '/m/123456'
+ *
+ * // works with absolute URLs
+ * createURL('https://jwplayer.com/m/123456?play=1', { play: null }) === 'https://jwplayer.com/m/123456'
+ */
 export const createURL = (url: string, queryParams: QueryParamsArg) => {
   const [baseUrl, urlQueryString = ''] = url.split('?');
   const urlSearchParams = new URLSearchParams(urlQueryString);

packages/hooks-react/src/useSocialLoginUrls.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
@@ -7,14 +8,20 @@ export type SocialLoginURLs = Record<string, string>;
 export default function useSocialLoginUrls(url: string) {
   const accountController = getModule(AccountController);
 
-  const urls = useQuery(['socialUrls'], () => accountController.getSocialLoginUrls(url), {
+  const { data, error } = useQuery(['socialUrls', url], () => accountController.getSocialLoginUrls(url), {
     enabled: accountController.getFeatures().hasSocialURLs,
     retry: false,
   });
 
-  if (urls.error || !urls.data) {
+  const urls = useMemo(() => {
+    if (!data) return null;
+
+    return data.reduce((acc, url) => ({ ...acc, ...url }), {} as SocialLoginURLs);
+  }, [data]);
+
+  if (error || !urls) {
     return null;
   }
 
-  return urls.data.reduce((acc, url) => ({ ...acc, ...url }), {} as SocialLoginURLs);
+  return urls;
 }

packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap

@@ -216,11 +216,10 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         </form>
       </div>
     </div>
-    <div
+    <button
       aria-label="common:back"
       class="_iconButton_0fef65 _dialogBackButton_248199"
-      role="button"
-      tabindex="0"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -232,7 +231,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
         />
       </svg>
-    </div>
+    </button>
   </div>
 </div>
 `;

packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap

@@ -35,11 +35,10 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
             role="dialog"
           >
             Dialog contents
-            <div
+            <button
               aria-label="close_modal"
               class="_iconButton_0fef65 _modalCloseButton_b92d69"
-              role="button"
-              tabindex="0"
+              type="button"
             >
               <svg
                 aria-hidden="true"
@@ -55,7 +54,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
                   fill="none"
                 />
               </svg>
-            </div>
+            </button>
           </div>
         </div>
       </div>

packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap

@@ -2,11 +2,10 @@
 
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="common:back"
     class="_iconButton_0fef65 _dialogBackButton_248199"
-    role="button"
-    tabindex="0"
+    type="button"
   >
     <svg
       aria-hidden="true"
@@ -18,6 +17,6 @@ exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
         d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;

packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx

@@ -43,7 +43,7 @@ const EditPasswordForm: React.FC<Props> = ({
 }: Props) => {
   const { t } = useTranslation(['account', 'user']);
   return (
-    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
       {errors.form && (
         <FormFeedback variant="error" visible={!validationError}>
           {errors.form}
@@ -69,6 +69,7 @@ const EditPasswordForm: React.FC<Props> = ({
           name="oldPassword"
           showToggleView={false}
           showHelperText={false}
+          autoComplete="current-password"
           required
         />
       )}
@@ -95,6 +96,7 @@ const EditPasswordForm: React.FC<Props> = ({
         placeholder={t('reset.password')}
         error={!!errors.password}
         name="password"
+        autoComplete="new-password"
         required
       />
 
@@ -106,6 +108,7 @@ const EditPasswordForm: React.FC<Props> = ({
         placeholder={t('reset.repeat_new_password')}
         error={!!errors.passwordConfirmation}
         name="passwordConfirmation"
+        autoComplete="new-password"
         required
       />
 

packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -37,12 +38,11 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
+            type="button"
           >
             <svg
               aria-hidden="true"
@@ -54,7 +54,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
@@ -79,6 +79,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
@@ -90,12 +91,11 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
+            type="button"
           >
             <svg
               aria-hidden="true"
@@ -107,7 +107,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div

packages/ui-react/src/components/ErrorPage/ErrorPage.tsx

@@ -38,7 +38,9 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor
     <div className={styles.errorPage}>
       <div className={styles.box}>
         <img className={styles.image} src={logo || '/images/logo.png'} alt={alt} />
-        <h1 className={styles.title}>{title || 'An error occurred'}</h1>
+        <h1 className={styles.title} aria-live="polite">
+          {title || 'An error occurred'}
+        </h1>
         <div className={styles.main}>
           <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
           {children}

packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = `
         src="/images/logo.png"
       />
       <h1
+        aria-live="polite"
         class="_title_8c5621"
       >
         This is the title

packages/ui-react/src/components/Form/FormSection.tsx

@@ -94,7 +94,7 @@ export function FormSection<TData extends GenericFormValues>({
 
         try {
           setFormState((s) => {
-            return { ...s, isBusy: true };
+            return { ...s, isBusy: true, errors: [] };
           });
           response = await onSubmit(values);
         } catch (error: unknown) {

packages/ui-react/src/components/Header/Header.module.scss

@@ -77,7 +77,17 @@
   flex: 1;
   align-items: center;
 
-  > a {
+  > ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      display: inline-block;
+    }
+  }
+
+  a {
     height: 36px;
     min-height: 36px;
     margin: 0 6px;
@@ -177,6 +187,24 @@
   }
 }
 
+.navButton {
+  overflow: visible;
+
+  &::after {
+    position: absolute;
+    bottom: calc(((variables.$header-height - 36px) / 2) * -1);
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: variables.$white;
+    content: '';
+  }
+
+  body:global(.is-tabbing) &:focus::after {
+    display: none;
+  }
+}
+
 //
 // mediaQueries
 // --------------------------------