Merge pull request #443 from adobecom/stage

[Release] Stage to Main 11/04
adobecom · Nov 7, 2024 · 03a26f9 · 03a26f9
2 parents 40bc3c3 + fa61abc
commit 03a26f9
Show file tree

Hide file tree

Showing 12 changed files with 325 additions and 265 deletions.
diff --git a/404.html b/404.html
@@ -8,7 +8,10 @@
   <meta name="header" content="global-navigation" />
   <meta name="footer" content="global-footer" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="/creativecloud/scripts/scripts.js" type="module"></script>
+  <script type="module">
+    import { scriptInit } from '/creativecloud/scripts/utils.js';
+    scriptInit();
+  </script>
   <link rel="icon" href="data:," />
 </head>
 

diff --git a/creativecloud/blocks/nonprofit/constants.js b/creativecloud/blocks/nonprofit/constants.js
@@ -118,19 +118,19 @@ export const countries = [
   },
   {
     code: 'COM',
-    name: 'Comoros (the)',
+    name: 'Comoros',
   },
   {
     code: 'COG',
-    name: 'Congo (the)',
+    name: 'Congo',
   },
   {
     code: 'COD',
     name: 'Congo (the Democratic Republic of the)',
   },
   {
     code: 'COK',
-    name: 'Cook Islands (the)',
+    name: 'Cook Islands',
   },
   {
     code: 'HRV',
@@ -158,7 +158,7 @@ export const countries = [
   },
   {
     code: 'DOM',
-    name: 'Dominican Republic (the)',
+    name: 'Dominican Republic',
   },
   {
     code: 'ECU',
@@ -310,7 +310,7 @@ export const countries = [
   },
   {
     code: 'NLD',
-    name: 'Netherlands (the)',
+    name: 'Netherlands',
   },
   {
     code: 'NZL',
@@ -330,7 +330,7 @@ export const countries = [
   },
   {
     code: 'PHL',
-    name: 'Philippines (the)',
+    name: 'Philippines',
   },
   {
     code: 'POL',
@@ -342,7 +342,7 @@ export const countries = [
   },
   {
     code: 'RUS',
-    name: 'Russian Federation (the)',
+    name: 'Russian Federation',
   },
   {
     code: 'SRB',
@@ -398,11 +398,11 @@ export const countries = [
   },
   {
     code: 'GBR',
-    name: 'United Kingdom of Great Britain and Northern Ireland (the)',
+    name: 'United Kingdom of Great Britain and Northern Ireland',
   },
   {
     code: 'USA',
-    name: 'United States of America (the)',
+    name: 'United States of America',
   },
   {
     code: 'VUT',

diff --git a/creativecloud/blocks/nonprofit/nonprofit.css b/creativecloud/blocks/nonprofit/nonprofit.css
@@ -145,6 +145,10 @@
   max-width: 800px;
 }
 
+.nonprofit-url {
+  text-decoration: underline;
+}
+
 .np-form {
   width: var(--np-content-width);
   display: flex;
@@ -164,6 +168,11 @@
   cursor: pointer;
 }
 
+.np-button:hover {
+  text-decoration: none;
+  color: var(--color-white);
+}
+
 .np-button:disabled {
   background-color: var(--np-button-disabled-background);
   color: var(--np-button-disabled-color);
@@ -502,3 +511,11 @@
     margin: 0;
   }
 }
+
+.np-input.np-error  {
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url('data:image/svg+xml,%3csvg width=\'22\' height=\'22\' viewBox=\'0 0 22 22\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M10.564 2.20593L1.31504 18.7559C1.27252 18.832 1.25061 18.9179 1.25149 19.005C1.25237 19.0921 1.27602 19.1775 1.32008 19.2527C1.36414 19.3279 1.42709 19.3903 1.50269 19.4336C1.57828 19.477 1.6639 19.4999 1.75104 19.4999H20.251C20.3837 19.4999 20.5108 19.4473 20.6046 19.3535C20.6984 19.2597 20.751 19.1325 20.751 18.9999C20.7512 18.9144 20.7291 18.8304 20.687 18.7559L11.436 2.20593C11.3926 2.1285 11.3293 2.06405 11.2527 2.01919C11.176 1.97433 11.0888 1.95068 11 1.95068C10.9113 1.95068 10.8241 1.97433 10.7474 2.01919C10.6708 2.06405 10.6075 2.1285 10.564 2.20593ZM12 17.2499C12 17.3162 11.9737 17.3798 11.9268 17.4267C11.8799 17.4736 11.8163 17.4999 11.75 17.4999H10.25C10.1837 17.4999 10.1202 17.4736 10.0733 17.4267C10.0264 17.3798 10 17.3162 10 17.2499V15.7499C10 15.6836 10.0264 15.62 10.0733 15.5732C10.1202 15.5263 10.1837 15.4999 10.25 15.4999H11.75C11.8163 15.4999 11.8799 15.5263 11.9268 15.5732C11.9737 15.62 12 15.6836 12 15.7499V17.2499ZM12 13.7499C12 13.8162 11.9737 13.8798 11.9268 13.9267C11.8799 13.9736 11.8163 13.9999 11.75 13.9999H10.25C10.1837 13.9999 10.1202 13.9736 10.0733 13.9267C10.0264 13.8798 10 13.8162 10 13.7499V7.74993C10 7.68363 10.0264 7.62004 10.0733 7.57315C10.1202 7.52627 10.1837 7.49993 10.25 7.49993H11.75C11.8163 7.49993 11.8799 7.52627 11.9268 7.57315C11.9737 7.62004 12 7.68363 12 7.74993V13.7499Z\' fill=\'%23D31510\'/%3e%3c/svg%3e');
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: 1em;
+}
diff --git a/creativecloud/blocks/nonprofit/nonprofit.js b/creativecloud/blocks/nonprofit/nonprofit.js
@@ -9,8 +9,7 @@ import { getNonprofitIconTag, NONPRFIT_ICONS } from './icons.js';
 import nonprofitSelect from './nonprofit-select.js';
 
 const miloLibs = setLibs('/libs');
-const { createTag } = await import(`${miloLibs}/utils/utils.js`);
-
+const { createTag, getConfig } = await import(`${miloLibs}/utils/utils.js`);
 const removeOptionElements = (element) => {
   const children = element.querySelectorAll(':scope > div');
   children.forEach((child) => {
@@ -311,6 +310,15 @@ function renderStepper(containerTag) {
 
 // #region Render form
 
+function replaceURL(tagObject) {
+  const { locale } = getConfig();
+  const privacyURL = window.mph['nonprofit-privacy-policy-url'] || `https://www.adobe.com${locale.prefix}/privacy/policy.html`;
+  const termsURL = window.mph['nonprofit-terms-of-use-url'] || `https://www.adobe.com${locale.prefix}/legal/terms.html`;
+  tagObject.innerHTML = tagObject.innerHTML.replace(window.mph['nonprofit-terms-of-use'], `<a class="nonprofit-url" href="${termsURL}">${window.mph['nonprofit-terms-of-use']}</a>`);
+  tagObject.innerHTML = tagObject.innerHTML.replace(window.mph['nonprofit-privacy-policy'], `<a class="nonprofit-url" href="${privacyURL}">${window.mph['nonprofit-privacy-policy']}</a>`);
+  tagObject.innerHTML = tagObject.innerHTML.replace(window.mph['nonprofit-partner-name'], `<a class="nonprofit-url" target="_blank" href="${window.mph['nonprofit-partner-url']}">${window.mph['nonprofit-partner-name']}</a>`);
+}
+
 function getDescriptionTag(title, subtitle) {
   const descriptionTag = createTag('div', { class: 'np-description' });
   const titleTag = createTag('span', { class: 'np-title' }, title);
@@ -319,7 +327,7 @@ function getDescriptionTag(title, subtitle) {
 
   if (subtitle) {
     const subtitleTag = createTag('span', { class: 'np-subtitle' }, subtitle);
-
+    replaceURL(subtitleTag);
     descriptionTag.append(subtitleTag);
   }
 
@@ -332,6 +340,7 @@ function getSubmitTag() {
     type: 'submit',
     value: window.mph['nonprofit-continue'],
     disabled: 'disabled',
+    'daa-ll': 'continue',
   });
 }
 
@@ -515,6 +524,8 @@ function trackSubmitCondition(formTag) {
 
 // Select non-profit
 function renderSelectNonprofit(containerTag) {
+  containerTag.setAttribute('daa-lh', 'find your nonprofit');
+
   // Description
   const descriptionTag = getDescriptionTag(
     window.mph['nonprofit-title-select-non-profit'],
@@ -566,7 +577,7 @@ function renderSelectNonprofit(containerTag) {
       const cannotFindTag = createTag('div', { class: 'np-select-list-tag np-organization-cannot-find' });
       const cannotFindLinkTag = createTag(
         'a',
-        { tabindex: 0 },
+        { tabindex: 0, 'daa-ll': 'org not found' },
         window.mph['nonprofit-organization-cannot-find'],
       );
       // Cannot find action handler
@@ -647,6 +658,8 @@ function renderSelectNonprofit(containerTag) {
 
 // Organization details
 function renderOrganizationDetails(containerTag) {
+  containerTag.setAttribute('daa-lh', 'confirm org details');
+
   // Description
   const descriptionTag = getDescriptionTag(window.mph['nonprofit-title-organization-details']);
 
@@ -756,6 +769,8 @@ function renderOrganizationDetails(containerTag) {
 
 // Organization address
 function renderOrganizationAddress(containerTag) {
+  containerTag.setAttribute('daa-lh', 'confirm org address');
+
   // Description
   const descriptionTag = getDescriptionTag(window.mph['nonprofit-title-organization-address']);
 
@@ -824,6 +839,8 @@ function renderOrganizationAddress(containerTag) {
 
 // Personal data
 function renderPersonalData(containerTag) {
+  containerTag.setAttribute('daa-lh', 'confirm your details');
+
   // Description
   const descriptionTag = getDescriptionTag(
     window.mph['nonprofit-title-personal-details'],
@@ -850,7 +867,7 @@ function renderPersonalData(containerTag) {
   });
 
   const emailTag = getNonprofitInput({
-    type: 'text',
+    type: 'email',
     name: 'email',
     label: window.mph['nonprofit-email'],
     placeholder: window.mph['nonprofit-email-placeholder'],
@@ -862,11 +879,29 @@ function renderPersonalData(containerTag) {
     { class: 'np-personal-data-disclaimer' },
     window.mph['nonprofit-personal-data-disclaimer'],
   );
+  const emailInput = emailTag.querySelector('input');
+  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
+  const validateEmail = () => {
+    const isValid = emailInput.validity.valid && emailPattern.test(emailInput.value);
+    emailInput.classList.toggle('np-error', !isValid);
+    return isValid;
+  };
+
+  emailInput.addEventListener('input', validateEmail);
+  emailInput.addEventListener('blur', validateEmail);
+
+  replaceURL(disclaimerTag);
   const submitTag = getSubmitTag();
 
+  formTag.addEventListener('input', () => {
+    const isFormValid = formTag.checkValidity() && validateEmail();
+    submitTag.toggleAttribute('disabled', !isFormValid);
+  });
+
   formTag.append(firstNameTag, lastNameTag, emailTag, disclaimerTag, submitTag);
 
+  formTag.append(firstNameTag, lastNameTag, emailTag, submitTag);
   trackSubmitCondition(formTag);
 
   formTag.addEventListener('submit', async (ev) => {
@@ -901,6 +936,8 @@ function renderPersonalData(containerTag) {
 }
 
 function renderApplicationReview(containerTag) {
+  containerTag.setAttribute('daa-lh', 'verification');
+
   const applicationReviewTag = createTag('div', { class: 'np-application-review-container' });
 
   const titleTag = createTag(
@@ -913,6 +950,7 @@ function renderApplicationReview(containerTag) {
     { class: 'np-application-review-detail' },
     window.mph['nonprofit-detail-1-application-review'],
   );
+  replaceURL(detail1Tag);
   const detail2Tag = createTag(
     'span',
     { class: 'np-application-review-detail' },
@@ -925,8 +963,13 @@ function renderApplicationReview(containerTag) {
   applicationReviewTag.append(titleTag, detail1Tag, detail2Tag);
 
   const returnToAcrobatForNonprofitsTag = createTag(
-    'button',
-    { class: 'np-button' },
+    'a',
+    {
+      class: 'np-button',
+      href: 'https://www.adobe.com/nonprofits.html',
+      'daa-ll': 'return to acrobat for nonprofits',
+    },
+
     window.mph['nonprofit-return-to-acrobat-for-nonprofits'],
   );