feat(Admin): Update configuration page

Adds configuration for Store Admin functionality Reorganises configuration options on Ideal Postcodes settings page BREAKING CHANGE: HTML targets for the store integration has been removed HTML targets have been replaced by a more robust field detection method
ideal-postcodes · Jun 18, 2020 · b01cbe3 · b01cbe3
1 parent b720a3a
commit b01cbe3
Show file tree

Hide file tree

Showing 31 changed files with 308 additions and 346 deletions.
diff --git a/Helper/Data.php b/Helper/Data.php
@@ -24,6 +24,14 @@ public function isEnabled($scope = ScopeConfigInterface::SCOPE_TYPE_DEFAULT)
         );
     }
 
+    public function isEnabledAdminAutocomplete($scope = ScopeConfigInterface::SCOPE_TYPE_DEFAULT)
+    {
+        return $this->scopeConfig->isSetFlag(
+            'idealpostcodes/settings/admin_autocomplete',
+            $scope
+        );
+    }
+
     public function getApiKey($scope = ScopeConfigInterface::SCOPE_TYPE_DEFAULT)
     {
         $apiKey = $this->scopeConfig->getValue(
@@ -134,11 +142,21 @@ public function toConfiguration(
             'addressAutocomplete' => $this->usesAutocomplete($scope),
             'populateOrganisation' => $this->populateOrganisation($scope),
             'hoistCountryField' => $this->hoistCountry($scope),
-            'requireCounty' => $this->requireCounty($scope),
-            'checkout_targets' => $this->getCheckoutTargets($scope),
-            'customer_address_target' => $this->getCustomerAddressTarget($scope),
-            'multishipping_checkout_targets' => $this->getMultishippingCheckoutTargets($scope),
-            'multishipping_checkout_register_target' => $this->getMultishippingCheckoutRegisterTarget($scope)
+            'requireCounty' => $this->requireCounty($scope)
+        );
+        return $config;
+    }
+
+    public function toAdminConfiguration(
+        $scope = ScopeConfigInterface::SCOPE_TYPE_DEFAULT
+    ) {
+        $config = array(
+            'enabled' => $this->isEnabled($scope),
+            'api_key' => $this->getApiKey($scope),
+            'addressAutocomplete' => $this->isEnabledAdminAutocomplete($scope),
+            'populateOrganisation' => $this->populateOrganisation($scope),
+            'hoistCountryField' => $this->hoistCountry($scope),
+            'requireCounty' => $this->requireCounty($scope)
         );
         return $config;
     }
@@ -147,4 +165,9 @@ public function getConfig($field) {
         $config = $this->toConfiguration();
         return is_bool($config[$field]) ? ($config[$field] ? 'true' : 'false') : $config[$field];
     }
+
+    public function getAdminConfig($field) {
+        $config = $this->toAdminConfiguration();
+        return is_bool($config[$field]) ? ($config[$field] ? 'true' : 'false') : $config[$field];
+    }
 }
diff --git a/docker/set-base-url b/docker/set-base-url
diff --git a/docker/upgrade-magento b/docker/upgrade-magento
@@ -3,5 +3,9 @@
 su www-data <<EOSU
 set -e
 
-mysql -u magento -pmagento -D magento -e 'UPDATE `core_config_data` SET `value` = "http://127.0.0.1/" WHERE `core_config_data`.`path` = "web/secure/base_url"'
+echo 'Running magento setup:upgrade'
+/var/www/html/bin/magento setup:upgrade
+
+echo 'Running magento setup:di:compile'
+/var/www/html/bin/magento setup:di:compile
 EOSU
diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
@@ -56,14 +56,60 @@
         </field>
       </group>
       <group
-        id="options"
+              id="data-configuration"
+              translate="label"
+              sortOrder="20"
+              showInDefault="1"
+              showInWebsite="1"
+              showInStore="1"
+      >
+        <label>Data</label>
+        <field
+                id="populate_organisation"
+                type="select"
+                translate="label,comment"
+                sortOrder="60"
+                showInDefault="1"
+                showInWebsite="1"
+                showInStore="1"
+        >
+          <label>Populate Organisation</label>
+          <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+          <config_path>idealpostcodes/settings/populate_organisation</config_path>
+          <comment>Fill the Company field based on selected address.</comment>
+          <depends>
+            <field id="enabled">1</field>
+          </depends>
+        </field>
+        <field
+                id="require_county"
+                type="select"
+                translate="label,comment"
+                sortOrder="70"
+                showInDefault="1"
+                showInWebsite="1"
+                showInStore="1"
+        >
+          <label>Populate County</label>
+          <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+          <comment>
+            This will populate the region field with the county name. County data is no longer used in the UK to identify a premise, however this can be enabled if you prefer.
+          </comment>
+          <config_path>idealpostcodes/settings/require_county</config_path>
+          <depends>
+            <field id="enabled">1</field>
+          </depends>
+        </field>
+      </group>
+      <group
+        id="store-configuration"
         translate="label"
         sortOrder="20"
         showInDefault="1"
         showInWebsite="1"
         showInStore="1"
       >
