Merge pull request #262 from hyva-themes/260/other-addresses-hide

#260 Do not show "Other Addresses" section in case of only one address in use

src/Plugin/CheckoutController/Index.php

@@ -52,7 +52,6 @@ public function aroundExecute(CheckoutIndex $subject, callable $proceed)
                 ->setModule('hyva')
                 ->setController('reactcheckout')
                 ->forward('index');
-
         } else {
             $result = $proceed();
         }

src/Plugin/CustomerController/AjaxLogin.php

@@ -60,6 +60,7 @@ public function __construct(
      * @param  \Magento\Customer\Controller\Ajax\Login  $ajaxLoginController
      * @param  \Magento\Framework\Controller\ResultInterface  $result
      * @return \Magento\Framework\Controller\ResultInterface
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
      */
     public function afterExecute(
         CustomerAjaxLoginController $ajaxLoginController,

src/Result/JsonFactory.php

@@ -12,6 +12,7 @@ class JsonFactory extends \Magento\Framework\Controller\Result\JsonFactory
      *
      * @param  \Magento\Framework\ObjectManagerInterface  $objectManager
      * @param  string  $instanceName
+     * phpcs:ignore Generic.CodeAnalysis.UselessOverridingMethod.Found
      */
     public function __construct(
         ObjectManagerInterface $objectManager,

src/reactapp/src/components/billingAddress/components/BillingAddressFormikProvider.jsx

@@ -89,7 +89,10 @@ function BillingAddressFormikProvider({ children, formikData }) {
   );
 
   useEffect(() => {
-    if (forceFilledAddress === selectedAddress || !cartHasBillingAddress) {
+    if (
+      !isNewAddress &&
+      (forceFilledAddress === selectedAddress || !cartHasBillingAddress)
+    ) {
       if (customerHasAddress(customerAddressList)) {
         setFormToViewMode();
       }
@@ -116,6 +119,7 @@ function BillingAddressFormikProvider({ children, formikData }) {
     }
   }, [
     isSame,
+    isNewAddress,
     selectedAddress,
     setFormToViewMode,
     forceFilledAddress,

src/reactapp/src/components/billingAddress/components/BillingAddressView.jsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { CreateNewAddressLink } from '../../address';
 import BillingAddressOthers from './BillingAddressOthers';
 import BillingAddressSelected from './BillingAddressSelected';
-import { _isObjEmpty } from '../../../utils';
+import { _keys } from '../../../utils';
 import { CART_BILLING_ADDRESS } from '../utility';
+import LocalStorage from '../../../utils/localStorage';
 import { isCartAddressValid } from '../../../utils/address';
 import useBillingAddressAppContext from '../hooks/useBillingAddressAppContext';
 import useBillingAddressCartContext from '../hooks/useBillingAddressCartContext';
@@ -24,8 +25,13 @@ function BillingAddressView() {
   } = useBillingAddressFormikContext();
   const { cartBillingAddress } = useBillingAddressCartContext();
   const { isLoggedIn, customerAddressList } = useBillingAddressAppContext();
-  const hideOtherAddrSection = isLoggedIn && _isObjEmpty(customerAddressList);
   const isCartShippingAddressValid = isCartAddressValid(cartBillingAddress);
+  const mostRecentAddressList = LocalStorage.getMostRecentlyUsedAddressList();
+  // hide other section if there exists only one address for use.
+  const hideOtherAddrSection =
+    isLoggedIn &&
+    _keys(customerAddressList).length <= 1 &&
+    !_keys(mostRecentAddressList).length;
 
   const newAddressClickHandler = () => {
     setIsNewAddress(true);

src/reactapp/src/components/shippingAddress/components/ShippingAddressView.jsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { CreateNewAddressLink } from '../../address';
 import ShippingAddressOthers from './ShippingAddressOthers';
 import ShippingAddressSelected from './ShippingAddressSelected';
-import { _isObjEmpty } from '../../../utils';
+import { _keys } from '../../../utils';
 import { CART_SHIPPING_ADDRESS } from '../utility';
+import LocalStorage from '../../../utils/localStorage';
 import { isCartAddressValid } from '../../../utils/address';
 import useShippingAddressAppContext from '../hooks/useShippingAddressAppContext';
 import useShippingAddressCartContext from '../hooks/useShippingAddressCartContext';
@@ -24,8 +25,13 @@ function ShippingAddressView() {
   } = useShippingAddressFormikContext();
   const { cartShippingAddress } = useShippingAddressCartContext();
   const { isLoggedIn, customerAddressList } = useShippingAddressAppContext();
-  const hideOtherAddrSection = isLoggedIn && _isObjEmpty(customerAddressList);
   const isCartShippingAddressValid = isCartAddressValid(cartShippingAddress);
+  const mostRecentAddressList = LocalStorage.getMostRecentlyUsedAddressList();
+  // hide other section if there exists only one address for use.
+  const hideOtherAddrSection =
+    isLoggedIn &&
+    _keys(customerAddressList).length <= 1 &&
+    !_keys(mostRecentAddressList).length;
 
   const newAddressClickHandler = () => {
     setIsNewAddress(true);

src/view/frontend/templates/react-container.phtml

@@ -14,14 +14,14 @@ $configProvider = $block->getData('checkout_config_provider');
 <div
     id="react-checkout"
     data-base_url="<?= $block->getBaseUrl() ?>"
-    data-static_file_path="<?= $block->getViewFileUrl('Hyva_ReactCheckout/js') ?>"
-    data-checkout_config="<?= $escaper->escapeHtmlAttr($configProvider->getConfig()) ?>"
+    data-base_url="<?= $escaper->escapeUrl($block->getBaseUrl()) ?>"
+    data-static_file_path="<?= $escaper->escapeUrl($block->getViewFileUrl('Hyva_ReactCheckout')) ?>"
 >
     <div class="container">
         <div class="flex flex-col max-h-screen my-6 lg:flex-row">
             <div class="w-full lg:w-3/5 md:mr-2">
                 <div class="mr-1 space-y-2">
-                    <div class="card w-full px-4 py-4">
+                    <div class="w-full px-4 py-4 card">
                         <div class="flex space-x-4 animate-pulse">
                             <div class="w-12 h-12 bg-gray-400 rounded-full"></div>
                             <div class="flex-1 py-1 space-y-4">
@@ -33,7 +33,7 @@ $configProvider = $block->getData('checkout_config_provider');
                             </div>
                         </div>
                     </div>
-                    <div class="card w-full px-4 py-4">
+                    <div class="w-full px-4 py-4 card">
                         <div class="flex space-x-4 animate-pulse">
                             <div class="w-12 h-12 bg-gray-400 rounded-full"></div>
                             <div class="flex-1 py-1 space-y-4">
@@ -45,7 +45,7 @@ $configProvider = $block->getData('checkout_config_provider');
                             </div>
                         </div>
                     </div>
-                    <div class="card w-full px-4 py-4">
+                    <div class="w-full px-4 py-4 card">
                         <div class="flex space-x-4 animate-pulse">
                             <div class="w-12 h-12 bg-gray-400 rounded-full"></div>
                             <div class="flex-1 py-1 space-y-4">
@@ -110,9 +110,9 @@ $configProvider = $block->getData('checkout_config_provider');
                 </div>
             </div>
 
-            <div class="w-full lg:w-2/5 sticky self-start">
+            <div class="sticky self-start w-full lg:w-2/5">
                 <div class="ml-1 space-y-2">
-                    <div class="card w-full px-4 py-4">
+                    <div class="w-full px-4 py-4 card">
                         <div class="flex space-x-4 animate-pulse">
                             <div class="w-12 h-12 bg-gray-400 rounded-full"></div>
                             <div class="flex-1 py-1 space-y-4">
@@ -154,7 +154,7 @@ $configProvider = $block->getData('checkout_config_provider');
                             </div>
                         </div>
                     </div>
-                    <div class="card w-full px-4 py-4">
+                    <div class="w-full px-4 py-4 card">
                         <div class="flex space-x-4 animate-pulse">
                             <div class="w-12 h-12 bg-gray-400 rounded-full"></div>
                             <div class="flex-1 py-1 space-y-4">

src/view/frontend/templates/react-script.phtml

@@ -7,6 +7,7 @@ use Magento\Framework\View\Element\Template;
 /** @var Template $block */
 /** @var Escaper $escaper */
 
+$buildJsFile = 'Hyva_ReactCheckout::js/react-checkout.js';
 ?>
 <script>
     function loadReactCartScript () {
@@ -16,7 +17,7 @@ use Magento\Framework\View\Element\Template;
 
         newScript.async = true;
         newScript.defer = true;
-        newScript.src = '<?= $escaper->escapeUrl($block->getViewFileUrl('Hyva_ReactCheckout::js/react-checkout.js')); ?>';
+        newScript.src = '<?= $escaper->escapeUrl($block->getViewFileUrl($buildJsFile)); ?>';
 
         firstScript.parentNode.insertBefore(newScript, firstScript);
     }

src/view/frontend/templates/translation.phtml

@@ -1,8 +1,12 @@
 <?php
 use Magento\Framework\Escaper;
+use Hyva\ReactCheckout\Block\CheckoutTranslator;
 
-/** @var \Hyva\ReactCheckout\Block\CheckoutTranslator $block  */
+/**
+ * @var CheckoutTranslator $block
+ * @var Escaper $escaper
+ */
 ?>
 <script>
-    var CHECKOUT_TRANSLATIONS = '<?= $block->getTranslations()  ?>';
+    var CHECKOUT_TRANSLATIONS = '<?= $escaper->escapeJs($block->getTranslations())  ?>';
 </script>