test actual feature on branch

adobecom · Aug 16, 2024 · f4284ed · f4284ed
1 parent 67ada33
commit f4284ed
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/ecc/blocks/form-handler/controllers/venue-info-component-controller.js b/ecc/blocks/form-handler/controllers/venue-info-component-controller.js
@@ -4,6 +4,18 @@ import { ECC_ENV } from '../../../scripts/scripts.js';
 import { changeInputValue, getSecret } from '../../../scripts/utils.js';
 import { buildErrorMessage } from '../form-handler.js';
 
+function togglePrefillableFields(component, showPrefilledFields) {
+  const addressInput = component.querySelector('#venue-info-venue-address');
+  const cityInput = component.querySelector('#location-city');
+  const stateInput = component.querySelector('#location-state');
+  const postalCodeInput = component.querySelector('#location-zip-code');
+  const countryInput = component.querySelector('#location-country');
+
+  [addressInput, cityInput, stateInput, postalCodeInput, countryInput].forEach((input) => {
+    input.classList.toggle('hidden', showPrefilledFields);
+  });
+}
+
 async function loadGoogleMapsAPI(callback) {
   const script = document.createElement('script');
   const apiKey = await getSecret(`${ECC_ENV}-google-places-api`);
@@ -83,6 +95,8 @@ function initAutocomplete(el) {
       changeInputValue(country, 'value', addressInfo.country);
       changeInputValue(placeId, 'value', place.place_id);
       changeInputValue(mapUrl, 'value', place.url);
+
+      togglePrefillableFields(el, true);
     }
 
     if (place.geometry) {
@@ -121,6 +135,8 @@ export default async function init(component, props) {
   const mapUrlInput = component.querySelector('#google-map-url');
   const gmtoffsetInput = component.querySelector('#google-place-gmt-offset');
 
+  togglePrefillableFields(component, false);
+
   venueNameInput.addEventListener('change', () => {
     if (!venueNameInput.value) {
       changeInputValue(addressInput, 'value', '');
@@ -163,7 +179,10 @@ export default async function init(component, props) {
     changeInputValue(mapUrlInput, 'value', mapUrl);
     changeInputValue(gmtoffsetInput, 'value', venue.gmtOffset);
 
-    if (venueName) component.classList.add('prefilled');
+    if (venueName) {
+      component.classList.add('prefilled');
+      togglePrefillableFields(component, true);
+    }
   }
 
   if (showVenuePostEvent) {

diff --git a/ecc/blocks/form-handler/form-handler.css b/ecc/blocks/form-handler/form-handler.css
@@ -129,7 +129,7 @@
   outline: none;
 }
 
-.form-handler sp-textfield[quiet]:focus {
+.form-handler sp-textfield[quiet]:not(:read-only):focus {
   outline: 1px var(--color-gray-500) solid;
   border-radius: 4px;
 }

diff --git a/ecc/blocks/venue-info-component/venue-info-component.css b/ecc/blocks/venue-info-component/venue-info-component.css
@@ -1,9 +1,3 @@
-.venue-info-component {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
 .venue-info-component sp-textfield {
   box-sizing: border-box;
   font-size: var(--type-heading-m-size);
@@ -14,7 +8,6 @@
 
 .venue-info-component sp-textfield[readonly] {
   padding-bottom: 10px;
-  border-bottom: 1px solid var(--color-gray-500);
 }
 
 .venue-info-component .venue-info-field-location .location-input[readonly] {
@@ -44,7 +37,10 @@
 .venue-info-component .venue-info-field-location .location-wrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: 32px;
+}
+
+.venue-info-component #venue-info-venue-address {
+  border-bottom: none;
 }
 
 .venue-info-component .venue-info-field-location .location-input {
@@ -56,6 +52,7 @@
 }
 
 .venue-info-component .venue-info-addition-wrapper {
+  margin-top: 40px;
   display: flex;
   justify-content: flex-end;
 }

diff --git a/ecc/blocks/venue-info-component/venue-info-component.js b/ecc/blocks/venue-info-component/venue-info-component.js
@@ -155,6 +155,7 @@ export default function init(el) {
           id: 'venue-info-venue-address',
           quiet: true,
           size: 'xl',
+          readonly: true,
         });
         break;
       case 3: