[email protected] - Add address alert (#2448)

* [email protected] - Add address alert * [email protected] - Add new prop
justeattakeaway · Feb 5, 2024 · d67695d · d67695d
1 parent f0b2aa8
commit d67695d
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 4 deletions.
diff --git a/packages/components/pages/f-checkout/CHANGELOG.md b/packages/components/pages/f-checkout/CHANGELOG.md
@@ -3,6 +3,17 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+v4.12.0
+------------------------------
+*February 5, 2024*
+
+### Added
+- Address alert to remind customers to check that their address is correctly entered.
+- `showAddressAlert` prop to control the alert.
+  - It will only be shown if the prop is `true`, the delivery form is shown and the translations are present (currently `en-GB` only).
+
+
 v4.11.0
 ------------------------------
 *August 17, 2023*
@@ -18,6 +29,7 @@ v4.10.0
 ### Changed
 - Added "no allergen" copy on the Split Notes Web UK.
 
+
 v4.9.1
 ------------------------------
 *April 28, 2023*

diff --git a/packages/components/pages/f-checkout/README.md b/packages/components/pages/f-checkout/README.md
@@ -88,6 +88,7 @@ The props that can be defined are as follows:
 | `getNoteConfigUrl` | `String`   | -                                                            | URL for the API called to get the note configuration for split notes                                                                                                                                                                |
 | `checkoutFeatures` | `Object`   | -                                                            | Object containing relevant feature flags                                                                                                                                                                                            |
 | `shouldLoadAddressFromLocalStorage` | `Boolean`  | true                                                            | Flag to control where to retrieve the address from storage (local storage/cookies)                                                                                                                                                  |
+| `showAddressAlert` | `Boolean` | false | If true, displays an alert on the checkout page for delivery orders reminding customers to check that their address is entered correctly. |
 
 ### Events
 

diff --git a/packages/components/pages/f-checkout/package.json b/packages/components/pages/f-checkout/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-checkout",
   "description": "Fozzie Checkout - Fozzie Checkout Component",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "main": "dist/f-checkout.umd.min.js",
   "maxBundleSize": "100kB",
   "files": [

diff --git a/packages/components/pages/f-checkout/src/components/AddressAlert.vue b/packages/components/pages/f-checkout/src/components/AddressAlert.vue
@@ -0,0 +1,46 @@
+<template>
+    <div :class="$style['c-checkout-address-alert-container']">
+        <alert-component
+            type="info"
+            :heading="$t('warningMessages.addressAlert.title')"
+            :class="$style['c-checkout-address-alert']">
+            {{ $t(`warningMessages.addressAlert.body`) }}
+        </alert-component>
+    </div>
+</template>
+
+<script>
+import AlertComponent from '@justeat/f-alert';
+import '@justeat/f-alert/dist/f-alert.css';
+
+export default {
+    name: 'AddressAlert',
+
+    components: {
+        AlertComponent
+    }
+};
+</script>
+
+<style lang="scss" module>
+@use '@justeat/fozzie/src/scss/fozzie' as f;
+.c-checkout-address-alert-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.c-checkout-address-alert {
+    width: 100%;
+    max-width: 470px;
+    margin: f.spacing(e) f.spacing(f);
+    margin-bottom: -12px;
+
+    @include f.media('<narrow') {
+        margin-bottom: 0; // Top margin has disappeared so no need to reduce it
+    }
+
+    @include f.media('>=narrowMid') {
+        margin: f.spacing(g) auto calc(f.spacing(c) - f.spacing(g)); // Eat 28px from f-card's top margin to reduce it to 12px
+    }
+}
+</style>
diff --git a/packages/components/pages/f-checkout/src/components/Checkout.vue b/packages/components/pages/f-checkout/src/components/Checkout.vue
@@ -13,6 +13,9 @@
         <age-verification
             v-if="shouldShowAgeVerificationForm" />
 
+        <address-alert
+            v-if="shouldShowAddressAlert" />
+
         <div
             v-if="shouldShowCheckoutForm"
             data-theme="jet"
@@ -46,13 +49,19 @@
 </template>
 
 <script>
+// External
 import { mapActions, mapGetters, mapState } from 'vuex';
+import VueScrollTo from 'vue-scrollto';
+
+// Fozzie
 import Alert from '@justeat/f-alert';
 import '@justeat/f-alert/dist/f-alert.css';
 import Card from '@justeat/f-card';
 import '@justeat/f-card/dist/f-card.css';
 import { VueGlobalisationMixin } from '@justeat/f-globalisation';
-import VueScrollTo from 'vue-scrollto';
+
+// Internal
+import AddressAlert from './AddressAlert.vue';
 import AgeVerification from './AgeVerification.vue';
 import CheckoutFormField from './CheckoutFormField.vue';
 import CheckoutForm from './CheckoutForm.vue';
@@ -100,6 +109,7 @@ export default {
     name: 'VueCheckout',
 
     components: {
+        AddressAlert,
         AgeVerification,
         Alert,
         Card,
@@ -213,6 +223,11 @@ export default {
         shouldLoadAddressFromLocalStorage: {
             type: Boolean,
             default: true
+        },
+
+        showAddressAlert: {
+            type: Boolean,
+            default: false
         }
     },
 
@@ -293,6 +308,11 @@ export default {
             return !this.isLoading && !this.shouldShowCheckoutErrorPage && !this.shouldShowAgeVerificationForm;
         },
 
+        shouldShowAddressAlert () {
+            // Only show address alert if *delivery* form is shown and translations are present
+            return this.showAddressAlert && this.shouldShowCheckoutForm && this.isCheckoutMethodDelivery && this.$te('warningMessages.addressAlert.title');
+        },
+
         shouldShowAgeVerificationForm () {
             return !this.shouldShowCheckoutErrorPage && this.errors.some(error => error.messageKey === DOB_REQUIRED_ISSUE || error.messageKey === AGE_VERIFICATION_ISSUE);
         },

diff --git a/packages/components/pages/f-checkout/src/tenants/en-GB.js b/packages/components/pages/f-checkout/src/tenants/en-GB.js
@@ -193,6 +193,10 @@ const messages = {
     },
 
     warningMessages: {
+        addressAlert: {
+            title: 'Please check your address is complete',
+            body: 'This will help the courier find you faster.'
+        },
         preOrder: {
             title: 'Please note, this is a preorder',
             body: 'Please check the day and time above'

diff --git a/packages/components/pages/f-checkout/stories/Checkout.stories.js b/packages/components/pages/f-checkout/stories/Checkout.stories.js
@@ -134,8 +134,9 @@ export const CheckoutComponent = (args, { argTypes }) => ({
         ':getCustomerUrl="getCustomerUrl" ' +
         ':getNoteConfigUrl="getNoteConfigUrl" ' +
         ':checkoutFeatures="checkoutFeatures"' +
+        ':showAddressAlert="showAddressAlert"' +
         // eslint-disable-next-line no-template-curly-in-string
-        ' :key="`${locale},${getCheckoutUrl},${updateCheckoutUrl},${checkoutAvailableFulfilmentUrl},${authToken},${createGuestUrl},${getBasketUrl},${getAddressUrl},${placeOrderUrl},${paymentPageUrlPrefix},${getGeoLocationUrl},${getNoteConfigUrl},${checkoutFeatures}`" />'
+        ' :key="`${locale},${getCheckoutUrl},${updateCheckoutUrl},${checkoutAvailableFulfilmentUrl},${authToken},${createGuestUrl},${getBasketUrl},${getAddressUrl},${placeOrderUrl},${paymentPageUrlPrefix},${getGeoLocationUrl},${getNoteConfigUrl},${checkoutFeatures},${showAddressAlert}`" />'
 });
 
 CheckoutComponent.args = {
@@ -149,7 +150,8 @@ CheckoutComponent.args = {
     createGuestError: propOptions.createGuestErrorOptions.None,
     placeOrderError: propOptions.placeOrderErrorOptions.None,
     fulfilmentTimeErrors: propOptions.fulfilmentTimeErrors.none,
-    noteType: propOptions.noteTypeOptions['Legacy notes']
+    noteType: propOptions.noteTypeOptions['Legacy notes'],
+    showAddressAlert: false
 };
 
 CheckoutComponent.argTypes = {
@@ -215,6 +217,11 @@ CheckoutComponent.argTypes = {
         control: { type: 'select' },
         options: propOptions.noteTypeOptions,
         description: 'Note types'
+    },
+
+    showAddressAlert: {
+        control: { type: 'boolean' },
+        description: 'Show alert reminding customers to check their delivery address'
     }
 };