@designcrowd/library.brand-page 5.17.3 → 5.17.4

package/src/composables/useTranslate.ts

@@ -15,6 +15,8 @@ export type LocaleTypes =
   | 'fr-CA'
   | 'pt-BR';
 
+type Country = { code: string; name: string };
+
 export const supportedLocales: LocaleTypes[] = [
   'en-US',
   'de-DE',
@@ -215,6 +217,17 @@ const generateAiModalTr = (key, valuesToInterpolate = {}) =>
   tr(`aiModal.${key}`, valuesToInterpolate);
 const saveContactWidgetTr = (key, valuesToInterpolate = {}) =>
   tr(`saveContactWidget.${key}`, valuesToInterpolate);
+const paymentShippingAddressTr = (key, valuesToInterpolate = {}) =>
+  tr(`paymentShippingAddress.${key}`, valuesToInterpolate);
+
+const countriesTr = (): Country[] => {
+  const instance = getI18NextInstance();
+
+  return instance.t('countries', {
+    ns: nameSpace,
+    returnObjects: true,
+  }) as Country[];
+};
 
 const currentLocale = (): LocaleTypes => {
   const i18 = getI18NextInstance();
@@ -316,4 +329,6 @@ export {
   logoTemplateSearchModalTr,
   generateAiModalTr,
   saveContactWidgetTr,
+  paymentShippingAddressTr,
+  countriesTr,
 };

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Link hinzufügen",
     "enterValidUrlError": "Bitte geben Sie eine gültige URL ein",
     "enterTextHerePlaceholder": "Text hier eingeben ...",
-    "bookNowLabel": "Jetzt buchen"
+    "bookNowLabel": "Jetzt buchen",
+    "shippingLabel": "Lieferadresse aktivieren",
+    "shippingPlaceholder": "Fordern Sie Kunden auf, während des Bezahlvorgangs eine Lieferadresse einzugeben."
   }
 }

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Añadir enlace",
     "enterValidUrlError": "Introduce una URL válida",
     "enterTextHerePlaceholder": "Introduce el texto aquí...",
-    "bookNowLabel": "Reserva ahora"
+    "bookNowLabel": "Reserva ahora",
+    "shippingLabel": "Habilitar dirección de envío",
+    "shippingPlaceholder": "Exigir a los clientes que introduzcan una dirección de envío al finalizar la compra."
   }
 }

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Ajouter un lien",
     "enterValidUrlError": "Veuillez entrer une URL valide",
     "enterTextHerePlaceholder": "Saisir le texte ici...",
-    "bookNowLabel": "Prendre RDV"
+    "bookNowLabel": "Prendre RDV",
+    "shippingLabel": "Activer l'adresse de livraison",
+    "shippingPlaceholder": "Exigez des clients qu'ils saisissent une adresse de livraison lors de la validation de leur commande."
   }
 }

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Ajouter un lien",
     "enterValidUrlError": "Veuillez entrer une URL valide",
     "enterTextHerePlaceholder": "Saisir le texte ici...",
-    "bookNowLabel": "Prendre RDV"
+    "bookNowLabel": "Prendre RDV",
+    "shippingLabel": "Activer l'adresse de livraison",
+    "shippingPlaceholder": "Exigez des clients qu'ils saisissent une adresse de livraison lors de la validation de leur commande."
   }
 }

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Add Link",
     "enterValidUrlError": "Please enter a valid URL",
     "enterTextHerePlaceholder": "Enter text here...",
-    "bookNowLabel": "Book Now"
+    "bookNowLabel": "Book Now",
+    "shippingLabel": "Enable Shipping Address",
+    "shippingPlaceholder": "Require customers to enter a shipping address during checkout."
   }
 }

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Adicionar link",
     "enterValidUrlError": "Insira um URL válido",
     "enterTextHerePlaceholder": "Insira o texto aqui...",
-    "bookNowLabel": "Reserve agora"
+    "bookNowLabel": "Reserve agora",
+    "shippingLabel": "Ativar endereço para envio",
+    "shippingPlaceholder": "Exija que os clientes informem um endereço para envio na finalização da compra."
   }
 }

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -202,6 +202,8 @@
     "addLinkButtonText": "Adicionar link",
     "enterValidUrlError": "Por favor, introduza um URL válido",
     "enterTextHerePlaceholder": "Introduza o texto aqui...",
-    "bookNowLabel": "Reservar já"
+    "bookNowLabel": "Reservar já",
+    "shippingLabel": "Ativar morada de envio",
+    "shippingPlaceholder": "Exija que os clientes introduzam uma morada de envio durante o processo de finalização da compra."
   }
 }

