feat: move checkout points to script

cdek-it · Nov 25, 2024 · bcf86cf · bcf86cf
1 parent 89a98ec
commit bcf86cf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "lint:css": "wp-scripts lint-style",
     "lint:js": "wp-scripts lint-js",
     "start": "wp-scripts start",
-    "env": "wp-env start --update"
+    "env": "wp-env start --update",
+    "destroy": "wp-env destroy"
   },
   "dependencies": {
     "@cdek-it/widget": "^3.11.0",

diff --git a/src/Frontend/CheckoutMapShortcode/index.js b/src/Frontend/CheckoutMapShortcode/index.js
@@ -7,19 +7,19 @@ import { debounce } from 'lodash';
 const billingCityInput = $('#billing_city');
 const shippingCityInput = $('#shipping_city');
 let widget = null;
+let el;
 
-
-
-if ((billingCityInput.val() || '') !== '' || (shippingCityInput.val() || '') !== '') {
+if ((billingCityInput.val() || '') !== '' || (shippingCityInput.val() || '') !==
+  '') {
     console.debug('[CDEK-MAP] City has value, initiating checkout update');
     $(document.body).trigger('update_checkout');
 }
 
-const closeMap = (el, errorMessage = null) => {
+const closeMap = (e, errorMessage = null) => {
     console.debug('[CDEK-MAP] Removing selected office info');
 
     $('.cdek-office-info').remove();
-    el.html(__('Choose pick-up', 'cdekdelivery'));
+    e.find('a').html(__('Choose pick-up', 'cdekdelivery'));
     $('.cdek-office-code').val('');
 
     if (widget !== null) {
@@ -35,19 +35,18 @@ const closeMap = (el, errorMessage = null) => {
     }
 };
 
-let el;
-
 const onChoose = (_type, _tariff, address) => {
     $('.cdek-office-code').val(address.code);
-    el.html(__('Re-select pick-up', 'cdekdelivery'));
+    el.find('a').html(__('Re-select pick-up', 'cdekdelivery'));
+
     const officeInfo = el.parent().children('.cdek-office-info');
     if (officeInfo.length === 0) {
-        el.before(
-          `<div class="cdek-office-info">${address.name}</div>`);
+        el.before($('<div class="cdek-office-info"></div>').text(address.name));
     } else {
-        officeInfo.html(`${address.name}`);
+        officeInfo.text(address.name);
     }
-    if ($('.cdek-office-code').data('map-auto-close')) {
+
+    if (window.cdek.close) {
         widget.close();
     }
 };
@@ -74,48 +73,47 @@ $(document.body)
           widget.clearSelection();
       }
   })
-  .on('change', '.shipping_method', () => {
-      $(document.body).trigger('update_checkout');
-  })
+  .on('change', '.shipping_method',
+    () => $(document.body).trigger('update_checkout'))
   .on('click', '.open-pvz-btn', null, (e) => {
-      el = $(e.target);
+      el = e.target.tagName === 'A' ? $(e.target.parentElement) : $(e.target);
       closeMap(el);
 
-      const points = el.data('points');
-      console.debug('[CDEK-MAP] Got points from backend:', points);
-
-      if (typeof points !== 'object') {
-          console.error('[CDEK_MAP] backend points not object');
-          closeMap(el,
-                   __('CDEK was unable to load the list of available pickup points, please select another delivery method', 'cdekdelivery'));
-
-          return;
-      } else if (!points.length) {
-          console.warn('[CDEK_MAP] backend points are empty');
-          closeMap(el,
-                   __('There are no CDEK pick-up points available in this direction, please select another delivery method')
-                   );
-
-          return;
+      try {
+          const points = JSON.parse(el.find('script').text());
+          console.debug('[CDEK-MAP] Got points from backend', points);
+
+          if (!points.length) {
+              console.warn('[CDEK-MAP] Backend points are empty');
+              closeMap(el, __(
+                'There are no CDEK pick-up points available in this direction, please select another delivery method'));
+
+              return;
+          }
+
+          if (widget === null) {
+              widget = new cdekWidget({
+                  apiKey: window.cdek.key,
+                  popup: true,
+                  debug: true,
+                  lang: window.cdek.lang,
+                  defaultLocation: el.data('city'),
+                  officesRaw: points,
+                  hideDeliveryOptions: {
+                      door: true,
+                  },
+                  onChoose,
+              });
+          } else {
+              widget.updateOfficesRaw(points);
+              widget.updateLocation(el.data('city'));
+          }
+
+          widget.open();
+      } catch (SyntaxError) {
+          console.error('[CDEK-MAP] SyntaxError during points parse');
+
+          closeMap(el, __(
+            'There are no CDEK pick-up points available in this direction, please select another delivery method'));
       }
-
-      if (widget === null) {
-          widget = new cdekWidget({
-              apiKey: window.cdek.apiKey,
-              popup: true,
-              debug: true,
-              lang: el.data('lang'),
-              defaultLocation: el.data('city'),
-              officesRaw: points,
-              hideDeliveryOptions: {
-                  door: true,
-              },
-              onChoose,
-          });
-      } else {
-          widget.updateOfficesRaw(points);
-          widget.updateLocation(el.data('city'));
-      }
-
-      widget.open();
   });
diff --git a/src/Transport/HttpClient.php b/src/Transport/HttpClient.php
@@ -64,7 +64,7 @@ public static function sendJsonRequest(
             }
 
             if ($result->isClientError()) {
-                throw new HttpClientException($result->error());
+                throw new HttpClientException($result->error() ?? []);
             }
 
             return $result;

diff --git a/src/UI/CdekWidget.php b/src/UI/CdekWidget.php
@@ -21,8 +21,12 @@ public static function registerScripts(): void
         {
             wp_register_script('cdek-widget', Loader::getPluginUrl('build/cdek-widget.umd.js'));
 
+            $shipping = ShippingMethod::factory();
+
             wp_localize_script('cdek-widget', 'cdek', [
-                'apiKey' => ShippingMethod::factory()->yandex_map_api_key,
+                'key' => $shipping->yandex_map_api_key,
+                'close' => $shipping->map_auto_close,
+                'lang' => mb_strpos(get_user_locale(), 'en') === 0 ? 'eng' : 'rus',
             ]);
         }
 

diff --git a/src/UI/CheckoutMap.php b/src/UI/CheckoutMap.php
@@ -13,7 +13,6 @@
     use Cdek\Config;
     use Cdek\Helpers\CheckoutHelper;
     use Cdek\Model\Tariff;
-    use Cdek\ShippingMethod;
 
     class CheckoutMap
     {
@@ -34,19 +33,14 @@ public function __invoke($shippingMethodCurrent): void
 
             $city = $api->cityCodeGet($cityInput, $postcodeInput);
 
-            $points = $city !== null ? $api->officeListRaw($city) : '[]';
-
-            echo '<div class="open-pvz-btn" data-points="'.
-                 esc_attr($points).
-                 '" data-city="'.
+            echo '<div class="open-pvz-btn" data-city="'.
                  esc_attr($cityInput).
-                 '" data-lang="'.
-                 (mb_strpos(get_user_locale(), 'en') === 0 ? 'eng' : 'rus').
                  '">'.
+                 '<script type="application/cdek-offices">'.
+                 wc_esc_json($city !== null ? $api->officeListRaw($city) : '[]', true).
+                 '</script><a>'.
                  esc_html__('Choose pick-up', 'cdekdelivery').
-                 '</div><input name="office_code" class="cdek-office-code" type="hidden" data-map-auto-close="'.
-                 esc_attr(ShippingMethod::factory()->map_auto_close).
-                 '">';
+                 '</a></div><input name="office_code" class="cdek-office-code" type="hidden">';
         }
 
         private function isTariffDestinationCdekOffice($shippingMethodCurrent): bool