removed hotfix changes

paypal · Oct 9, 2023 · 288f264 · 288f264
1 parent ab7375a
commit 288f264
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 89 deletions.
diff --git a/src/components/modal/content/US/parts/Content.jsx b/src/components/modal/content/US/parts/Content.jsx
@@ -152,9 +152,7 @@ const Content = ({ headerRef, contentWrapper }) => {
                 <div>Subject to credit approval.</div>
                 <hr className="divider" />
             </div>
-            <main className="main" aria-label={`More info on the Pay Later offer${tabs.length > 1 ? 's' : ''}.`}>
-                {tabsContent}
-            </main>
+            <main className="main">{tabsContent}</main>
         </div>
     );
 };

diff --git a/src/components/modal/lib/hooks/helpers.js b/src/components/modal/lib/hooks/helpers.js
@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 
-// useAutoFocus unused?
 export function useAutoFocus() {
     const ref = useRef();
 

diff --git a/src/components/modal/v2/lib/hooks/helpers.js b/src/components/modal/v2/lib/hooks/helpers.js
@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 
-// useAutoFocus unused?
 export function useAutoFocus() {
     const ref = useRef();
 

diff --git a/src/components/modal/v2/lib/providers/transition.js b/src/components/modal/v2/lib/providers/transition.js
@@ -27,10 +27,8 @@ export const TransitionStateProvider = ({ children }) => {
      * Particularly useful for those using screen readers and other accessibility functions.
      */
     const focusCloseBtnOnModalOpen = () => {
-        // give the document time to update before trying to focus the close button
-        setTimeout(() => {
-            document.querySelector('.close')?.focus();
-        }, 10);
+        const btn = document.querySelector('.close');
+        btn?.focus();
     };
 
     useEffect(() => {

diff --git a/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx
@@ -13,15 +13,6 @@ import {
 import Header from './Header';
 import { LongTerm, ShortTerm, NoInterest, ProductList, PayIn1 } from './views';
 
-const VIEW_IDS = {
-    // TODO: add an error view in case we receive an invalid view?
-    PAYPAL_CREDIT_NO_INTEREST: 'PAYPAL_CREDIT_NO_INTEREST',
-    PAY_LATER_LONG_TERM: 'PAY_LATER_LONG_TERM',
-    PAY_LATER_PAY_IN_1: 'PAY_LATER_PAY_IN_1',
-    PAY_LATER_SHORT_TERM: 'PAY_LATER_SHORT_TERM',
-    PRODUCT_LIST: 'PRODUCT_LIST'
-};
-
 const BodyContent = () => {
     const { views } = useServerData();
     const { offer } = useXProps();
@@ -38,12 +29,12 @@ const BodyContent = () => {
 
         let defaultViewName;
 
-        const productViews = views.filter(view => view?.meta?.product !== VIEW_IDS.PRODUCT_LIST);
-        const hasProductList = views.find(view => view?.meta?.product === VIEW_IDS.PRODUCT_LIST);
+        const productViews = views.filter(view => view?.meta?.product !== 'PRODUCT_LIST');
+        const hasProductList = views.find(view => view?.meta?.product === 'PRODUCT_LIST');
         if (productViews?.length === 1) {
             defaultViewName = productViews[0]?.meta?.product;
         } else if (productViews?.length > 1 && hasProductList) {
-            defaultViewName = VIEW_IDS.PRODUCT_LIST;
+            defaultViewName = 'PRODUCT_LIST';
         } else if (productViews?.length > 1 && !hasProductList) {
             defaultViewName = productViews[0]?.meta?.product;
         }
@@ -58,7 +49,7 @@ const BodyContent = () => {
     const { headline, subheadline, qualifyingSubheadline = '', closeButtonLabel } = content;
     const isQualifying = productMeta?.qualifying;
 
-    const openProductList = () => setViewName(VIEW_IDS.PRODUCT_LIST);
+    const openProductList = () => setViewName('PRODUCT_LIST');
 
     useDidUpdateEffect(() => {
         scrollTo(0); // Reset scroll position to top when view changes
@@ -80,13 +71,13 @@ const BodyContent = () => {
 
     // Add views to viewComponents object where the keys are the product name and the values are the view component
     const viewComponents = {
-        [VIEW_IDS.PAYPAL_CREDIT_NO_INTEREST]: <NoInterest content={content} openProductList={openProductList} />,
-        [VIEW_IDS.PAY_LATER_LONG_TERM]: <LongTerm content={content} openProductList={openProductList} />,
-        [VIEW_IDS.PAY_LATER_PAY_IN_1]: <PayIn1 content={content} openProductList={openProductList} />,
-        [VIEW_IDS.PAY_LATER_SHORT_TERM]: (
+        PAYPAL_CREDIT_NO_INTEREST: <NoInterest content={content} openProductList={openProductList} />,
+        PAY_LATER_LONG_TERM: <LongTerm content={content} openProductList={openProductList} />,
+        PAY_LATER_PAY_IN_1: <PayIn1 content={content} openProductList={openProductList} />,
+        PAY_LATER_SHORT_TERM: (
             <ShortTerm content={content} productMeta={productMeta} openProductList={openProductList} />
         ),
-        [VIEW_IDS.PRODUCT_LIST]: <ProductList content={content} setViewName={setViewName} />
+        PRODUCT_LIST: <ProductList content={content} setViewName={setViewName} />
     };
 
     // IMPORTANT: These elements cannot be nested inside of other elements.
@@ -104,10 +95,7 @@ const BodyContent = () => {
                 viewName={viewName}
             />
             <div className="content__container">
-                <main
-                    className="main"
-                    aria-label={`More info on the Pay Later offer${viewName === VIEW_IDS.PRODUCT_LIST ? 's' : ''}.`}
-                >
+                <main className="main">
                     <div className="content__body">{viewComponents[viewName]}</div>
                 </main>
             </div>

diff --git a/src/components/modal/v2/parts/Header.jsx b/src/components/modal/v2/parts/Header.jsx
@@ -56,8 +56,6 @@ const Header = ({
                         aria-label={closeButtonLabel}
                         type="button"
                         id="close-btn"
-                        autofocus
-                        aria-keyshortcuts="escape"
                         onClick={() => handleClose('Close Button')}
                     >
                         <Icon name="close" />

diff --git a/src/library/zoid/modal/containerTemplate.jsx b/src/library/zoid/modal/containerTemplate.jsx
@@ -65,7 +65,6 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props, context
             replaceViewport();
             setTimeout(() => {
                 wrapper.classList.add(CLASS.HIDDEN);
-                wrapper.querySelector('iframe')?.blur();
             }, TRANSITION_DELAY);
         };
 
@@ -80,8 +79,7 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props, context
                 .then(() => overlay.classList.add(CLASS.TRANSITION))
                 .then(() => ZalgoPromise.delay(TRANSITION_DELAY))
                 .then(() => destroyElement(prerenderFrame))
-                .then(() => event.trigger(MODAL_EVENT.PRERENDER_MODAL_DESTROY))
-                .then(() => wrapper.querySelector('iframe')?.focus());
+                .then(() => event.trigger(MODAL_EVENT.PRERENDER_MODAL_DESTROY));
         };
 
         // When the show function was called before zoid had a chance to render

diff --git a/src/library/zoid/modal/prerenderTemplate.jsx b/src/library/zoid/modal/prerenderTemplate.jsx
@@ -105,6 +105,7 @@ export default ({ doc, props, event }) => {
             position: relative !important;
         }
         .close-button > button {
+             background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 44 44' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0L0 12' transform='translate(12 12)' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M0 0L12 12' transform='translate(12 12)' stroke='white' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
             background-color: transparent;
             width: 48px;
             height: 48px;
@@ -115,13 +116,6 @@ export default ({ doc, props, event }) => {
             position: absolute;
             z-index: 50;
             right: 0;
-            margin-right: 2px;
-            margin-top: 2px;
-        }
-
-        .close-button > button > svg {
-            width: 48px;
-            height: 48px;
         }
 
         .error{
@@ -150,23 +144,16 @@ export default ({ doc, props, event }) => {
     const closeModal = () => event.trigger(MODAL_EVENT.MODAL_HIDE);
     const checkForErrors = element => {
         ZalgoPromise.delay(ERROR_DELAY).then(() => {
-            const errorElement = element.querySelector('#errMsg');
             // check to see if modal content class exists
-            if (errorElement) {
+            if (element.querySelector('.error')) {
                 // looks like there is an error if modal content class does not exist.
                 // assign variable to state and access in UI
-                errorElement.style.display = 'block';
-                errorElement.textContent = 'Error loading Modal';
-                // TODO: should we report this failure to our log endpoint?
+                element.querySelector('.error').style.display = 'block';
+                element.querySelector('.error').textContent = 'Error loading Modal';
             }
         });
     };
-    const focusCloseButton = element => {
-        window.requestAnimationFrame(() => {
-            // TODO: determine how to get this to re-focus if the prerender is dismissed and re-opened
-            element.focus();
-        });
-    };
+
     return (
         <html lang="en">
             <head>
@@ -175,45 +162,14 @@ export default ({ doc, props, event }) => {
             </head>
             <style nonce={props.cspNonce}>{styles}</style>
             <body onRender={checkForErrors}>
-                <div class="modal" aria-errormessage="errMsg">
-                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
-                    <div class="overlay" role="dialog" onClick={closeModal} />
+                <div class="modal">
+                    <div class="overlay" onClick={closeModal} />
                     <div class="top-overlay" />
                     <div class="modal-content">
                         <div class="close-button">
-                            <button
-                                id="prerender-close-btn"
-                                onClick={closeModal}
-                                type="button"
-                                aria-label="Close"
-                                onRender={focusCloseButton}
-                            >
-                                <svg
-                                    aria-hidden="true"
-                                    width="36"
-                                    height="36"
-                                    viewBox="0 0 36 36"
-                                    fill="none"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path
-                                        d="M12 0L0 12"
-                                        transform="translate(12 12)"
-                                        stroke="white"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                    />
-                                    <path
-                                        d="M0 0L12 12"
-                                        transform="translate(12 12)"
-                                        stroke="white"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                    />
-                                </svg>
-                            </button>
+                            <button onClick={closeModal} type="button" />
                         </div>
-                        <div id="errMsg" class="error" />
+                        <div class="error"></div>
                         <Spinner nonce={props.cspNonce} />
                     </div>
                 </div>