@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/components/payment/Payment.mixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PropType } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
 import {
@@ -12,6 +12,7 @@ import type {
   CreateCartResult,
   PaymentConfig,
   PaymentOption,
+  TextStyleOptions,
 } from '@brand-page/models';
 import type {
   RequestPaymentViewModel,
@@ -21,6 +22,12 @@ import raygunUtil from '@brand-page/utils/raygun.util';
 import { isPreviewMode } from '@brand-page/utils';
 import { sectionFrameStyle } from '@brand-page/utils/button.util';
 import { paymentTr } from '@src/composables/useTranslate';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '@brand-page/utils/text-role-css.util';
 
 const DEFAULT_PAYMENT_SUCCESS_MESSAGE = paymentTr(
   `defaultPaymentSuccessMessage`,
@@ -65,6 +72,15 @@ export default defineComponent({
       required: true,
     },
   },
+  setup() {
+    // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+    // the button box bakes the button text style's own values, as before this change.
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+    return {
+      roleOptions,
+    };
+  },
   data: () => ({
     paymentState,
     cart: undefined as CreateCartResult<unknown> | undefined | null,
@@ -77,6 +93,10 @@ export default defineComponent({
       return this.viewModel.buttonStyles.style;
     },
 
+    continueButtonRoleClass(): string | undefined {
+      return roleClassFor(this.viewModel.buttonTextStyle?.textStyleType);
+    },
+
     currencySymbol(): string {
       return this.paymentConfig.paymentConfig?.defaultCurrencySymbol || '';
     },
@@ -143,7 +163,19 @@ export default defineComponent({
         buttonStyle.backgroundColor = buttonStyle.backgroundColor;
       }
 
-      return { ...buttonStyle, ...this.viewModel.buttonTextStyle };
+      // The label's TextWrapper applies the size; an em size here too would multiply.
+      const roleStyle = roleStyleFor(
+        this.viewModel.buttonTextStyle?.textStyleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+
+      return {
+        ...buttonStyle,
+        ...roleTypographyStyle(this.viewModel.buttonTextStyle, roleStyle, {
+          omit: ['fontSize'],
+        }),
+        color: this.viewModel.buttonTextStyle?.color ?? buttonStyle.color,
+      };
     },
 
     paymentOptionButtonStyle(): BrandPageCssStyle {

package/src/brand-page/components/payment/Payment.test.ts

@@ -0,0 +1,188 @@
+import { describe, it, expect } from 'vitest';
+import { mount, shallowMount } from '@vue/test-utils';
+import { computed } from 'vue';
+import Payment from './Payment.vue';
+import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import PaymentMixin, { paymentState } from './Payment.mixin';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+// The Continue/Done label's TextWrapper applies the size; on the <button> too, an em size
+// multiplies (Heading 1's 6.875em twice is ~750px).
+describe('Payment — button text size applied once', () => {
+  const computedFor = (
+    name: 'continueButtonStyle' | 'continueButtonRoleClass',
+    thisArg: Record<string, unknown>,
+  ): Record<string, unknown> =>
+    (
+      PaymentMixin.computed![name] as unknown as (
+        this: unknown,
+      ) => Record<string, unknown>
+    ).call(thisArg);
+
+  const buttonRole = {
+    fontFamily: 'Playwrite AT',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    buttonStyles: {
+      style: { backgroundColor: 'var(--palette-0)', borderStyle: 'solid' },
+    },
+    buttonTextStyle: {
+      textStyleType: 'heading1',
+      fontFamily: 'Playwrite AT',
+      fontSize: '6.875em',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      color: 'var(--palette-1)',
+      textAlign: 'center',
+    },
+  };
+
+  const roleOptions = { heading1: { style: buttonRole } };
+
+  it('the continue button carries a role reference for every role-defined property except size', () => {
+    expect(
+      computedFor('continueButtonStyle', { viewModel, roleOptions }),
+    ).toEqual({
+      backgroundColor: 'var(--palette-0)',
+      borderStyle: 'solid',
+      fontFamily: 'var(--role-font-family)',
+      fontWeight: 'var(--role-font-weight)',
+      lineHeight: 'var(--role-line-height)',
+      color: 'var(--palette-1)',
+    });
+  });
+
+  it('the box carries the role class', () => {
+    expect(
+      computedFor('continueButtonRoleClass', { viewModel, roleOptions }),
+    ).toBe('bp-text-role-heading1');
+  });
+
+  it('a stored off value stays a literal against a role that sets the opposite', () => {
+    const style = computedFor('continueButtonStyle', {
+      viewModel: {
+        ...viewModel,
+        buttonTextStyle: { ...viewModel.buttonTextStyle, fontWeight: 'normal' },
+      },
+      roleOptions,
+    });
+
+    expect(style.fontWeight).toBe('normal');
+  });
+
+  it('with no role in scope, the box bakes the button text style literally, minus size', () => {
+    const style = computedFor('continueButtonStyle', {
+      viewModel,
+      roleOptions: undefined,
+    });
+
+    expect(style).toEqual({
+      backgroundColor: 'var(--palette-0)',
+      borderStyle: 'solid',
+      fontFamily: 'Playwrite AT',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      color: 'var(--palette-1)',
+    });
+  });
+});
+
+// B1 — the tests above call the mixin's computed directly (`.call(thisArg)`), which never runs
+// Payment.vue's own `setup()` (the manual `...PaymentMixin.setup()` spread a mixin's own setup
+// needs — Vue's `mixins:` merge never runs it). A real mount proves the injection actually wires
+// up, not just the computed's logic in isolation.
+describe('Payment — continue box role wiring (real mount, BP-5969 B1)', () => {
+  const buttonRole = {
+    fontFamily: 'Playwrite AT',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    buttonStyles: {
+      style: { backgroundColor: 'var(--palette-0)', borderStyle: 'solid' },
+    },
+    buttonTextStyle: {
+      textStyleType: 'heading1',
+      fontFamily: 'Playwrite AT',
+      fontSize: '6.875em',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      color: 'var(--palette-1)',
+    },
+  };
+
+  const mountPayment = () =>
+    mount(Payment, {
+      props: {
+        context: { isPreview: true },
+        viewModel,
+        paymentConfig: { paymentOptions: [] },
+        paymentRequestDetails: {
+          isRequestValid: false,
+          selectedPaymentOptionIds: [],
+          showProductName: false,
+        },
+      } as any,
+      global: {
+        provide: {
+          [TEXT_ROLE_OPTIONS_KEY]: computed(() => ({
+            heading1: { style: buttonRole },
+          })),
+        },
+      },
+    });
+
+  it('the continue button carries the role class and a role reference, mounted through Vue', () => {
+    const button = mountPayment().get('button');
+
+    expect(button.classes()).toContain('bp-text-role-heading1');
+    expect(button.attributes('style')).toContain(
+      'font-family: var(--role-font-family)',
+    );
+  });
+});
+
+// The success message is its own rich text, drawn with its own style, not the description's.
+describe('Payment — success message', () => {
+  it('renders the success message with its own style', async () => {
+    const viewModel = {
+      type: 'support-me',
+      title: 'Support',
+      description: 'Pay me',
+      successMessage: 'Thanks!',
+      displayStyle: 'preview',
+      buttonStyles: { style: {} },
+      titleStyle: { textStyleType: 'heading5' },
+      descriptionStyle: { textStyleType: 'paragraph2', fontSize: '1.25em' },
+      successMessageStyle: { textStyleType: 'paragraph3' },
+      buttonTextStyle: { textStyleType: 'button' },
+    };
+
+    const wrapper = shallowMount(Payment, {
+      props: {
+        context: { isPreview: true },
+        viewModel,
+        paymentConfig: { paymentOptions: [] },
+        paymentRequestDetails: {
+          isRequestValid: false,
+          selectedPaymentOptionIds: [],
+          showProductName: false,
+        },
+      } as any,
+    });
+
+    await wrapper.setData({ state: paymentState.Success });
+
+    const message = wrapper
+      .findAllComponents(TextWrapper)
+      .find((text) => text.props('text') === 'Thanks!');
+
+    expect(message?.props('textStyle')).toEqual(viewModel.successMessageStyle);
+  });
+});

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

@@ -61,10 +61,13 @@
             class="tw-w-full tw-py-4 tw-mt-4 tw-block tw-text-center tw-text-base tw-border-0"
             :style="continueButtonStyle"
             :disabled="!isPaymentOptionSelectionContinueEnabled"
-            :class="{
-              'hover:tw-cursor-pointer':
-                isPaymentOptionSelectionContinueEnabled,
-            }"
+            :class="[
+              continueButtonRoleClass,
+              {
+                'hover:tw-cursor-pointer':
+                  isPaymentOptionSelectionContinueEnabled,
+              },
+            ]"
             @click="onPaymentOptionSelectionContinueClick"
           >
             <TextWrapper
@@ -94,7 +97,7 @@
 
       <div v-if="!isCollapsed && state === paymentState.Success">
         <TextWrapper
-          :text-style="viewModel.descriptionStyle"
+          :text-style="viewModel.successMessageStyle"
           :text="successMessage"
           element="p"
           class="tw-text-center"
@@ -109,6 +112,7 @@
           <button
             class="tw-block tw-border-0 tw-mt-4 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-full hover:tw-cursor-pointer"
             :style="continueButtonStyle"
+            :class="continueButtonRoleClass"
             @click="onDoneButtonClick"
           >
             <TextWrapper
@@ -140,7 +144,10 @@ export default {
   },
   mixins: [PaymentMixin],
   setup() {
+    // A mixin's own `setup()` is never run by Vue's `mixins:` merge, so `PaymentMixin`'s (which
+    // injects the live role options) is invoked here instead.
     return {
+      ...PaymentMixin.setup(),
       commonTr,
       paymentTr,
     };

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

@@ -37,6 +37,7 @@
       <!-- Start Email Address -->
       <TextInput
         v-model="emailAddress"
+        element-classes="tw-font-sans"
         class="tw-mt-3 tw-mb-2"
         :placeholder="requestPaymentStripeTr('emailAddressPlaceholder')"
         :error="Boolean(emailAddressError)"

package/src/brand-page/components/payment/support-me/SupportMe.mixin.ts

@@ -1,7 +1,11 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PropType } from 'vue';
 import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
-import type { BrandPageContext, PaymentOption } from '../../../models';
+import type {
+  BrandPageContext,
+  PaymentOption,
+  TextStyleOptions,
+} from '../../../models';
 import type { SupportMeViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
 import {
@@ -13,6 +17,12 @@ import {
   DEFAULT_CURRENCY_CODE,
 } from '../../../constants';
 import { paymentTr } from '@src/composables/useTranslate';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '@brand-page/utils/text-role-css.util';
 
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
 const MINIMUM_CUSTOM_AMOUNT = 0.1;
@@ -28,6 +38,15 @@ export default defineComponent({
       required: true,
     },
   },
+  setup() {
+    // BP-5969: the live role options, provided by `Page`. Absent (rendered outside Page) →
+    // the message block bakes its heading style's own values, as before this change.
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+    return {
+      roleOptions,
+    };
+  },
   data() {
     return {
       customerMessage: undefined as string | undefined,
@@ -121,6 +140,34 @@ export default defineComponent({
       return buttonStyle;
     },
 
+    customerMessageBlockRoleClass(): string | undefined {
+      return roleClassFor(this.viewModel.headingStyle?.textStyleType);
+    },
+
+    // The nested TextWrapper owns the label's size. The container retains the other heading
+    // properties so the input follows its surrounding visual treatment without compounding ems.
+    customerMessageBlockStyle(): BrandPageCssStyle {
+      const roleStyle = roleStyleFor(
+        this.viewModel.headingStyle?.textStyleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+
+      return {
+        ...roleTypographyStyle(this.viewModel.headingStyle, roleStyle, {
+          omit: ['fontSize'],
+        }),
+        ...(this.viewModel.headingStyle?.color
+          ? { color: this.viewModel.headingStyle.color }
+          : {}),
+        // The old template bound the whole heading style inline (`:style="headingStyle"`),
+        // which let a left/right heading alignment beat the block's static `tw-text-center` —
+        // `roleTypographyStyle` doesn't carry alignment, so it's kept here explicitly (S7).
+        ...(this.viewModel.headingStyle?.textAlign
+          ? { textAlign: this.viewModel.headingStyle.textAlign }
+          : {}),
+      };
+    },
+
     tippingLabel(): string {
       return paymentTr(`selectAnAmount`, {
         CURRENCY_CODE: this.currencyCodeDisplay,

package/src/brand-page/components/payment/support-me/SupportMe.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import SupportMeMixin from './SupportMe.mixin';
+
+const computedFor = (
+  name: 'customerMessageBlockStyle' | 'customerMessageBlockRoleClass',
+  thisArg: Record<string, unknown>,
+): Record<string, unknown> =>
+  (
+    SupportMeMixin.computed![name] as unknown as (
+      this: unknown,
+    ) => Record<string, unknown>
+  ).call(thisArg);
+
+// The "Your message" block wraps a label (its own TextWrapper, on the same role) and a
+// TextInput — not a TextWrapper itself, so it carries its typography directly, every property
+// but size: the inner label already owns the role's size, so the block omits fontSize to avoid
+// compounding (3b7015ad).
+describe('SupportMe — customer message block', () => {
+  const headingRole = {
+    fontFamily: 'Lato',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    headingStyle: {
+      textStyleType: 'heading5',
+      fontFamily: 'Lato',
+      fontSize: '1em',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+    },
+  };
+
+  const roleOptions = { heading5: { style: headingRole } };
+
+  it('carries a role reference for every role-defined property except size', () => {
+    expect(
+      computedFor('customerMessageBlockStyle', { viewModel, roleOptions }),
+    ).toEqual({
+      fontFamily: 'var(--role-font-family)',
+      fontWeight: 'var(--role-font-weight)',
+      lineHeight: 'var(--role-line-height)',
+    });
+  });
+
+  it('carries the heading role class', () => {
+    expect(
+      computedFor('customerMessageBlockRoleClass', { viewModel, roleOptions }),
+    ).toBe('bp-text-role-heading5');
+  });
+
+  it('an own colour still wins', () => {
+    const style = computedFor('customerMessageBlockStyle', {
+      viewModel: {
+        headingStyle: { ...viewModel.headingStyle, color: '#123456' },
+      },
+      roleOptions,
+    });
+
+    expect(style.color).toBe('#123456');
+  });
+
+  it('with no role in scope, bakes the heading style literally except size', () => {
+    expect(
+      computedFor('customerMessageBlockStyle', {
+        viewModel,
+        roleOptions: undefined,
+      }),
+    ).toEqual({
+      fontFamily: 'Lato',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+    });
+  });
+
+  // S7 — the old template bound the whole heading style inline (`:style="headingStyle"`), so a
+  // left/right heading alignment beat the block's static `tw-text-center` class. Dropped when the
+  // block moved to `roleTypographyStyle` (which carries no alignment); restored explicitly.
+  it('keeps the heading role text alignment on the block', () => {
+    const style = computedFor('customerMessageBlockStyle', {
+      viewModel: {
+        headingStyle: { ...viewModel.headingStyle, textAlign: 'left' },
+      },
+      roleOptions,
+    });
+
+    expect(style.textAlign).toBe('left');
+  });
+
+  it('with no alignment of its own, the block carries none (the static class centers it)', () => {
+    const style = computedFor('customerMessageBlockStyle', {
+      viewModel,
+      roleOptions,
+    });
+
+    expect(style.textAlign).toBeUndefined();
+  });
+});

package/src/brand-page/components/payment/support-me/SupportMe.vue

@@ -64,6 +64,7 @@
           />
           <TextInput
             v-model="customAmount"
+            element-classes="tw-font-sans"
             type="number"
             class="tw-mt-3 tw-mb-2"
             :prefix-text="currencySymbol"
@@ -74,7 +75,8 @@
         <div
           v-if="isCustomerMessageFieldVisible"
           class="tw-text-center tw-text-sm tw-mt-4"
-          :style="viewModel.headingStyle"
+          :style="customerMessageBlockStyle"
+          :class="customerMessageBlockRoleClass"
         >
           <TextWrapper
             :text-style="viewModel.headingStyle"
@@ -83,6 +85,7 @@
           />
           <TextInput
             v-model="customerMessage"
+            element-classes="tw-font-sans"
             class="tw-mt-3 tw-mb-2"
             :placeholder="paymentTr(`yourMessage`)"
             :error="!isCustomerMessageValid"
@@ -107,7 +110,10 @@ export default {
   },
   mixins: [SupportMeMixin],
   setup() {
+    // A mixin's own `setup()` is never run by Vue's `mixins:` merge, so `SupportMeMixin`'s
+    // (which injects the live role options) is invoked here instead.
     return {
+      ...SupportMeMixin.setup(),
       paymentTr,
     };
   },

package/src/brand-page/components/payment/support-me/SupportMe.vue.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
+import SupportMe from './SupportMe.vue';
+import TextWrapper from '../../text-wrapper/TextWrapper.vue';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+// B1 — SupportMe.test.ts calls the mixin's computed directly (`.call(thisArg)`), which never
+// runs SupportMe.vue's own `setup()` (the manual `...SupportMeMixin.setup()` spread a mixin's own
+// setup needs — Vue's `mixins:` merge never runs it). A real mount proves the injection actually
+// wires up, not just the computed's logic in isolation. Kept in its own file for readability, not
+// because combining a bare mixin import with a real mount crashes — Payment.test.ts does both in
+// one file without issue.
+describe('SupportMe customer message block — role wiring (real mount, BP-5969 B1)', () => {
+  const headingRole = {
+    fontFamily: 'Lato',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    lineHeight: '1.2',
+  };
+
+  const viewModel = {
+    headingStyle: {
+      textStyleType: 'heading5',
+      fontFamily: 'Lato',
+      fontSize: '1em',
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+    },
+    buttonStyles: { style: {} },
+    buttonTextStyle: { textStyleType: 'button' },
+    supportMeConfig: {
+      paymentOptions: [],
+      isCustomerMessageEnabled: true,
+      paymentConfig: {},
+    },
+  };
+
+  const mountSupportMe = () =>
+    mount(SupportMe, {
+      props: {
+        context: { isPreview: true } as any,
+        viewModel,
+      } as any,
+      global: {
+        provide: {
+          [TEXT_ROLE_OPTIONS_KEY]: computed(() => ({
+            heading5: { style: headingRole },
+          })),
+        },
+      },
+    });
+
+  it('the "Your message" label is the only element that applies the role size', () => {
+    const wrapper = mountSupportMe();
+    const block = wrapper.get(
+      '[data-component="support-me"] .tw-mt-4.tw-text-center.tw-text-sm',
+    );
+
+    expect(block.classes()).toContain('bp-text-role-heading5');
+    expect(block.attributes('style')).not.toContain('font-size');
+    expect(block.getComponent(TextWrapper).props('textStyle')).toEqual(
+      viewModel.headingStyle,
+    );
+  });
+});