Improved: UI for the alternate pickup options

.firebaserc

@@ -1,23 +1,20 @@
 {
   "projects": {
-    "default": "hotwax-digital-commerce",
+    "uat": "hotwax-digital-commerce-uat",
     "production": "digital-commerce-71eb8"
   },
   "targets": {
-    "hotwax-digital-commerce": {
+    "hotwax-digital-commerce-uat": {
       "hosting": {
-        "dev": [
-          "dev-reroute-fulfilment"
-        ],
         "uat": [
-          "reroute-fulfilment-uat"
+          "gorjana-reroute-fulfilment-uat"
         ]
       }
     },
     "digital-commerce-71eb8": {
       "hosting": {
         "prod": [
-          "reroute-fulfilment"
+          "gorjana-reroute-fulfilment"
         ]
       }
     }

src/i18n/locales/en.json

@@ -1,53 +1,60 @@
 {
   "Add address": "Add address",
+  "Address": "Address",
   "An email will be sent to you when your item(s) are ready to collect at the new requested location(s).": "An email will be sent to you when your item(s) are ready to collect at the new requested location(s).",
-  "Are you sure you want to save the changes?": "Are you sure you want to save the changes?",
+  "Apartment, Suite, etc.": "Apartment, Suite, etc.",
   "Are you sure you want to cancel the order items?": "Are you sure you want to cancel the order items?",
+  "Are you sure you want to save the changes?": "Are you sure you want to save the changes?",
   "Cancel": "Cancel",
   "Cancel items": "Cancel items",
   "Change Store": "Change Store",
   "Changes saved": "Changes saved",
   "City": "City",
-  "Confirm": "Confirm",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
-  "Delivery method": "Delivery method",
+  "Confirm": "Confirm",
+  "Delivery Method": "Delivery Method",
   "Don't Cancel": "Don't Cancel",
   "Edit address": "Edit address",
+  "Edit Zip Code": "Edit Zip Code",
   "Estimated delivery": "Estimated delivery",
   "Existing facility selected again, please select a different facility": "Existing facility selected again, please select a different facility",
-  "Fetching order details.": "Fetching order details.",
-  "Fetching stores.": "Fetching stores.",
-  "First name": "First name",
   "Failed to cancel the order": "Failed to cancel the order",
   "Failed to update the pickup store": "Failed to update the pickup store",
-  "Failed to update the shipping addess": "Failed to update the shipping addess",
+  "Failed to update the shipping address": "Failed to update the shipping address",
   "Fetching address": "Fetching address",
+  "Fetching order details.": "Fetching order details.",
+  "Fetching stores.": "Fetching stores.",
+  "Find Stores": "Find Stores",
+  "First Name": "First Name",
   "Inventory not available at any nearby store, please select alternate delivery method": "Inventory not available at any nearby store, please select alternate delivery method",
-  "Last name": "Last name",
+  "Last Name": "Last Name",
   "Login": "Login",
   "Logout": "Logout",
-  "mi": "mi",
-  "Nearby stores": "Nearby stores",
+  "miles": "miles",
+  "Nearby Stores": "Nearby Stores",
+  "No stores found": "No stores found",
   "OMS": "OMS",
-  "Order ID": "Order ID",
   "Order cancelled successfully": "Order cancelled successfully",
   "Order item not eligible for reroute fulfilment": "Order item not eligible for reroute fulfilment",
+  "Order ID": "Order ID",
   "Order not found": "Order not found",
-  "Shipment has been cancelled": "Shipment has been cancelled",
   "Password": "Password",
   "Please fill all the fields": "Please fill all the fields",
   "Save changes": "Save changes",
   "Save shipping address": "Save shipping address",
-  "Select pickup location": "Select pickup location",
-  "Shipping address": "Shipping address",
-  "Showing pickup locations near": "Showing pickup locations near",
+  "Search for a postal code to check for pickup stores": "Search for a postal code to check for pickup stores",
+  "Search Zip Code": "Search Zip Code",
+  "Select Pickup Location": "Select Pickup Location",
+  "Settings": "Settings",
+  "Shipment has been cancelled": "Shipment has been cancelled",
+  "Shipping Address": "Shipping Address",
+  "Showing pickup locations near": "Showing pickup locations near ",
   "Something went wrong while fetching stores": "Something went wrong while fetching stores",
   "Something went wrong while fetching the order details": "Something went wrong while fetching the order details",
-  "Settings": "Settings",
   "State": "State",
-  "Street": "Street",
   "Tracking code": "Tracking code",
   "Username": "Username",
   "Your Order": "Your Order",
-  "Zipcode": "Zipcode"
+  "Zip Code": "Zip Code",
+  "Zip code not found or invalid": "Zip code not found or invalid"
 }

src/main.ts

@@ -50,7 +50,7 @@ app.config.globalProperties.$filters = {
   formatDate(value: any, inFormat?: string, outFormat?: string) {
     // TODO Use Loxon instead
     // TODO Make default format configurable and from environment variables
-    return moment(value, inFormat).format(outFormat ? outFormat : 'MM-DD-YYYY');
+    return moment(value, inFormat).format(outFormat ? outFormat : 'MM/DD/YYYY');
   },
   formatUtcDate(value: any, inFormat?: string, outFormat?: string) {
     // TODO Use Loxon instead

src/services/OrderService.ts

@@ -43,8 +43,17 @@ const getProductStoreSetting = async (payload: any): Promise<any> => {
   });
 }
 
+const getRerouteOrderBrokeringHistory = async (payload: any): Promise<any> => {
+  return api({
+    url: "getRerouteOrderBrokeringHistory",
+    method: "post",
+    data: payload
+  });
+}
+
 export const OrderService = {
   getOrder,
+  getRerouteOrderBrokeringHistory,
   updateShippingAddress,
   updatePickupFacility,
   cancelOrderItem,

src/theme/variables.css

@@ -3,13 +3,16 @@ http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
 :root {
-  /** primary **/
-  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
+  /** Font **/
+  --ion-font-family: 'Futura', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
+
+  /** primary: made primary color to black **/
+  --ion-color-primary: #222428;
+  --ion-color-primary-rgb: 34, 36, 40;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #4c8dff;
+  --ion-color-primary-shade: #1e2023;
+  --ion-color-primary-tint: #383a3e;
 
   /** secondary **/
   --ion-color-secondary: #3dc2ff;
@@ -51,14 +54,6 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-danger-shade: #cf3c4f;
   --ion-color-danger-tint: #ed576b;
 
-  /** dark **/
-  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 36, 40;
-  --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
-
   /** medium **/
   --ion-color-medium: #92949c;
   --ion-color-medium-rgb: 146, 148, 156;

src/views/AddressModal.vue

@@ -1,7 +1,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>{{ $t("Shipping address") }}</ion-title>
+      <ion-title>{{ $t("Shipping Address") }}</ion-title>
       <ion-buttons slot="end" @click="close()">
         <ion-button>
           <ion-icon :icon="closeOutline" />
@@ -12,13 +12,16 @@
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-input :label="$t('First name')" class="ion-text-right" name="firstName" v-model="address.firstName" id="firstName" type="text"/>
+        <ion-input :label="$t('First Name')" class="ion-text-right" name="firstName" v-model="address.firstName" id="firstName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('Last name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
+        <ion-input :label="$t('Last Name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('Street')" class="ion-text-right" name="street" v-model="address.address1" id="address1" type="text"/>
+        <ion-input :label="$t('Address')" class="ion-text-right" name="street" v-model="address.address1" id="address1" type="text"/>
+      </ion-item>
+      <ion-item>
+        <ion-input :label="$t('Apartment, Suite, etc.')" class="ion-text-right" name="street" v-model="address.address2" id="address2" type="text"/>
       </ion-item>
       <ion-item>
         <ion-input :label="$t('City')" class="ion-text-right" name="city" v-model="address.city" id="city" type="text"/>
@@ -29,7 +32,7 @@
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('Zipcode')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
+        <ion-input :label="$t('Zip Code')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
       </ion-item>
     </ion-list>
     <div class="ion-text-center">
@@ -85,6 +88,7 @@ export default defineComponent({
         firstName: "",
         lastName: "",
         address1: "",
+        address2: "",
         city: "",
         stateProvinceGeoId: "",
         postalCode: "",
@@ -106,7 +110,7 @@ export default defineComponent({
     async updateAddress() {
       const hasEmptyValues = Object.keys(this.address).some((field: string) => {
         this.address[field] = this.address[field].trim();
-        return !this.address[field];
+        return !this.address[field] && field !== 'address2';
       })
       if (hasEmptyValues) return showToast(translate("Please fill all the fields"))
       const state = this.states.find((state: any) => state.geoId === this.address.stateProvinceGeoId);
@@ -122,6 +126,7 @@ export default defineComponent({
       }
 
       this.address.address1 = this.shipGroup.shipTo.postalAddress.address1
+      this.address.address2 = this.shipGroup.shipTo.postalAddress.address2
       this.address.city = this.shipGroup.shipTo.postalAddress.city
       this.address.postalCode = this.shipGroup.shipTo.postalAddress.postalCode
       this.address.stateProvinceGeoId = this.shipGroup.shipTo.postalAddress.stateProvinceGeoId
@@ -137,7 +142,7 @@ export default defineComponent({
         const payload = {
           "token": this.token,
           "countryGeoId": this.shipGroup.shipTo.postalAddress.countryGeoId,
-          "viewSize": process.env.VUE_APP_VIEW_SIZE
+          "viewSize": 100
         }
         const resp = await UtilityService.getAssociatedStates(payload);
         if (!hasError(resp)) {
@@ -172,4 +177,12 @@ export default defineComponent({
     return { closeOutline, router, store };
   }
 });
-</script>
+</script>
+
+<style>
+/* Removes the background color on autofill of input fields */
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  transition: background-color 0s 600000s, color 0s 600000s !important;
+}
+</style>