feat: revised express checkout copy (MP-3090)

src/components/LoanCards/RecommendLoanForGoal/RecommendLoanForGoalFooter.vue

@@ -99,7 +99,7 @@ const primaryLabel = computed(() => {
 
 const secondaryLabel = computed(() => {
 	return props.expressCheckoutEnabled
-		? 'Express checkout'
+		? 'Add to basket'
 		: 'Explore more options';
 });
 

src/components/Thanks/ExpressCheckout/ExpressCheckoutModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<KvLightbox
-		title="Confirm Payment"
+		:title="lightboxTitle"
 		:visible="lightboxOpen"
 		:prevent-close="!ready || paying"
 		@lightbox-closed="closeLightbox"
@@ -45,7 +45,7 @@
 				class="tw-text-caption tw-mt-1 tw-mb-7 md:!tw-mb-2"
 				style="font-weight: 611;"
 			>
-				By clicking &ldquo;Confirm payment&rdquo; you will be funding this loan
+				By clicking &ldquo;Complete order&rdquo; you will be funding this loan
 				and we&rsquo;ll charge your payment method for the selected amount.
 			</p>
 
@@ -130,6 +130,8 @@ let clientTokenPromise = null;
 
 const depositRequired = computed(() => (numeral(totalDue.value).value() ?? 0) > 0);
 
+const lightboxTitle = computed(() => (ready.value ? 'Adding to basket' : 'Confirm payment'));
+
 const paymentButtonState = computed(() => {
 	if (depositRequired.value && !transactionsEnabled.value) {
 		return 'disabled';

test/unit/specs/components/Thanks/ExpressCheckout/ExpressCheckoutModal.spec.js

@@ -45,7 +45,8 @@ vi.mock('@kiva/kv-components', () => ({
 	},
 	KvLightbox: {
 		props: ['preventClose', 'title', 'visible'],
-		template: '<div v-if="visible" data-testid="lightbox" :data-prevent-close="preventClose"><slot /></div>',
+		// eslint-disable-next-line max-len
+		template: '<div v-if="visible" data-testid="lightbox" :data-prevent-close="preventClose">{{ title }}<slot /></div>',
 	},
 	KvLoadingPlaceholder: {
 		template: '<div data-testid="loading-placeholder"></div>',
@@ -187,6 +188,11 @@ describe('ExpressCheckoutModal', () => {
 		});
 	});
 
+	it('renders the card with correct heading', async () => {
+		await mountComponent();
+		expect(wrapper.text()).toContain('Adding to basket');
+	});
+
 	// executeOneTimeCheckout runs trackSuccess internally (kv-shop), which fires Meta Purchase + GA +
 	// Optimizely for this checkoutId. Tracking again here would double-count the Purchase.
 	it('does not track the transaction itself — kv-shop already did', async () => {
@@ -343,5 +349,13 @@ describe('ExpressCheckoutModal', () => {
 			expect(wrapper.find('[data-testid="express-checkout-loading"]').exists()).toBe(true);
 			expect(wrapper.find('form').exists()).toBe(false);
 		});
+
+		it('renders the card with correct heading while loading', async () => {
+			mountClosed();
+			wrapper.vm.openLoading();
+			await wrapper.vm.$nextTick();
+
+			expect(wrapper.text()).toContain('Confirm payment');
+		});
 	});
 });