Fix: [FO]Carrier extra content not work on deliveryFormSelector change

src/js/constants/events-map.ts

@@ -14,4 +14,5 @@ export default {
   updateProduct: 'updateProduct',
   updatedProduct: 'updatedProduct',
   updateFacets: 'updateFacets',
+  updatedDeliveryForm: 'updatedDeliveryForm',
 };

src/js/constants/selectors-map.ts

@@ -67,6 +67,9 @@ export const checkout = {
   actionsButtons: '.js-back, .js-edit-addresses, .js-edit-shipping',
   termsLink: '.js-terms a',
   checkoutModal: '#checkout-modal',
+  carrierExtraContentWrapper: '.carrier__extra-content-wrapper',
+  carrierExtraContent: '.carrier__extra-content',
+  carrierExtraContentActive: '.carrier__extra-content-wrapper--active',
 };
 
 export const progressRing = {

src/js/pages/checkout.ts

@@ -143,6 +143,48 @@ const initCheckout = () => {
       }
     }
   });
+
+  // Prestashop event triggers after selecting different carrier
+  prestashop.on(events.updatedDeliveryForm, (params: Theme.DeliveryOptionForm.DeliveryOptionItem): void => {
+    if (typeof params.deliveryOption === 'undefined' || Object.keys(params.deliveryOption).length === 0) {
+      return;
+    }
+
+    // Hide all extra content in delivery step
+    const extraContentElements = document.querySelectorAll(CheckoutMap.carrierExtraContentWrapper);
+    extraContentElements.forEach((content: HTMLElement) => {
+      content.style.maxHeight = '0';
+    });
+    const extraContentElementToShow = params.deliveryOption[0]
+      ?.querySelector(CheckoutMap.carrierExtraContentWrapper) as HTMLElement;
+
+    // Show selected delivery method extra content
+    if (extraContentElementToShow != null) {
+      const content = extraContentElementToShow.querySelector(CheckoutMap.carrierExtraContent);
+
+      if (content != null) {
+        extraContentElementToShow.style.maxHeight = `${content.clientHeight}px`;
+      }
+    }
+  });
+
+  const setMaxHeightToActiveCarrierExtraContent = () => {
+    const activeExtraContent = document.querySelector(`${CheckoutMap.carrierExtraContentActive}`) as HTMLElement;
+    const content = activeExtraContent.querySelector(CheckoutMap.carrierExtraContent) as HTMLElement;
+
+    if (activeExtraContent != null && content != null) {
+      activeExtraContent.style.maxHeight = `${content.clientHeight}px`;
+    }
+  };
+
+  // Initiate active carrier extra content height
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    setTimeout(() => { setMaxHeightToActiveCarrierExtraContent(); }, 1);
+  } else {
+    document.addEventListener('DOMContentLoaded', () => {
+      setMaxHeightToActiveCarrierExtraContent();
+    });
+  }
 };
 
 export default initCheckout;

src/scss/core/components/_checkout-steps.scss

@@ -108,3 +108,8 @@ $component-name: checkout__steps;
     color: var(--bs-gray-900);
   }
 }
+
+.carrier__extra-content-wrapper {
+  overflow: hidden;
+  transition: max-height 0.5s ease-in-out;
+}

templates/checkout/_partials/steps/shipping.tpl

@@ -53,8 +53,10 @@
                       </span>
                     </div>
                   </label>
-                  <div class="carrier__extra-content js-carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
-                    {$carrier.extraContent nofilter}
+                  <div class="carrier__extra-content-wrapper {if $delivery_option == $carrier_id} carrier__extra-content-wrapper--active {/if} js-carrier-extra-content" {if $delivery_option !== $carrier_id}style="max-height:0px"{/if}>
+                    <div class="carrier__extra-content">
+                      {$carrier.extraContent nofilter}
+                    </div>
                   </div>
                   {if !$smarty.foreach.delivery_options.last}
                     <hr />

types/events.d.ts

@@ -14,4 +14,5 @@ declare type EVENTS = {
   updateProduct: string,
   updatedProduct: string,
   updateFacets: string,
+  updatedDeliveryForm: string,
 }

types/selectors.d.ts

@@ -67,6 +67,9 @@ declare type checkout = {
   actionsButtons: string,
   termsLink: string,
   checkoutModal: string,
+  carrierExtraContentWrapper: string,
+  carrierExtraContent: string,
+  carrierExtraContentActive: string,
 };
 
 declare type progressRing = {

types/useDeliveryOption.d.ts

@@ -0,0 +1,23 @@
+/**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare namespace Theme {
+    namespace DeliveryOptionForm {
+        interface DeliveryOptionItem {
+            dataForm?: DataForm[],
+            deliveryOption?: Record<number, HTMLElement>,
+            resp?: Response,
+        }
+
+        interface Response {
+            preview?: string,
+        }
+
+        interface DataForm {
+            name?: string,
+            value?: string,
+        }
+    }
+}