Merge pull request #776 from Financial-Times/accommodate-termed-subsc…

…ription-term-type-ii Accommodate 'Termed' subscriptionTermType (II)
Financial-Times · Dec 11, 2023 · 4aafd13 · 4aafd13
2 parents 64c8238 + 1221934
commit 4aafd13
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 5 deletions.
diff --git a/components/__snapshots__/confirmation.spec.js.snap b/components/__snapshots__/confirmation.spec.js.snap
@@ -1,5 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Confirmation renders appropriately if is 'Termed' subscription term type 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <p class="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
+      You are now subscribed to:
+    </p>
+    <h1 class="ncf__header ncf__header--confirmation">
+    </h1>
+  </div>
+  <p class="ncf__paragraph">
+    We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
+  </p>
+  <p class="ncf__paragraph">
+    Here’s a summary of your  subscription:
+  </p>
+  <div class="ncf__headed-paragraph">
+    <h3 class="ncf__header">
+      Something not right?
+    </h3>
+    <p class="ncf__paragraph">
+      Go to your
+      <a class="ncf__link ncf__link--external"
+         href="https://www.ft.com/myaccount/personal-details"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="yourAccount"
+      >
+        account settings
+      </a>
+      to view or edit your account. If you need to get in touch call us on
+      <a href="tel:+442077556248"
+         class="ncf__link ncf__link--external"
+      >
+        +44 (0) 207 755 6248
+      </a>
+      . Or contact us for additional support.
+    </p>
+  </div>
+  <p class="ncf__paragraph">
+    See our
+    <a class="ncf__link ncf__link--external"
+       href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+       target="_top"
+       rel="noopener"
+    >
+      Terms &amp; Conditions
+    </a>
+    for details on how to cancel.
+  </p>
+</div>
+`;
+
 exports[`Confirmation renders appropriately if is B2C Partnership 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">

diff --git a/components/confirmation.jsx b/components/confirmation.jsx
@@ -8,6 +8,7 @@ export function Confirmation({
 	isTrial = false,
 	isB2cPartnership = false,
 	b2cPartnershipCopy = [],
+	isTermedSubscriptionTermType = false,
 	offer = '',
 	email = EMAIL_DEFAULT_TEXT,
 	details = null,
@@ -116,19 +117,22 @@ export function Confirmation({
 				</p>
 			</div>
 			<p className="ncf__paragraph">
-				We will automatically renew your subscription using the payment method
-				provided unless you cancel before your renewal date. See our{' '}
+				{
+					!isTermedSubscriptionTermType
+						? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. '
+						: ''
+				}
+				{'See our '}
 				<a
 					className="ncf__link ncf__link--external"
 					href="http://help.ft.com/help/legal-privacy/terms-conditions/"
 					target="_top"
 					rel="noopener"
 				>
 					Terms &amp; Conditions
-				</a>{' '}
-				for details on how to cancel.
+				</a>
+				{' for details on how to cancel.'}
 			</p>
-
 			{nextActionBottom}
 		</div>
 	);
@@ -138,6 +142,7 @@ Confirmation.propTypes = {
 	isTrial: PropTypes.bool,
 	isB2cPartnership: PropTypes.bool,
 	b2cPartnershipCopy: PropTypes.array,
+	isTermedSubscriptionTermType: PropTypes.bool,
 	offer: PropTypes.string.isRequired,
 	email: PropTypes.string,
 	details: PropTypes.arrayOf(

diff --git a/components/confirmation.spec.js b/components/confirmation.spec.js
@@ -29,6 +29,12 @@ describe('Confirmation', () => {
 		expect(Confirmation).toRenderCorrectly(props);
 	});
 
+	it("renders appropriately if is 'Termed' subscription term type", () => {
+		const props = { isTermedSubscriptionTermType: true };
+
+		expect(Confirmation).toRenderCorrectly(props);
+	});
+
 	it('renders with custom email', () => {
 		const props = { offer: OFFER_TEXT, email: 'test@example.com' };
 

diff --git a/components/confirmation.stories.js b/components/confirmation.stories.js
@@ -64,3 +64,21 @@ Basic.args = {
 	nextActionBottom,
 	newsletterScheduleExplainer,
 };
+
+export const TermedSubscriptionTermType = (args) => <Confirmation {...args} />;
+TermedSubscriptionTermType.args = {
+	isTermedSubscriptionTermType: true,
+	offer: 'Single-term subscription',
+	details: [
+		{
+			title: 'End date',
+			data: 'February 2, 2024',
+		},
+		{
+			title: 'One-time payment',
+			data: 'GBP 19.00',
+		},
+	],
+	nextActionTop,
+	nextActionBottom,
+};