MY-12648 rename checkout to delivery options where possible, events too

.env

@@ -1 +1 @@
-VUE_APP_CLASS_BASE=myparcel-checkout
+VUE_APP_CLASS_BASE=myparcel-delivery-options

README.md

@@ -8,7 +8,7 @@
 - [Usage](#usage)
 
 ## Introduction
-This is the MyParcel checkout module. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings. It barely has any css styling by itself so it should integrate with the design of your website easily.
+This is the MyParcel delivery options module for use in any e-commerce platform's checkout. It's used to show your customers the possible delivery and/or pickup options for their location, based on your settings. It barely has any css styling by itself so it should integrate with the design of your webshop easily.
 
 ![alt text](/demo/screenshots/checkout1.png)
 ![alt text](/demo/screenshots/checkout2.png)
@@ -17,10 +17,10 @@ This is the MyParcel checkout module. It's used to show your customers the possi
 ![alt text](/demo/screenshots/checkout5.png)
 
 ### Support
-The checkout is written in [Vue.js], it supports IE9 and up. 
+This app is written in [Vue.js], it supports IE9 and up. 
 
 ## Example
-An example of the checkout functionality can be found in our [sandbox]. Here you can try out every combination of settings and copy the code for your project.
+An example of the delivery options functionality can be found in our [sandbox]. Here you can try out every combination of settings and copy the code for your project.
 
 ## Installation
 1. Clone the repository or download the latest package from [releases].
@@ -30,14 +30,15 @@ An example of the checkout functionality can be found in our [sandbox]. Here you
    $ npm run build
 ```
 3. Include `dist/myparcel.js` in your project. 
-4. Place `<div id="myparcel-checkout"></div>` in your HTML.
-5. The checkout will be rendered inside that element!
+4. Place `<div id="myparcel-delivery-options"></div>` in your HTML.
+5. Follow the usage instructions. 
+6. The delivery options will be rendered inside the div created in step 4.
 
 ## Usage
-You have to provide a configuration file in the following format as `window.MyParcelConfig` and initialize the checkout with an event.
+You have to provide a configuration file in the following format as `window.MyParcelConfig` and initialize the delivery options with an event.
 
 ### Minimum required data
-This is the minimum amount of data you need to provide for the checkout to work correctly as a SendMyParcel user.  
+This is the minimum amount of data you need to provide for the delivery options to work correctly as a SendMyParcel user.  
 ```js
 window.MyParcelConfig = {
   config: {
@@ -50,9 +51,9 @@ window.MyParcelConfig = {
   }
 };
 
-// Trigger this event on the document to tell the checkout to update.
+// Trigger this event on the document to tell the delivery options to update.
 // Usually only needed on initializing and when the address changes.
-document.dispatchEvent(new Event('myparcel_update_checkout'));
+document.dispatchEvent(new Event('myparcel_update_delivery_options'));
 ```
 
 ### All options
@@ -135,7 +136,7 @@ window.MyParcelConfig = {
 
 When there is no title set for `deliveryMorningTitle`, `deliveryStandardTitle` or `deliveryEveningTitle` , the delivery time will automatically be visible. For more in-depth explanation of each config item and string and an interactive demo please see our [sandbox]
 
-To get the object with the selected options from the checkout do the following:
+To get the object with the selected options from the delivery options do the following:
 ```js
 const data = document.querySelector('#mypa-input').value;
 const obj = JSON.parse(data);

index.d.ts

@@ -9,16 +9,16 @@ declare namespace MyParcel {
   /**
    * Configuration object supplied by the platform.
    */
-  interface CheckoutConfiguration {
-    address: CheckoutAddress
-    strings: CheckoutStrings
-    config: CheckoutConfig
+  interface DeliveryOptionsConfiguration {
+    address: DeliveryOptionsAddress
+    strings: DeliveryOptionsStrings
+    config: DeliveryOptionsConfig
   }
 
   /**
    * Address object from the external platform.
    */
-  interface CheckoutAddress {
+  interface DeliveryOptionsAddress {
     cc: String
     number: String | Number
     postalCode: String
@@ -28,7 +28,7 @@ declare namespace MyParcel {
   /**
    * Strings object from the external platform.
    */
-  interface CheckoutStrings {
+  interface DeliveryOptionsStrings {
     city: String
     postcode: String
     houseNumber: String
@@ -104,7 +104,7 @@ declare namespace MyParcel {
   /**
    * Configuration object from the external platform.
    */
-  interface CheckoutConfig {
+  interface DeliveryOptionsConfig {
     apiBaseUrl: String
     locale: String
     carriers: String | Array<String>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myparcel/checkout",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "types": "index.d.ts",
   "scripts": {
     "serve": "vue-cli-service serve",

sandbox/src/App.vue

@@ -3,7 +3,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12 jumbotron">
-          <h1>MyParcel checkout sandbox</h1>
+          <h1>MyParcel delivery options sandbox</h1>
         </div>
       </div>
       <div class="row">
@@ -41,8 +41,8 @@
         </div>
 
         <div class="col-12">
-          <h1>Checkout -></h1>
-          <div id="myparcel-checkout" />
+          <h1>Delivery options -></h1>
+          <div id="myparcel-delivery-options" />
         </div>
       </div>
     </div>

src/App.vue

@@ -146,13 +146,14 @@ export default {
     },
 
     /**
-     * Check if any top level setting is enabled.
+     * Check if the cc in the given address allows delivery options and if any top level setting is enabled.
      *
      * @returns {Boolean}
      */
     hasSomethingToShow() {
-      return this.$configBus.isEnabledInAnyCarrier(ALLOW_PICKUP_LOCATIONS)
-        || this.$configBus.isEnabledInAnyCarrier(ALLOW_DELIVERY_OPTIONS);
+      return this.$configBus.isValidCountry
+        && (this.$configBus.isEnabledInAnyCarrier(ALLOW_PICKUP_LOCATIONS)
+        || this.$configBus.isEnabledInAnyCarrier(ALLOW_DELIVERY_OPTIONS));
     },
 
     /**

src/components/Loader.vue

@@ -5,8 +5,8 @@
     <div
       class="${$classBase}__loader"
       :class="{
-        'myparcel-checkout__loader--inline': 'inline' === type,
-        'myparcel-checkout__loader--spinner': 'spinner' === type
+        [`${$classBase}__loader--inline`]: 'inline' === type,
+        [`${$classBase}__loader--spinner`]: 'spinner' === type
       }">
       <transition-group
         v-if="'inline' === type"

src/config/configBus.js

@@ -2,6 +2,7 @@
 import * as EVENTS from '@/config/data/eventConfig';
 import * as SETTINGS from '@/config/data/settingsConfig';
 import Vue from 'vue';
+import { allowedCountryCodesForPlatform } from '@/config/data/countryConfig';
 import { getConfig } from '@/config/setup';
 
 /**
@@ -60,7 +61,7 @@ export const createConfigBus = () => {
       modalData: null,
 
       /**
-       * Object containing any errors causing the checkout not to show.
+       * Object containing any errors causing the delivery options not to show.
        *
        * @type {Object}
        */
@@ -74,25 +75,34 @@ export const createConfigBus = () => {
       /**
        * Must be defined before it is filled in created().
        *
-       * @type {MyParcel.CheckoutConfig}
+       * @type {MyParcel.DeliveryOptionsConfig}
        */
       config: null,
 
       /**
        * Must be defined before it is filled in created().
        *
-       * @type {MyParcel.CheckoutStrings}
+       * @type {MyParcel.DeliveryOptionsStrings}
        */
       strings: null,
 
       /**
        * Must be defined before it is filled in created().
        *
-       * @type {MyParcel.CheckoutAddress}
+       * @type {MyParcel.DeliveryOptionsAddress}
        */
       address: null,
     },
     computed: {
+      /**
+       * Whether the cc of the current address is in the list of valid codes for the current platform.
+       *
+       * @returns {boolean}
+       */
+      isValidCountry() {
+        return allowedCountryCodesForPlatform().includes(this.address.cc);
+      },
+
       /**
        * Whether there are multiple carriers available or not.
        *

src/config/data/appConfig.js

@@ -1,4 +1,4 @@
-import { DEFAULT_PLATFORM, FLESPAKKET, MYPARCEL, SENDMYPARCEL } from '@/config/data/platformConfig';
+import { DEFAULT_PLATFORM, MYPARCEL, SENDMYPARCEL } from '@/config/data/platformConfig';
 import { configBus } from '@/config/configBus';
 
 /**
@@ -7,7 +7,6 @@ import { configBus } from '@/config/configBus';
 const platformUrlMap = {
   [SENDMYPARCEL]: 'sendmyparcel.be',
   [MYPARCEL]: 'myparcel.nl',
-  [FLESPAKKET]: 'flespakket.nl',
 };
 
 const platform = configBus && configBus.config ? configBus.config.platform : DEFAULT_PLATFORM;

src/config/data/countryConfig.js

@@ -0,0 +1,21 @@
+import { MYPARCEL, SENDMYPARCEL } from '@/config/data/platformConfig';
+import { configBus } from '@/config/configBus';
+
+/**
+ * The country codes for each platform which are allowed to have delivery options.
+ *
+ * @type {Object.<Array>}
+ */
+const allowedCountries = {
+  [MYPARCEL]: ['nl', 'be'],
+  [SENDMYPARCEL]: ['nl', 'be'],
+};
+
+/**
+ * @param {MyParcel.Platform} platform - Platform name or id.
+ *
+ * @returns {Array}
+ */
+export const allowedCountryCodesForPlatform = (platform = configBus.config.platform) => {
+  return allowedCountries[platform];
+};

src/config/data/defaultConfig.js

@@ -8,11 +8,11 @@ import _mergeWith from 'lodash.mergewith';
 /**
  * Base checkout configuration.
  *
- * @type {MyParcel.CheckoutConfiguration}
+ * @type {MyParcel.DeliveryOptionsConfiguration}
  */
 const baseConfig = {
   /**
-   * @type {MyParcel.CheckoutConfig}
+   * @type {MyParcel.DeliveryOptionsConfig}
    */
   config: {
     [SETTINGS.PLATFORM]: DEFAULT_PLATFORM,
@@ -43,7 +43,7 @@ const baseConfig = {
   },
 
   /**
-   * @type {MyParcel.CheckoutStrings}
+   * @type {MyParcel.DeliveryOptionsStrings}
    */
   strings: {
     // Address strings
@@ -84,7 +84,7 @@ const baseConfig = {
  *
  * @param {MyParcel.Platform} platform - Platform name.
  *
- * @returns {MyParcel.CheckoutConfiguration}
+ * @returns {MyParcel.DeliveryOptionsConfiguration}
  */
 export const defaultConfig = (platform) => {
   baseConfig.config.platform = platform;

src/config/data/eventConfig.js

@@ -42,7 +42,7 @@ export const UPDATE_CONFIG_IN = 'myparcel_update_config';
  *
  * @type {string}
  */
-export const UPDATE_CHECKOUT_IN = 'myparcel_update_checkout';
+export const UPDATE_CHECKOUT_IN = 'myparcel_update_delivery_options';
 
 /**
  * To tell the external platform the address is updated.
@@ -56,4 +56,4 @@ export const UPDATE_ADDRESS_OUT = 'myparcel_updated_address';
  *
  * @type {string}
  */
-export const UPDATE_CHECKOUT_OUT = 'myparcel_updated_checkout';
+export const UPDATE_CHECKOUT_OUT = 'myparcel_updated_delivery_options';

src/config/data/platformConfig.js

@@ -3,7 +3,6 @@ import { strings as beStrings } from '@/config/data/locales/be/strings';
 import { config as nlConfig } from '@/config/data/locales/nl/config';
 import { strings as nlStrings } from '@/config/data/locales/nl/strings';
 
-export const FLESPAKKET = 'flespakket';
 export const MYPARCEL = 'myparcel';
 export const SENDMYPARCEL = 'belgie';
 
@@ -35,13 +34,12 @@ export const addressRequirements = {
 const platformLocaleMap = {
   [SENDMYPARCEL]: 'be',
   [MYPARCEL]: 'nl',
-  [FLESPAKKET]: 'nl',
 };
 
 /**
  * @param {MyParcel.Platform} platform - Platform name.
  *
- * @returns {MyParcel.CheckoutConfiguration}
+ * @returns {MyParcel.DeliveryOptionsConfiguration}
  */
 export const platformConfig = (platform) => {
   return configMap[platformLocaleMap[platform]];

src/config/setup.js

@@ -7,7 +7,7 @@ export const mock = false;
 /**
  * Get the window object supplied by the environment we're in. Parse it as JSON if needed.
  *
- * @returns {MyParcel.CheckoutConfiguration}
+ * @returns {MyParcel.DeliveryOptionsConfiguration}
  */
 const getWindowObject = () => {
   // Allow mocking for user and tests.
@@ -27,7 +27,7 @@ const getWindowObject = () => {
 /**
  * Get the address from the window object and convert cc to lowercase.
  *
- * @returns {MyParcel.CheckoutAddress}
+ * @returns {MyParcel.DeliveryOptionsAddress}
  */
 export const getAddress = () => {
   const { address } = getWindowObject();
@@ -38,9 +38,9 @@ export const getAddress = () => {
 /**
  * Modifies the config data.
  *
- * @param {MyParcel.CheckoutConfiguration} data - Configuration.
+ * @param {MyParcel.DeliveryOptionsConfiguration} data - Configuration.
  *
- * @returns {MyParcel.CheckoutConfiguration}
+ * @returns {MyParcel.DeliveryOptionsConfiguration}
  */
 const prepareConfig = (data) => {
   // Allow array of strings, single string and comma separated strings as input for carriers.
@@ -58,7 +58,7 @@ const prepareConfig = (data) => {
 /**
  * Get data from the window config object and convert some variables.
  *
- * @returns {MyParcel.CheckoutConfiguration}
+ * @returns {MyParcel.DeliveryOptionsConfiguration}
  */
 export const getConfig = () => {
   const windowObject = getWindowObject();

src/data/request/requestData.js

@@ -1,5 +1,5 @@
 import * as SETTINGS from '@/config/data/settingsConfig';
-import { FLESPAKKET, MYPARCEL, SENDMYPARCEL } from '@/config/data/platformConfig';
+import { MYPARCEL, SENDMYPARCEL } from '@/config/data/platformConfig';
 import { configBus } from '@/config/configBus';
 
 const getParametersForNL = () => ({
@@ -16,7 +16,6 @@ const getParametersForBE = () => ({
 
 const parametersByPlatform = {
   [MYPARCEL]: getParametersForNL,
-  [FLESPAKKET]: getParametersForNL,
   [SENDMYPARCEL]: getParametersForBE,
 };
 

tests/unit/testConfig.js

@@ -5,7 +5,7 @@ import { createConfigBus } from '@/config/configBus';
 import { defaultConfig } from '@/config/data/defaultConfig';
 
 /**
- * @type {Object<MyParcel.CheckoutAddress>}
+ * @type {Object<MyParcel.DeliveryOptionsAddress>}
  */
 export const defaultAddress = {
   [MYPARCEL]: {