package/src/shared/content-settings/components/payment-config-field/payment-toggle-field/PaymentToggleField.mixin.ts

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { RequestPaymentConfig } from '@brand-page';
 import type { UpdateItemValuePayload } from '../../../models';
+import { useEventTracker } from '../../../../../brand-page-maker/composables/useEventTracker';
 
 export default defineComponent({
   props: {
@@ -25,6 +26,11 @@ export default defineComponent({
       type: Object as PropType<RequestPaymentConfig>,
       required: true,
     },
+    placeholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   emits: ['update:modelValue'],
   computed: {
@@ -44,6 +50,12 @@ export default defineComponent({
           value,
         };
 
+        if (this.settingsName === 'isShippingEnabled') {
+          const eventTracker = useEventTracker();
+
+          eventTracker.sendShippingToggleEvent(newVal);
+        }
+
         this.$emit('update:modelValue', payload);
       },
     },

package/src/shared/content-settings/components/payment-config-field/payment-toggle-field/PaymentToggleField.vue

@@ -3,7 +3,10 @@
     data-component="payment-toggle-field"
     class="tw-flex tw-flex-row tw-mt-2"
   >
-    <span class="tw-flex-grow tw-text-sm">
+    <span v-if="placeholder" class="tw-flex-grow tw-text-sm tw-font-bold">
+      {{ label }}
+    </span>
+    <span v-else class="tw-flex-grow tw-text-sm">
       {{ label }}
     </span>
     <Toggle
@@ -12,6 +15,11 @@
       color="primary"
     />
   </div>
+  <p v-if="placeholder">
+    <span class="tw-flex-grow tw-text-sm tw-text-grayscale-600">
+      {{ placeholder }}
+    </span>
+  </p>
 </template>
 <script>
 import { Toggle } from '@designcrowd/fe-shared-lib';

package/lib/src/brand-page/components/payment/RequestPaymentStripe.mixin.d.ts

@@ -1,106 +0,0 @@
-import type { PropType } from 'vue';
-import type { BrandPagePaymentConfig, ButtonStyles, CheckoutInformation, CreateCartResult, StripePaymentIntent } from '@brand-page/models';
-declare global {
-    interface Window {
-        Stripe?: stripe.StripeStatic;
-    }
-}
-interface RequestPaymentStripeData {
-    cardCvcElement: stripe.elements.Element | undefined;
-    cardCvcElementError: stripe.Error | undefined;
-    cardExpiryElement: stripe.elements.Element | undefined;
-    cardExpiryElementError: stripe.Error | undefined;
-    cardNumberElement: stripe.elements.Element | undefined;
-    cardNumberElementError: stripe.Error | undefined;
-    emailAddress: string | undefined;
-    emailAddressError: Error | undefined;
-    isBusy: boolean;
-    isCardCvcValid: boolean;
-    isCardExpiryValid: boolean;
-    isCardNumberValid: boolean;
-    isInitialised: boolean;
-    stripe: stripe.Stripe | undefined;
-    submitButtonMessage: string;
-    submitError: Error | stripe.Error | undefined;
-}
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    cart: {
-        type: PropType<CreateCartResult<StripePaymentIntent>>;
-        required: true;
-    };
-    checkoutInformation: {
-        type: PropType<CheckoutInformation>;
-        required: true;
-    };
-    buttonStyles: {
-        type: PropType<ButtonStyles>;
-        required: true;
-    };
-    paymentConfig: {
-        type: PropType<BrandPagePaymentConfig>;
-        required: true;
-    };
-    stripePublishableKey: {
-        type: StringConstructor;
-        required: true;
-    };
-    productName: {
-        type: StringConstructor;
-        required: false;
-    };
-    isShop: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-}>, {}, RequestPaymentStripeData, {
-    amount(): string;
-    currencyCode(): string;
-    currencySymbol(): string;
-    isStripeElementFormComplete(): boolean;
-    isSubmitButtonEnabled(): boolean;
-    arrowStyle(): BrandPageCssStyle;
-    payButtonStyle(): BrandPageCssStyle;
-    containerStyle(): BrandPageCssStyle;
-}, {
-    initialiseStripeScript(): void;
-    initStripeElements(): void;
-    onBackClick(): void;
-    onEmailAddressEvent(): void;
-    onStripeElementChange(response?: stripe.elements.ElementChangeResponse): void;
-    onSubmitPaymentClick(): Promise<void>;
-    validateEmailAddress(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    cart: {
-        type: PropType<CreateCartResult<StripePaymentIntent>>;
-        required: true;
-    };
-    checkoutInformation: {
-        type: PropType<CheckoutInformation>;
-        required: true;
-    };
-    buttonStyles: {
-        type: PropType<ButtonStyles>;
-        required: true;
-    };
-    paymentConfig: {
-        type: PropType<BrandPagePaymentConfig>;
-        required: true;
-    };
-    stripePublishableKey: {
-        type: StringConstructor;
-        required: true;
-    };
-    productName: {
-        type: StringConstructor;
-        required: false;
-    };
-    isShop: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    isShop: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/payment/RequestPaymentStripe.mixin.js

@@ -1,253 +0,0 @@
-import { defineComponent } from 'vue';
-import validator from 'validator';
-import { debug, debugError } from '../../../utils/debug.util';
-import * as constants from '../../constants';
-import { requestPaymentStripeTr } from '@src/composables/useTranslate';
-import brandPageClient from '../../clients/brand-page.client';
-const INVALID_EMAIL_MESSAGE = () => requestPaymentStripeTr('invalidEmailMessage');
-const STRIPE_SCRIPT_URL = 'https://js.stripe.com/v3/';
-const SCRIPT_TAG_NAME = 'SCRIPT';
-const centsToDollars = (cents) => {
-    return cents / 100;
-};
-export default defineComponent({
-    props: {
-        cart: {
-            type: Object,
-            required: true,
-        },
-        checkoutInformation: {
-            type: Object,
-            required: true,
-        },
-        buttonStyles: {
-            type: Object,
-            required: true,
-        },
-        paymentConfig: {
-            type: Object,
-            required: true,
-        },
-        stripePublishableKey: {
-            type: String,
-            required: true,
-        },
-        productName: {
-            type: String,
-            required: false,
-        },
-        isShop: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            cardCvcElement: undefined,
-            cardCvcElementError: undefined,
-            cardExpiryElement: undefined,
-            cardExpiryElementError: undefined,
-            cardNumberElement: undefined,
-            cardNumberElementError: undefined,
-            emailAddress: undefined,
-            emailAddressError: undefined,
-            isBusy: false,
-            isCardCvcValid: false,
-            isCardExpiryValid: false,
-            isCardNumberValid: false,
-            isInitialised: false,
-            stripe: undefined,
-            submitButtonMessage: 'Pay',
-            submitError: undefined,
-        };
-    },
-    computed: {
-        amount() {
-            return centsToDollars(this.cart.totalAmount).toFixed(2) || '';
-        },
-        currencyCode() {
-            return this.paymentConfig?.defaultCurrency || '';
-        },
-        currencySymbol() {
-            return this.paymentConfig?.defaultCurrencySymbol || '$';
-        },
-        isStripeElementFormComplete() {
-            return (this.isCardCvcValid && this.isCardExpiryValid && this.isCardNumberValid);
-        },
-        isSubmitButtonEnabled() {
-            return (this.isInitialised &&
-                this.isStripeElementFormComplete &&
-                Boolean(this.emailAddress) &&
-                !this.emailAddressError &&
-                !this.isBusy);
-        },
-        arrowStyle() {
-            return {
-                color: this.buttonStyles.style?.color,
-            };
-        },
-        payButtonStyle() {
-            if (!this.buttonStyles || !this.buttonStyles.style) {
-                return { ...this.buttonStyles };
-            }
-            return {
-                ...this.buttonStyles.style,
-                color: this.buttonStyles.style.backgroundColor,
-                backgroundColor: this.buttonStyles.style.color,
-            };
-        },
-        containerStyle() {
-            const buttonStyle = { ...this.buttonStyles?.style };
-            return {
-                color: buttonStyle.color,
-            };
-        },
-    },
-    mounted() {
-        this.initialiseStripeScript();
-        this.initStripeElements();
-    },
-    methods: {
-        initialiseStripeScript() {
-            debug('initialiseStripeScript: start');
-            const stripeScript = Array.from(document.head.children).find((c) => {
-                return (c.tagName.toUpperCase() === SCRIPT_TAG_NAME &&
-                    c.hasAttribute('src') &&
-                    c.getAttribute('src') === STRIPE_SCRIPT_URL);
-            });
-            if (stripeScript) {
-                debug('initialiseStripeScript: script exists');
-                return;
-            }
-            const scriptElement = document.createElement(SCRIPT_TAG_NAME);
-            scriptElement.setAttribute('src', STRIPE_SCRIPT_URL);
-            scriptElement.setAttribute('async', '');
-            scriptElement.setAttribute('defer', '');
-            document.head.appendChild(scriptElement);
-            debug('initialiseStripeScript: script injected');
-        },
-        initStripeElements() {
-            if (!this.stripePublishableKey) {
-                debugError('initStripeElements: stripe publishable key undefined');
-                return;
-            }
-            if (typeof window.Stripe !== 'function') {
-                setTimeout(() => {
-                    debug('initStripeElements: waiting for stripe script');
-                    this.initStripeElements();
-                }, 250);
-                return;
-            }
-            debug('initStripeElements: start');
-            try {
-                this.stripe = window.Stripe(this.stripePublishableKey, {
-                    stripeAccount: this.cart.paymentProviderExternalId,
-                });
-                const stripeElements = this.stripe.elements();
-                // card number
-                this.cardNumberElement = stripeElements.create('cardNumber', {
-                    style: constants.stripeDefaultStyle,
-                    placeholder: 'Credit Card Number',
-                });
-                this.cardNumberElement.mount(this.$refs.cardNumber);
-                this.cardNumberElement.addEventListener('change', this.onStripeElementChange);
-                // cart expiry
-                this.cardExpiryElement = stripeElements.create('cardExpiry', {
-                    style: constants.stripeDefaultStyle,
-                    placeholder: 'Expiry',
-                });
-                this.cardExpiryElement.mount(this.$refs.cardExpiry);
-                this.cardExpiryElement.addEventListener('change', this.onStripeElementChange);
-                // cart cvc
-                this.cardCvcElement = stripeElements.create('cardCvc', {
-                    style: constants.stripeDefaultStyle,
-                    placeholder: 'CVV',
-                });
-                this.cardCvcElement.mount(this.$refs.cardCvc);
-                this.cardCvcElement.addEventListener('change', this.onStripeElementChange);
-                this.isInitialised = true;
-            }
-            catch (err) {
-                console.error(err);
-            }
-            debug('initStripeElements: end');
-        },
-        onBackClick() {
-            this.$emit('go-to-payment-option-selection');
-        },
-        onEmailAddressEvent() {
-            this.validateEmailAddress();
-        },
-        onStripeElementChange(response) {
-            if (!response) {
-                return;
-            }
-            switch (response.elementType) {
-                case 'cardCvc':
-                    this.isCardCvcValid = response.complete;
-                    this.cardCvcElementError = response.error;
-                    break;
-                case 'cardExpiry':
-                    this.isCardExpiryValid = response.complete;
-                    this.cardExpiryElementError = response.error;
-                    break;
-                case 'cardNumber':
-                    this.isCardNumberValid = response.complete;
-                    this.cardNumberElementError = response.error;
-                    break;
-            }
-        },
-        async onSubmitPaymentClick() {
-            if (!this.cardNumberElement ||
-                !this.isSubmitButtonEnabled ||
-                !this.stripe ||
-                !this.stripePublishableKey ||
-                !this.emailAddress) {
-                debugError('onSubmitPaymentClick: invalid operation');
-                return;
-            }
-            this.isBusy = true;
-            try {
-                const paymentIntentResponse = await brandPageClient.createStripePaymentIntent({
-                    cartId: this.cart.cartId,
-                    customerEmail: this.emailAddress,
-                    customerRequestDetails: this.checkoutInformation.customerRequestDetails,
-                    customerMessage: this.checkoutInformation.customerMessage,
-                });
-                if (!paymentIntentResponse) {
-                    this.submitError =
-                        'Unable to create payment intent. Please try again.';
-                    return;
-                }
-                const confirmCardPaymentResult = await this.stripe.confirmCardPayment(paymentIntentResponse.paymentIntent.client_secret, {
-                    payment_method: {
-                        card: this.cardNumberElement,
-                    },
-                });
-                if (confirmCardPaymentResult.error) {
-                    debugError(confirmCardPaymentResult.error);
-                    this.submitError = confirmCardPaymentResult.error;
-                }
-                else {
-                    debug('onSubmitPaymentClick: payment intent success');
-                    this.$emit('success', { result: confirmCardPaymentResult });
-                }
-            }
-            finally {
-                this.isBusy = false;
-            }
-        },
-        validateEmailAddress() {
-            if (!this.emailAddress) {
-                this.emailAddressError = new Error(INVALID_EMAIL_MESSAGE());
-                return;
-            }
-            if (!validator.isEmail(this.emailAddress)) {
-                this.emailAddressError = new Error(INVALID_EMAIL_MESSAGE());
-                return;
-            }
-            this.emailAddressError = undefined;
-        },
-    },
-});