-        <label>Options</label>
+        <label>Store Configuration</label>
         <field
           id="postcode_lookup"
           type="select"
@@ -102,42 +148,6 @@
             <field id="enabled">1</field>
           </depends>
         </field>
-        <field
-          id="populate_organisation"
-          type="select"
-          translate="label,comment"
-          sortOrder="60"
-          showInDefault="1"
-          showInWebsite="1"
-          showInStore="1"
-        >
-          <label>Enable Populate Organisation</label>
-          <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
-          <config_path>idealpostcodes/settings/populate_organisation</config_path>
-          <comment>Fill the Company field based on selected address.</comment>
-          <depends>
-            <field id="enabled">1</field>
-          </depends>
-        </field>
-        <field
-          id="require_county"
-          type="select"
-          translate="label,comment"
-          sortOrder="70"
-          showInDefault="1"
-          showInWebsite="1"
-          showInStore="1"
-        >
-          <label>Enable County</label>
-          <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
-          <comment>
-            This will populate the region field with the county name. County data is no longer used in the UK to identify a premise, however this can be enabled if you prefer.
-          </comment>
-          <config_path>idealpostcodes/settings/require_county</config_path>
-          <depends>
-            <field id="enabled">1</field>
-          </depends>
-        </field>
         <field
           id="hoist_country"
           type="select"
@@ -159,82 +169,29 @@
         </field>
       </group>
       <group
-        id="customise"
-        translate="label"
-        sortOrder="40"
-        showInDefault="1"
-        showInWebsite="1"
-        showInStore="1"
+              id="store-admin-configuration"
+              translate="label"
+              sortOrder="20"
+              showInDefault="1"
+              showInWebsite="1"
+              showInStore="1"
       >
-        <label>Advanced Configuration</label>
+      <label>Store Admin Configuration</label>
         <field
-          id="checkout_targets"
-          type="text"
-          translate="label,comment"
-          sortOrder="30"
-          showInDefault="1"
-          showInWebsite="1"
-          showInStore="1"
+                id="enable_admin_integration"
+                type="select"
+                translate="label,comment"
+                sortOrder="80"
+                showInDefault="1"
+                showInWebsite="1"
+                showInStore="1"
         >
-          <label>Checkout Targets</label>
-          <comment>
-            Customer Checkout Page. Update the target address form which the plugin should attach to. The target should be a DOM element which encompasses your address fields. Use CSS selectors, e.g. "#shipping-address,#billing-addresss"
-          </comment>
-          <config_path>idealpostcodes/settings/checkout_targets</config_path>
-          <depends>
-            <field id="enabled">1</field>
-          </depends>
-        </field>
-        <field
-          id="customer_address_target"
-          type="text"
-          translate="label,comment"
-          sortOrder="30"
-          showInDefault="1"
-          showInWebsite="1"
-          showInStore="1"
-        >
-          <label>Customer Address Edit Targets</label>
-          <comment>
-            Customer Address Edit Pages. Update the target address form which the plugin should attach to. The target should be a DOM element which encompasses your address fields. Use CSS selectors, e.g. "#shipping-address,#billing-addresss"
-          </comment>
-          <config_path>idealpostcodes/settings/customer_address_target</config_path>
-          <depends>
-            <field id="enabled">1</field>
-          </depends>
-        </field>
-        <field
-          id="multishipping_checkout_targets"
-          type="text"
-          translate="label,comment"
-          sortOrder="30"
-          showInDefault="1"
-          showInWebsite="1"
-          showInStore="1"
-        >
-          <label>Multi Shipping Checkout Targets</label>
-          <comment>
-            Multi Shipping Checkout Pages. Update the target address form which the plugin should attach to. The target should be a DOM element which encompasses your address fields. Use CSS selectors, e.g. "#shipping-address,#billing-addresss"
-          </comment>
-          <config_path>idealpostcodes/settings/multishipping_checkout_targets</config_path>
-          <depends>
-            <field id="enabled">1</field>
-          </depends>
-        </field>
-        <field
-          id="multishipping_checkout_register_target"
-          type="text"
-          translate="label,comment"
-          sortOrder="30"
-          showInDefault="1"
-          showInWebsite="1"
-          showInStore="1"
-        >
-          <label>Multi Shipping Checkout Register Target</label>
+          <label>Enable Address Autocomplete</label>
+          <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
           <comment>
