2.3.0

- Added preselect for city and district dropdown on load - Added sanitazion to user input - Added optional class to checkout form to check whether to hide the original city field or not
hrsetyono · May 20, 2022 · d995619 · d995619
1 parent ffae673
commit d995619
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # WooCommerce Indonesia Shipping v2
 
+> This plugin requires PRO License from RajaOngkir.com. We are not affiliated with them in any way.
+
 ![](https://raw.github.com/hrsetyono/cdn/master/woocommerce-indo-shipping/ongkir-banner.jpg)
 
 Ultimate *Ongkos Kirim* Plugin for major Indonesian Shipping courier.
 
-This plugin requires PRO License purchase from RajaOngkir.com. We are not affiliated with RajaOngkir in any way.
-
-This plugin is free and provided as is. We are not responsible for any damage caused by bugs. If you found a bug, please submit it [here](https://github.com/hrsetyono/woocommerce-indo-shipping/issues).
+This plugin is free and provided as is. If you found a bug, please submit it [here](https://github.com/hrsetyono/woocommerce-indo-shipping/issues).
 
 **Supported Couriers:**
 

diff --git a/dist/ongkir-public.css b/dist/ongkir-public.css
diff --git a/dist/ongkir-public.js b/dist/ongkir-public.js
diff --git a/includes/ongkir-api.php b/includes/ongkir-api.php
@@ -68,7 +68,7 @@ function get_cities_api($params) {
    */
   function get_districts_api($params) {
     $prov_id = Ongkir_Data::get_province_id($params['prov_code']);
-    $cities = Ongkir_Data::get_cities($prov_id, true);
+    $cities = Ongkir_Data::get_cities($prov_id);
     $city = $cities[$params['city_id']] ?? null;
 
     // abort if city not found
@@ -91,43 +91,32 @@ function get_districts_api($params) {
    * @return array
    */
   function get_fields_api($params) {
+    $city_id = 0;
+    $field_value = '';
+
     // Convert District ID to City ID
     if ($params['district_id'] != '0') {
       $prov_id = Ongkir_Data::get_province_id($params['prov_code']);
-      $cities = Ongkir_Data::get_cities($prov_id, true);
+      $cities = Ongkir_Data::get_cities($prov_id);
 
-      foreach ($cities as $city_id => $c) {
-        foreach ($c['districts'] as $district_id => $name) {
+      foreach ($cities as $id => $c) {
+        foreach ($c['districts'] as $dist_id => $dist_name) {
           // find district that has the same ID as the one passed on
-          if ($params['district_id'] == $district_id) {
-            $params['city_id'] = $city_id;
+          if ($params['district_id'] == $dist_id) {
+            $city_id = $id;
+            $field_value = $c['city_name'] . ", {$dist_name} [{$dist_id}]";
             break;
           }
         }
+
+        if ($city_id > 0) {
+          break;
+        }
       }
-    } else {
-      $params['city_id'] = '0';
     }
 
-    $cities_field = $this->_get_cities_field($params['type'], $params['prov_code']);
-    $districts_field = $this->_get_districts_field($params['type'], $params['prov_code'], $params['city_id']);
-
-    // add selected attribute
-    if (isset($params['city_id'])) {
-      $cities_field = preg_replace(
-        '/(_city_field[\s\S]+)(\"' . $params['city_id'] . '\"\s)(\>)([\s\S]+\/p>)/Ui',
-        '$1$2selected$3$4',
-        $cities_field
-      );
-    }
-
-    if ($params['district_id'] != '0') {
-      $districts_field = preg_replace(
-        '/(_district_field[\s\S]+)(' . $params['district_id'] . '\]\"\s)(\>)([\s\S]+\/p>)/Ui',
-        '$1$2selected$3$4',
-        $districts_field
-      );
-    }
+    $cities_field = $this->_get_cities_field($params['type'], $params['prov_code'], $city_id);
+    $districts_field = $this->_get_districts_field($params['type'], $params['prov_code'], $city_id, $field_value);
 
     return $cities_field . $districts_field;
   }
@@ -139,18 +128,18 @@ function get_fields_api($params) {
    * 
    * @return array - Currently only has one item: 'field' which contains the HTML form field.
    */
-  private function _get_cities_field($type, $prov_code = '0') {
+  private function _get_cities_field($type, $prov_code = '0', $city_id = 0) {
     $field = '';
 
     // if code is 0, show empty placeholder dropdown
     if ($prov_code == '0') {
-      $field = woocommerce_form_field( "_{$type}_city", [
+      $field = woocommerce_form_field("_{$type}_city", [
         'type' => 'select',
         'label' => __('City', 'woocommerce'),
         'options' => [0 => __('Pilih Provinsi terlebih dahulu...')],
         'return' => true,
         'required' => true,
-      ] );
+      ]);
     }
     // else
     else {
@@ -162,7 +151,7 @@ private function _get_cities_field($type, $prov_code = '0') {
         'options' => $cities,
         'return' => true,
         'required' => true,
-      ] );
+      ], $city_id);
     }
 
     return $field;
@@ -176,12 +165,13 @@ private function _get_cities_field($type, $prov_code = '0') {
   private function _get_districts_field(
     $type,
     $prov_code,
-    $city_id = '0'
+    $city_id = 0,
+    $field_value = ''
   ) {
     $field = '';
 
     // If city ID is empty, show placeholder
-    if ($city_id == '0') {
+    if ($city_id === 0) {
       $field = woocommerce_form_field("_{$type}_district", [
         'type' => 'select',
         'label' => __('Kecamatan'),
@@ -203,7 +193,7 @@ private function _get_districts_field(
         'options' => $districts,
         'return' => true,
         'required' => true
-      ]);
+      ], $field_value);
     }
 
     return $field;

diff --git a/includes/ongkir-data.php b/includes/ongkir-data.php
@@ -15,7 +15,7 @@ static function get_cities($prov_id, $raw = false) {
     }
 
     // if exists, scan for duplicate city name
-    if($data) {
+    if ($data) {
       $data = self::_prefix_dupe_city_name($prov_id, $data);
       return $data;
     } else {

diff --git a/includes/rajaongkir.php b/includes/rajaongkir.php
@@ -7,7 +7,7 @@
  */
 class RajaOngkir {
   private $api_key;
-  private $base_url;
+  private $base_url = 'https://pro.rajaongkir.com/api';
 
   function __construct($key = null) {
     // set API key
@@ -18,15 +18,6 @@ function __construct($key = null) {
       $cached_license = get_transient('wcis_license');
       $this->api_key = $cached_license['key'];
     }
-
-    // set base URL
-    $urls = [
-      'starter' => 'https://api.rajaongkir.com/starter',
-      'pro' => 'https://pro.rajaongkir.com/api',
-    ];
-
-    $license_type = 'pro';
-    $this->base_url = $urls[$license_type];
   }
 
 

diff --git a/public/assets/api.js b/public/assets/api.js
@@ -5,12 +5,15 @@
  *   api.get(url).then((result) => { .. });
  *   api.post(url, data).then((result) => { ... });
  */
-const baseURL = ongkirLocalize.ONGKIR_API;
+const { baseURL } = ongkirLocalize;
+
 const api = {
   get(endpoint) {
     return window.fetch(`${baseURL}${endpoint}`, {
       method: 'GET',
-      headers: { Accept: 'application/json' },
+      headers: {
+        Accept: 'application/json',
+      },
     })
       .then(this.handleError)
       .then(this.handleContentType)

diff --git a/public/assets/public.js b/public/assets/public.js
@@ -4,10 +4,9 @@ import api from './api';
 const $ = jQuery;
 
 const checkoutFields = {
-  init() {
-    // fix the weird WooCommerce interaction where it initially trigger 'change' on State field
-    this.isFirstRun = true;
+  isFirstRun: true, // fix the weird WooCommerce interaction where it initially trigger 'change' on State field
 
+  init() {
     const $body = document.querySelector('body');
 
     // abort if not in Checkout page
@@ -45,44 +44,24 @@ const checkoutFields = {
       // get custom fields and append it after the City field
       const result = await api.get(`/fields/${type}/${provCode}/${districtID}`);
       $($wrapper).after(result);
+    });
 
-      // hide the custom field if country not ID
-      $('#billing_country, #shipping_country').trigger('change');
+    this.toggleCityField({
+      currentTarget: document.querySelector('#billing_country, #shipping_country'),
     });
   },
 
   /**
    * Show or Hide the original City field depending on the Country selected
    */
   toggleCityField(e) {
-    const $wrapper = e.currentTarget.closest('.woocommerce-billing-fields, .woocommerce-shipping-fields');
-    const $ogCityField = $wrapper.querySelector('#billing_city_field, #shipping_city_field');
+    const $form = e.currentTarget.closest('form');
 
-    // the custom dropdown
-    const $citiesField = $wrapper.querySelector('#_billing_city_field, #_shipping_city_field');
-    const $districtsField = $wrapper.querySelector('#_billing_district_field, #_shipping_district_field');
-
-    // If country is ID, hide the original City field
+    // If country is ID, add a class to hide the original city field
     if (e.currentTarget.value === 'ID') {
-      $ogCityField.style.display = 'none';
-
-      if ($citiesField) {
-        $citiesField.style.display = 'block';
-      }
-
-      if ($districtsField) {
-        $districtsField.style.display = 'block';
-      }
-    } else { // Else, hide the dropdown and show the original field
-      $ogCityField.style.display = 'block';
-
-      if ($citiesField) {
-        $citiesField.style.display = 'none';
-      }
-
-      if ($districtsField) {
-        $districtsField.style.display = 'none';
-      }
+      $form.classList.add('has-ongkir-dropdown');
+    } else {
+      $form.classList.remove('has-ongkir-dropdown');
     }
   },
 
@@ -95,9 +74,10 @@ const checkoutFields = {
     const provCode = $(e.currentTarget).val() || '0';
     const $wrapper = $(e.currentTarget).closest('.woocommerce-billing-fields, .woocommerce-shipping-fields');
 
+    const $ogCityField = $wrapper.find('#billing_city_field, #shipping_city_field');
+
     // if not first run, empty out the city field
     if (!this.isFirstRun) {
-      const $ogCityField = $wrapper.find('#billing_city_field, #shipping_city_field');
       $ogCityField.find('input').val('');
     }
 
@@ -111,12 +91,15 @@ const checkoutFields = {
 
     const result = await api.get(`/cities/${provCode}`);
 
+    // Create the <option>
     let options = '';
+
     Object.keys(result).forEach((id) => {
       options += `<option value="${id}">${result[id]}</option>`;
     });
 
     $citiesSelect.html(options);
+    $citiesSelect.trigger('change');
     this.isFirstRun = false;
   },
 
@@ -130,6 +113,9 @@ const checkoutFields = {
     const $wrapper = $(e.currentTarget).closest('.woocommerce-billing-fields, .woocommerce-shipping-fields');
     const provCode = $wrapper.find('#billing_state, #shipping_state').val();
 
+    // Abort if province not selected
+    if (!provCode) { return; }
+
     // add 'Loading' message to district field
     const $districtsSelect = $wrapper.find('#_billing_district_field select, #_shipping_district_field select');
     $districtsSelect.html('<option>Loading...</option>');

diff --git a/public/assets/public.sass b/public/assets/public.sass
@@ -2,4 +2,16 @@
   width: 100% !important
 
 .ongkir-form-row-hidden
-  display: none !important
+  display: none !important
+
+form.has-ongkir-dropdown
+  #billing_city_field,
+  #shipping_city_field
+    display: none !important
+
+form:not(.has-ongkir-dropdown)
+  #_billing_city_field,
+  #_shipping_city_field,
+  #_billing_district_field,
+  #_shipping_district_field
+    display: none !important