@designcrowd/library.brand-page 5.17.2 → 5.17.4

package/src/brand-page/components/payment/RequestPaymentStripe.vue

@@ -1,17 +1,17 @@
 <template>
   <div data-component="request-payment-stripe" :style="containerStyle">
-    <div class="tw-relative tw-my-2 tw-justify-center">
+    <div class="tw-relative tw-my-2">
       <button
-        class="tw-bg-transparent tw-border-none tw-top-0 tw-left-0 hover:tw-cursor-pointer"
+        class="tw-bg-transparent tw-border-none tw-absolute tw-left-0 tw-top-1/2 -tw-translate-y-1/2 hover:tw-cursor-pointer"
         @click="onBackClick"
       >
         <Icon name="chevron-left" size="sm" :style="arrowStyle" />
       </button>
-      <div v-if="!isShop" class="tw-w-full tw-flex tw-justify-center">
+      <div class="tw-w-full tw-flex tw-justify-center">
         <span class="tw-text-center">
           {{ currencySymbol }}{{ amount }} ({{ currencyCode }})
           {{
-            productName
+            !isShop && productName
               ? requestPaymentStripeTr('forProduct', {
                   PRODUCT_NAME: productName,
                 })
@@ -27,14 +27,35 @@
       <Loader />
     </div>
     <div v-show="isInitialised">
+      <PaymentShippingAddress
+        v-if="props.isShippingEnabled"
+        v-model="shippingDetails"
+        @validation-change="onShippingValidationChange"
+      />
+      <p class="tw-font-bold tw-mt-2">
+        {{ requestPaymentStripeTr('emailAddress') }}
+      </p>
+      <!-- Start Email Address -->
+      <TextInput
+        v-model="emailAddress"
+        class="tw-mt-3 tw-mb-2"
+        :placeholder="requestPaymentStripeTr('emailAddressPlaceholder')"
+        :error="Boolean(emailAddressError)"
+        @blur="onEmailAddressEvent"
+        @input="onEmailAddressEvent"
+      />
+      <p v-if="emailAddressError" class="form-error">
+        {{ emailAddressError.message }}
+      </p>
+      <!-- End Email Address -->
       <p class="tw-font-bold">{{ requestPaymentStripeTr('cardNumber') }}</p>
       <!-- Start Card Number -->
       <div
-        ref="cardNumber"
-        class="tw-border tw-border-solid tw-mb-2 tw-px-4 tw-py-1 tw-mt-3 tw-rounded tw-bg-white"
+        ref="cardNumberRef"
+        class="tw-w-full tw-border tw-border-solid tw-rounded tw-px-4 tw-py-3 tw-text-base tw-bg-white tw-mt-3 tw-mb-2"
         :class="{
           'tw-border-error-500': cardNumberElementError,
-          'tw-border-grayscale-500': !cardNumberElementError,
+          'tw-border-grayscale-300': !cardNumberElementError,
         }"
       />
       <div v-if="cardNumberElementError" class="form-error tw-pb-2">
@@ -45,19 +66,19 @@
       <!-- Start Card CVC Expiry -->
       <div class="tw-flex tw-flex-row tw-mt-3">
         <div
-          ref="cardExpiry"
-          class="tw-border tw-border-solid tw-border-grayscale-500 tw-grow tw-mb-3 tw-px-4 tw-py-1 tw-rounded tw-bg-white"
+          ref="cardExpiryRef"
+          class="tw-border tw-border-solid tw-rounded tw-px-4 tw-py-3 tw-text-base tw-bg-white tw-grow tw-mb-3"
           :class="{
             'tw-border-error-500': cardExpiryElementError,
-            'tw-border-grayscale-500': !cardExpiryElementError,
+            'tw-border-grayscale-300': !cardExpiryElementError,
           }"
         />
         <div
-          ref="cardCvc"
-          class="tw-border tw-border-solid tw-border-grayscale-500 tw-grow tw-mb-3 tw-ml-2 tw-px-4 tw-py-1 tw-rounded tw-w-1/4 tw-bg-white"
+          ref="cardCvcRef"
+          class="tw-border tw-border-solid tw-rounded tw-px-4 tw-py-3 tw-text-base tw-bg-white tw-grow tw-mb-3 tw-ml-2 tw-w-1/4"
           :class="{
             'tw-border-error-500': cardCvcElementError,
-            'tw-border-grayscale-500': !cardCvcElementError,
+            'tw-border-grayscale-300': !cardCvcElementError,
           }"
         />
       </div>
@@ -69,21 +90,6 @@
       </div>
       <!-- End Card CVC Expiry -->
 