-            Mutli Shipping Register Pages. Update the target address form which the plugin should attach to. The target should be a DOM element which encompasses your address fields. Use CSS selectors, e.g. "#shipping-address,#billing-addresss"
+            This will enable address autocomplete on address forms in your Store Admin pages. In particular sales and customers.
           </comment>
-          <config_path>idealpostcodes/settings/multishipping_checkout_register_target</config_path>
+          <config_path>idealpostcodes/settings/admin_autocomplete</config_path>
           <depends>
             <field id="enabled">1</field>
           </depends>
@@ -248,7 +205,7 @@
         showInWebsite="1"
         showInStore="1"
       >
-        <label>Administration</label>
+        <label>Advanced</label>
         <field
           id="user_token"
           type="text"

diff --git a/etc/config.xml b/etc/config.xml
@@ -10,13 +10,10 @@
         <user_token />
         <postcode_lookup>1</postcode_lookup>
         <autocomplete>1</autocomplete>
+        <admin_autocomplete>1</admin_autocomplete>
         <populate_organisation>1</populate_organisation>
         <require_county>0</require_county>
         <hoist_country>1</hoist_country>
-        <checkout_targets>#checkout-step-shipping form,.billing-address-form</checkout_targets>
-        <customer_address_target>#form-validate</customer_address_target>
-        <multishipping_checkout_targets>#form-validate</multishipping_checkout_targets>
-        <multishipping_checkout_register_target>#form-validate</multishipping_checkout_register_target>
       </settings>
     </idealpostcodes>
   </default>

diff --git a/lib/admin-customers.ts b/lib/admin-customers.ts
@@ -9,7 +9,6 @@ const parentTest = (e: HTMLElement) => e.className === "admin__fieldset";
 
 const bind = (config: Config) => {
   setupBind({ selectors, parentScope, parentTest }).forEach(({ targets }) => {
-    console.log(selectors);
     setupAutocomplete(config, targets);
   });
 };

diff --git a/lib/admin-orders-edit.ts b/lib/admin-orders-edit.ts
@@ -0,0 +1,15 @@
+import { setupBind } from "@ideal-postcodes/jsutil";
+
+import { Config, setupAutocomplete } from "./extension";
+
+import { selectors } from "./billing";
+
+const bind = (config: Config) => {
+  setupBind({ selectors }).forEach(({ targets }) => {
+    setupAutocomplete(config, targets);
+  });
+};
+
+const pageTest = () => window.location.pathname.includes("/sales/order");
+
+export const bindings = { bind, pageTest };
diff --git a/lib/admin.ts b/lib/admin.ts
@@ -0,0 +1,11 @@
+import { setup } from "@ideal-postcodes/jsutil";
+
+import { bindings as orders } from "./admin-orders";
+import { bindings as ordersEdit } from "./admin-orders-edit";
+import { bindings as customers } from "./admin-customers";
+
+window.idpcStart = () =>
+  setup({
+    bindings: [orders, customers, ordersEdit],
+    window
+  });
diff --git a/lib/extension.ts b/lib/extension.ts
@@ -2,6 +2,7 @@ declare global {
   interface Window {
     IdealPostcodes: any;
     jQuery: any;
+    idpcStart: any;
   }
 }
 
@@ -135,16 +136,20 @@ export const addLookupLabel = (
   return elem;
 };
 
+const NOOP = () => {};
+
 export const watchCountry = (
   { country }: Targets,
   activate: any,
   deactivate: any
 ) => {
-  if (!country) return;
-  country.addEventListener("change", () => {
+  if (!country) return NOOP;
+  const checkCountry = () => {
     if (countryIsSupported(country as HTMLSelectElement)) return activate();
     deactivate();
-  });
+  };
+  country.addEventListener("change", checkCountry);
+  return checkCountry;
 };
 
 export const setupPostcodeLookup = (
@@ -171,7 +176,7 @@ export const setupPostcodeLookup = (
           label.hidden = true;
           controller.hide();
         }
-      );
+      )();
     },
     onAddressSelected: addressRetrieval({ config, targets })
   });
@@ -188,7 +193,7 @@ export const setupAutocomplete = (config: Config, targets: Targets) => {
         targets,
         () => attachAutocomplete(controller),
         () => detachAutocomplete(controller)
-      );
+      )();
     },
     // Need to better uniquely identify line 1
     inputField: targets.line_1,