@designcrowd/library.brand-page 6.2.4 → 6.2.5-ast-small-bugs

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.4",
+  "version": "6.2.5-ast-small-bugs",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/button/ButtonStyleWrapper.vue

@@ -160,9 +160,11 @@ const brushRightStyle = computed(() => ({
   pointer-events: none;
 }
 .bp-button-shape :deep(button),
-.bp-button-shape :deep(a) {
+.bp-button-shape :deep(a),
+.bp-button-shape :deep(.c-button) {
   position: relative; /* sit above the inert background */
-  /* !important to override the host button's inline background-color. */
+  /* !important to override the host button's inline background-color. A page link nests
+     the styled .c-button div inside its <a>, so that needs clearing too. */
   background-color: transparent !important;
 }
 /* button-paper ships hardcoded fill="black"; recolour to the button's fill. CSS

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -213,7 +213,7 @@ const showCtaMirror = computed((): boolean => {
 }
 
 .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav {
-  @apply tw-flex;
+  @apply tw-flex tw-justify-center;
 }
 
 /* DESKTOP_TAB_6 */
@@ -256,7 +256,7 @@ const showCtaMirror = computed((): boolean => {
   @apply tw-w-full;
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav {
-  @apply tw-flex;
+  @apply tw-flex tw-justify-center;
 }
 
 /* DESKTOP_TAB_NO_LOGO_1, DESKTOP_HAMBURGER_NO_LOGO_1 */
@@ -585,7 +585,7 @@ const showCtaMirror = computed((): boolean => {
 /* MOBILE_TAB_1/2 with the nav hidden: the stack is a plain flex row, so the button wraps below it. */
 .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta,
 .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta {
-  @apply tw-flex-wrap tw-justify-center;
+  @apply tw-flex-wrap;
 }
 
 /* MOBILE_TAB_NO_LOGO_1 (nav shown or not — its flex-centre stack wraps the button either way)

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

@@ -164,6 +164,7 @@ import {
   type ButtonStyles,
   type CheckoutInformation,
   type CreateCartResult,
+  type CreateStripePaymentIntentResponse,
   type StripePaymentIntent,
   type StripeShippingDetails,
 } from '../../models';
@@ -363,7 +364,7 @@ const initStripeElements = (): void => {
 
     cardNumberElement.value = stripeElements.create('cardNumber', {
       style: constants.stripeDefaultStyle,
-      placeholder: 'Credit Card Number',
+      placeholder: requestPaymentStripeTr('cardNumberPlaceholder'),
     });
     if (cardNumberRef.value) {
       cardNumberElement.value.mount(cardNumberRef.value);
@@ -372,7 +373,7 @@ const initStripeElements = (): void => {
 
     cardExpiryElement.value = stripeElements.create('cardExpiry', {
       style: constants.stripeDefaultStyle,
-      placeholder: 'Expiry',
+      placeholder: requestPaymentStripeTr('cardExpiryPlaceholder'),
     });
     if (cardExpiryRef.value) {
       cardExpiryElement.value.mount(cardExpiryRef.value);
@@ -381,7 +382,7 @@ const initStripeElements = (): void => {
 
     cardCvcElement.value = stripeElements.create('cardCvc', {
       style: constants.stripeDefaultStyle,
-      placeholder: 'CVV',
+      placeholder: requestPaymentStripeTr('cardCvcPlaceholder'),
     });
     if (cardCvcRef.value) {
       cardCvcElement.value.mount(cardCvcRef.value);
@@ -441,10 +442,15 @@ const onSubmitPaymentClick = async (): Promise<void> => {
   }
 
   isBusy.value = true;
+  submitError.value = undefined;
 
   try {
-    const paymentIntentResponse =
-      await brandPageClient.createStripePaymentIntent({
+    let paymentIntentResponse: CreateStripePaymentIntentResponse | null = null;
+
+    // Only the intent request is caught: nothing is charged before it, so
+    // "try again" is safe here but not after confirmCardPayment.
+    try {
+      paymentIntentResponse = await brandPageClient.createStripePaymentIntent({
         cartId: props.cart.cartId,
         customerEmail: emailAddress.value,
         customerRequestDetails:
@@ -455,10 +461,13 @@ const onSubmitPaymentClick = async (): Promise<void> => {
             ? shippingDetails.value
             : undefined,
       });
+    } catch (err) {
+      console.error(err);
+    }
 
     if (!paymentIntentResponse) {
       submitError.value = new Error(
-        'Unable to create payment intent. Please try again.',
+        requestPaymentStripeTr('paymentIntentErrorMessage'),
       );
 
       return;