-      <p class="tw-font-bold">{{ requestPaymentStripeTr('emailAddress') }}</p>
-      <!-- Start Email Address -->
-      <TextInput
-        v-model="emailAddress"
-        class="tw-mt-3 tw-mb-2"
-        :placeholder="requestPaymentStripeTr('emailAddressPlaceholder')"
-        :error="Boolean(emailAddressError)"
-        @blur="onEmailAddressEvent"
-        @input="onEmailAddressEvent"
-      />
-      <p v-if="emailAddressError" class="form-error">
-        {{ emailAddressError.message }}
-      </p>
-      <!-- End Email Address -->
-
       <!-- Start Error Message -->
       <p v-if="submitError" class="form-error tw-mt-2">
         {{ submitError.message }}
@@ -134,28 +140,359 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { Icon, TextInput, Loader } from '@designcrowd/fe-shared-lib';
+import validator from 'validator';
 import IconStripe from '../icon/IconStripe.vue';
-import CheckoutStripeMixin from './RequestPaymentStripe.mixin.ts';
-import { requestPaymentStripeTr } from '@src/composables/useTranslate';
-
-export default {
-  components: {
-    Icon,
-    IconStripe,
-    TextInput,
-    Loader,
-  },
-  mixins: [CheckoutStripeMixin],
-  methods: {
-    requestPaymentStripeTr,
-  },
+import PaymentShippingAddress from '../shop/PaymentShippingAddress.vue';
+import { debug, debugError } from '../../../utils/debug.util';
+import * as constants from '../../constants';
+import type {
+  BrandPagePaymentConfig,
+  ButtonStyles,
+  CheckoutInformation,
+  CreateCartResult,
+  StripePaymentIntent,
+  StripeShippingDetails,
+} from '../../models';
+import { requestPaymentStripeTr } from '../../../composables/useTranslate';
+import brandPageClient from '../../clients/brand-page.client';
+
+declare global {
+  interface Window {
+    Stripe?: stripe.StripeStatic;
+  }
+}
+
+const STRIPE_SCRIPT_URL = 'https://js.stripe.com/v3/';
+const SCRIPT_TAG_NAME = 'SCRIPT';
+
+interface Props {
+  cart: CreateCartResult<StripePaymentIntent>;
+  checkoutInformation: CheckoutInformation;
+  buttonStyles: ButtonStyles;
+  paymentConfig: BrandPagePaymentConfig;
+  stripePublishableKey: string;
+  productName?: string;
+  isShop?: boolean;
+  isShippingEnabled: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  productName: undefined,
+  isShop: false,
+  isShippingEnabled: false,
+});
+
+const emit = defineEmits<{
+  (e: 'go-to-payment-option-selection'): void;
+  (e: 'success', payload: { result: unknown }): void;
+}>();
+
+const cardNumberRef = ref<HTMLElement | null>(null);
+const cardExpiryRef = ref<HTMLElement | null>(null);
+const cardCvcRef = ref<HTMLElement | null>(null);
+
+const cardCvcElement = ref<stripe.elements.Element | undefined>(undefined);
+const cardCvcElementError = ref<stripe.Error | undefined>(undefined);
+const cardExpiryElement = ref<stripe.elements.Element | undefined>(undefined);
+const cardExpiryElementError = ref<stripe.Error | undefined>(undefined);
+const cardNumberElement = ref<stripe.elements.Element | undefined>(undefined);
+const cardNumberElementError = ref<stripe.Error | undefined>(undefined);
+const emailAddress = ref<string | undefined>(undefined);
+const emailAddressError = ref<Error | undefined>(undefined);
+const isBusy = ref(false);
+const isCardCvcValid = ref(false);
+const isCardExpiryValid = ref(false);
+const isCardNumberValid = ref(false);
+const isInitialised = ref(false);
+const stripeInstance = ref<stripe.Stripe | undefined>(undefined);
+const submitButtonMessage = ref('Pay');
+const submitError = ref<Error | stripe.Error | undefined>(undefined);
+
+const shippingDetails = ref<StripeShippingDetails>({
+  name: '',
+  line1: '',
+  line2: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  country: '',
+});
+
+const isShippingValid = ref(false);
+
+const amount = computed((): string => {
+  return (props.cart.totalAmount / 100).toFixed(2) || '';
+});
+
+const currencyCode = computed((): string => {
+  return props.paymentConfig?.defaultCurrency || '';
+});
+
+const currencySymbol = computed((): string => {
+  return props.paymentConfig?.defaultCurrencySymbol || '$';
+});
+
+const isStripeElementFormComplete = computed((): boolean => {
+  return (
+    isCardCvcValid.value && isCardExpiryValid.value && isCardNumberValid.value
+  );
+});
+
+const isSubmitButtonEnabled = computed((): boolean => {
+  return (
+    isInitialised.value &&
+    isStripeElementFormComplete.value &&
+    Boolean(emailAddress.value) &&
+    !emailAddressError.value &&
+    !isBusy.value &&
+    (props.isShippingEnabled ? isShippingValid.value : true)
+  );
+});
+
+const arrowStyle = computed((): StyleValue => {
+  return {
+    color: props.buttonStyles.style?.color,
+  } as StyleValue;
+});
+
+const payButtonStyle = computed((): StyleValue => {
+  if (!props.buttonStyles || !props.buttonStyles.style) {
+    return { ...props.buttonStyles } as StyleValue;
+  }
+
+  return {
+    ...props.buttonStyles.style,
+    color: props.buttonStyles.style.backgroundColor,
+    backgroundColor: props.buttonStyles.style.color,
+  } as StyleValue;
+});
+
+const containerStyle = computed((): StyleValue => {
+  const buttonStyle = { ...props.buttonStyles?.style };
+
+  return {
+    color: buttonStyle.color,
+  } as StyleValue;
+});
+
+const initialiseStripeScript = (): void => {
+  debug('initialiseStripeScript: start');
+
+  const stripeScript = Array.from(document.head.children).find(
+    (child): child is HTMLScriptElement => {
+      return (
+        child.tagName.toUpperCase() === SCRIPT_TAG_NAME &&
+        child.hasAttribute('src') &&
+        child.getAttribute('src') === STRIPE_SCRIPT_URL
+      );
+    },
+  );
+
+  if (stripeScript) {
+    debug('initialiseStripeScript: script exists');
+
+    return;
+  }
+
+  const scriptElement = document.createElement(
+    SCRIPT_TAG_NAME,
+  ) as HTMLScriptElement;
+
+  scriptElement.setAttribute('src', STRIPE_SCRIPT_URL);
+  scriptElement.setAttribute('async', '');
+  scriptElement.setAttribute('defer', '');
+
+  document.head.appendChild(scriptElement);
+
+  debug('initialiseStripeScript: script injected');
+};
+
+const initStripeElements = (): void => {
+  if (!props.stripePublishableKey) {
+    debugError('initStripeElements: stripe publishable key undefined');
+
+    return;
+  }
+
+  if (typeof window.Stripe !== 'function') {
+    setTimeout(() => {
+      debug('initStripeElements: waiting for stripe script');
+      initStripeElements();
+    }, 250);
+
+    return;
+  }
+
+  debug('initStripeElements: start');
+
+  try {
+    stripeInstance.value = window.Stripe(props.stripePublishableKey, {
+      stripeAccount: props.cart.paymentProviderExternalId,
+    });
+
+    const stripeElements = stripeInstance.value.elements();
+
+    cardNumberElement.value = stripeElements.create('cardNumber', {
+      style: constants.stripeDefaultStyle,
+      placeholder: 'Credit Card Number',
+    });
+    if (cardNumberRef.value) {
+      cardNumberElement.value.mount(cardNumberRef.value);
+    }
+    cardNumberElement.value.addEventListener('change', onStripeElementChange);
+
+    cardExpiryElement.value = stripeElements.create('cardExpiry', {
+      style: constants.stripeDefaultStyle,
+      placeholder: 'Expiry',
+    });
+    if (cardExpiryRef.value) {
+      cardExpiryElement.value.mount(cardExpiryRef.value);
+    }
+    cardExpiryElement.value.addEventListener('change', onStripeElementChange);
+
+    cardCvcElement.value = stripeElements.create('cardCvc', {
+      style: constants.stripeDefaultStyle,
+      placeholder: 'CVV',
+    });
+    if (cardCvcRef.value) {
+      cardCvcElement.value.mount(cardCvcRef.value);
+    }
+    cardCvcElement.value.addEventListener('change', onStripeElementChange);
+
+    isInitialised.value = true;
+  } catch (err) {
+    console.error(err);
+  }
+
+  debug('initStripeElements: end');
+};
+
+const onBackClick = (): void => {
+  emit('go-to-payment-option-selection');
+};
+
+const onEmailAddressEvent = (): void => {
+  validateEmailAddress();
+};
+
+const onStripeElementChange = (
+  response?: stripe.elements.ElementChangeResponse,
+): void => {
+  if (!response) {
+    return;
+  }
+
+  switch (response.elementType) {
+    case 'cardCvc':
+      isCardCvcValid.value = response.complete;
+      cardCvcElementError.value = response.error;
+      break;
+    case 'cardExpiry':
+      isCardExpiryValid.value = response.complete;
+      cardExpiryElementError.value = response.error;
+      break;
+    case 'cardNumber':
+      isCardNumberValid.value = response.complete;
+      cardNumberElementError.value = response.error;
+      break;
+  }
+};
+
+const onSubmitPaymentClick = async (): Promise<void> => {
+  if (
+    !cardNumberElement.value ||
+    !isSubmitButtonEnabled.value ||
+    !stripeInstance.value ||
+    !props.stripePublishableKey ||
+    !emailAddress.value
+  ) {
+    debugError('onSubmitPaymentClick: invalid operation');
+
+    return;
+  }
+
+  isBusy.value = true;
+
+  try {
+    const paymentIntentResponse =
+      await brandPageClient.createStripePaymentIntent({
+        cartId: props.cart.cartId,
+        customerEmail: emailAddress.value,
+        customerRequestDetails:
+          props.checkoutInformation.customerRequestDetails,
+        customerMessage: props.checkoutInformation.customerMessage,
+        shippingDetails:
+          props.isShop && props.isShippingEnabled
+            ? shippingDetails.value
+            : undefined,
+      });
+
+    if (!paymentIntentResponse) {
+      submitError.value = new Error(
+        'Unable to create payment intent. Please try again.',
+      );
+
+      return;
+    }
+
+    const confirmCardPaymentResult =
+      await stripeInstance.value.confirmCardPayment(
+        paymentIntentResponse.paymentIntent.client_secret,
+        {
+          payment_method: {
+            card: cardNumberElement.value,
+          },
+        },
+      );
+
+    if (confirmCardPaymentResult.error) {
+      debugError(confirmCardPaymentResult.error);
+      submitError.value = confirmCardPaymentResult.error;
+    } else {
+      debug('onSubmitPaymentClick: payment intent success');
+      emit('success', { result: confirmCardPaymentResult });
+    }
+  } finally {
+    isBusy.value = false;
+  }
+};
+
+const validateEmailAddress = (): void => {
+  if (!emailAddress.value) {
+    emailAddressError.value = new Error(
+      requestPaymentStripeTr('invalidEmailMessage'),
+    );
+
+    return;
+  }
+
+  if (!validator.isEmail(emailAddress.value)) {
+    emailAddressError.value = new Error(
+      requestPaymentStripeTr('invalidEmailMessage'),
+    );
+
+    return;
+  }
+
+  emailAddressError.value = undefined;
 };
+
+const onShippingValidationChange = (isValid: boolean): void => {
+  isShippingValid.value = isValid;
+};
+
+onMounted(() => {
+  initialiseStripeScript();
+  initStripeElements();
+});
 </script>
 <style scoped>
 .form-error {
-  @apply tw-text-sm;
+  @apply tw-text-xs;
   color: #f21b3f;
 }
 </style>

package/src/brand-page/components/shop/PaymentModal.vue

@@ -35,6 +35,7 @@
             :stripe-publishable-key="context.stripePublishableKey!"
             :product-name="productName"
             :is-shop="true"
+            :is-shipping-enabled="props.isShippingEnabled"
             @go-to-payment-option-selection="onGoToCartSelection"
             @success="onRequestPaymentStripeSuccess"
           />
@@ -114,7 +115,7 @@
 <script setup lang="ts">
 import { Modal, Button, Loader } from '@designcrowd/fe-shared-lib';
 import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
-import { computed, reactive, onMounted } from 'vue';
+import { computed, reactive, ref, onMounted } from 'vue';
 import IconStripe from '../icon/IconStripe.vue';
 import RequestPaymentStripe from '../payment/RequestPaymentStripe.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -127,6 +128,7 @@ import type {
   BrandPagePaymentConfig,
   TextStyleDeclaration,
   StripePaymentIntent,
+  StripeShippingDetails,
 } from '@brand-page/models';
 import { paymentProviders } from '@brand-page/constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
@@ -150,10 +152,12 @@ interface Props {
   shopPaymentConfig: BrandPagePaymentConfig;
   descriptionStyle: TextStyleDeclaration | undefined;
   successMessage: string;
+  isShippingEnabled: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isVisible: true,
+  isShippingEnabled: false,
 });
 
 const uniformDescriptionStyle = computed<TextStyleDeclaration>(() => ({
@@ -169,6 +173,8 @@ const data = reactive({
   state: 'creating-cart' as State,
 });
 
+const customerEmail = ref('');
+
 const emit = defineEmits(['on-close', 'on-back']);
 
 const onClose = () => {