ASUB-8303/ Checkout card detail

blocks/identity-block/themes/news.json

@@ -245,6 +245,9 @@
 					"button": {
 						"font-size": "var(--global-font-size-4)"
 					},
+					"button-hover": {
+						"color": "white"
+					},
 					"heading": {
 						"font-size": "var(--heading-level-4-font-size)",
 						"font-family": "var(--font-family-secondary)",

blocks/subscriptions-block/_index.scss

@@ -1,6 +1,22 @@
 @use "@wpmedia/arc-themes-components/scss";
 
 .b-checkout {
+	&__card {
+		@include scss.block-components("checkout-card");
+		@include scss.block-properties("checkout-card");
+		&-children-div {
+			@include scss.block-components("checkout-card-children-div");
+			@include scss.block-properties("checkout-card-children-div");
+		}
+		&-summary {
+			@include scss.block-components("checkout-card-summary");
+			@include scss.block-properties("checkout-card-summary");
+		}
+		&-closed {
+			@include scss.block-components("checkout-card-closed");
+			@include scss.block-properties("checkout-card-closed");
+		}
+	}
 	&__cart {
 		@include scss.block-components("checkout-cart");
 		@include scss.block-properties("checkout-cart");

blocks/subscriptions-block/components/CheckoutCardDetail/index.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { usePhrases, Heading, Stack, Divider, Paragraph } from "@wpmedia/arc-themes-components";
+import PropTypes from "@arc-fusion/prop-types";
+
+export const ACCOUNT = "Account";
+export const BILLING_ADDRESS = "Billing Address";
+export const PAYMENT = "Payment";
+export const REVIEW = "Review";
+
+const CheckoutCardDetail = ({ type, summary, children, link, className, isOpen, isComplete }) => {
+	const phrases = usePhrases();
+
+	const getTitle = () => {
+		if (type === ACCOUNT) return `1. ${phrases.t("checkout-block.account")}`;
+		if (type === BILLING_ADDRESS) return `2. ${phrases.t("checkout-block.billingAddress")}`;
+		if (type === PAYMENT) return `3. ${phrases.t("checkout-block.payment")}`;
+		if (type === REVIEW) return `4. ${phrases.t("checkout-block.review")}`;
+		return null;
+	}
+
+	return (
+		<div>
+			<Divider />
+			<Stack className={isOpen ? className : `${className}-closed`} direction="horizontal" gap="16px">
+				<Heading>{getTitle()}</Heading>
+				{!isOpen && isComplete && <div className={`${className}-summary`}>
+					<Paragraph>{summary}</Paragraph>
+					{link}
+				</div>}
+			</Stack>
+			{isOpen && <div className={`${className}-children-div`}>{children}</div>}
+		</div>
+	);
+};
+
+CheckoutCardDetail.propTypes = {
+	type: PropTypes.oneOf([ACCOUNT, BILLING_ADDRESS, PAYMENT, REVIEW]).isRequired,
+	summary: PropTypes.string,
+	children: PropTypes.any,
+	link: PropTypes.any,
+	isOpen: PropTypes.boolean,
+	isComplete: PropTypes.boolean
+}
+
+export default CheckoutCardDetail;

blocks/subscriptions-block/components/CheckoutCardDetail/index.test.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import '@testing-library/jest-dom';
+
+import CheckoutCardDetail from "./index";
+
+describe('CheckoutCardDetail component', () => {
+
+  it("summary is shown when card is open",  async () => {
+    render(
+      <CheckoutCardDetail
+        type='Account'
+        isOpen
+      >
+        <p>Account placeholder</p>
+      </CheckoutCardDetail>
+    )
+    expect(screen.getByText('1. checkout-block.account')).toHaveTextContent('1. checkout-block.account');
+    expect(screen.getByText('Account placeholder')).toHaveTextContent('Account placeholder');
+  });
+  it("do not show summary if card is closed",  async () => {
+    render(
+      <CheckoutCardDetail
+        type='Account'
+        isOpen={false}
+      >
+        <p>Account placeholder</p>
+      </CheckoutCardDetail>
+    )
+    expect(screen.getByText('1. checkout-block.account')).toHaveTextContent('1. checkout-block.account');
+    expect(screen.queryByText('Account placeholder')).toBe(null);
+  });
+  it("renders billing address card",  async () => {
+    render(
+      <CheckoutCardDetail
+        type='Billing Address'
+        isOpen
+      />
+    )
+    expect(screen.getByText('2. checkout-block.billingAddress')).toHaveTextContent('2. checkout-block.billingAddress');
+  });
+  it("renders payment card",  async () => {
+    render(
+      <CheckoutCardDetail
+        type='Payment'
+        isOpen
+      />
+    )
+    expect(screen.getByText('3. checkout-block.payment')).toHaveTextContent('3. checkout-block.payment');
+  });
+  it("renders review card",  async () => {
+    render(
+      <CheckoutCardDetail
+        type='Review'
+        isOpen
+      />
+    )
+    expect(screen.getByText('4. checkout-block.review')).toHaveTextContent('4. checkout-block.review');
+  });
+})

blocks/subscriptions-block/features/checkout/default.jsx

@@ -1,41 +1,37 @@
 import React, { useEffect, useState } from "react";
 
 import PropTypes from "@arc-fusion/prop-types";
-import { usePhrases, Heading, Link, useIdentity } from "@wpmedia/arc-themes-components";
-import Cart from "../../components/Cart";
-import ContactInfo from "../../components/ContactInfo";
-import PaymentInfo from "./_children/PaymentInfo";
+import { usePhrases, Heading, useIdentity } from "@wpmedia/arc-themes-components";
+import CheckoutCardDetail, {ACCOUNT, BILLING_ADDRESS, PAYMENT, REVIEW} from "../../components/CheckoutCardDetail";
 
 export const LABEL_ORDER_NUMBER_PAYPAL = "ArcSubs_OrderNumber"
 const BLOCK_CLASS_NAME = "b-checkout";
 
 const Checkout = ({ customFields }) => {
-	const { offerURL, successURL, loginURL, stripeIntentsID } = customFields;
+	const { loginURL } = customFields;
 
 	const [loggedIn, setIsLoggedIn] = useState(false);
+	const [isFetching, setIsFetching] = useState(true);
 	const [user, setUser] = useState(false);
-	const [signedInIdentity, setSignedInIdentity] = useState(false);
-	const [showPaymentScreen, setShowPaymentScreen] = useState(false);
-	const [userInfo, setUserInfo] = useState({});
-
-	const { Identity, getSignedInIdentity } = useIdentity();
+	const initialState = {
+		account: true,
+		billingAddress: false,
+		payment: false,
+		review: false
+	}
+	const [isOpen, setIsOpen] = useState(initialState);
+	const [isComplete, setIsComplete] = useState(initialState);
+	const [accountSummary, setAccountSummary] = useState();
+
+	const { Identity } = useIdentity();
 	const phrases = usePhrases();
 
-	const [isInitialized, setIsInitialized] = useState(false);
-
-	const params = new URLSearchParams(window.location.search);
-	const token = params.get("token");
-
-	useEffect(() => {
-		const isOrderNumberInLocalStorage = localStorage.getItem(LABEL_ORDER_NUMBER_PAYPAL);
-		if (isOrderNumberInLocalStorage && token) {
-			setIsInitialized(true);
-		}
-	}, []);
+	const checkoutURL = window.location.href;
 
 	useEffect(() => {
 		const isLoggedIn = async () => {
 			setIsLoggedIn(await Identity.isLoggedIn());
+			setIsFetching(false);
 		};
 
 		isLoggedIn();
@@ -49,7 +45,6 @@ const Checkout = ({ customFields }) => {
 				.then((userProfile) => {
 					if (isActive) {
 						setUser(userProfile);
-						setSignedInIdentity(getSignedInIdentity(userProfile));
 					}
 				})
 				.catch(() => {
@@ -64,47 +59,39 @@ const Checkout = ({ customFields }) => {
 		};
 	}, [Identity, loggedIn]);
 
-	const logoutCallback = () => {
-		Identity.logout().then(() => {
-			setUser(false);
-		});
-	};
-
-	const setUserInfoAndShowPaymentScreen = async (userInfo) => {
-		const { firstName, lastName } = userInfo;
-		setUserInfo(userInfo);
-		if (user) {
-			Identity.updateUserProfile({ firstName, lastName });
+	useEffect(() => {
+		if(!isFetching) {
+			if (loggedIn) {
+				setIsOpen(state => ({...state, account: false, billingAddress: true}))
+				setIsComplete(state => ({...state, account: true}))
+				if (user?.email) setAccountSummary(user?.email)
+			} else if (loginURL && checkoutURL) {
+				window.location.href = `${loginURL}?redirect=${checkoutURL}`;
+			}
 		}
-		setShowPaymentScreen(true);
-	};
+	}, [loggedIn, user, isFetching, loginURL, checkoutURL])
+
+	const logoutAndRedirect = () => {
+		Identity.logout().then(() => {
+			window.location.href = `${loginURL}?redirect=${checkoutURL}`;
+		})
+	}
 
 	return (
 		<section className={BLOCK_CLASS_NAME}>
 			<Heading>{phrases.t("checkout-block.headline")}</Heading>
-			<Link href={offerURL}>{phrases.t("checkout-block.back-to-offer-page")}</Link>
-
-			<Cart offerURL={offerURL} className={BLOCK_CLASS_NAME} />
-
-			{!showPaymentScreen && !isInitialized ? (
-				<ContactInfo
-					callback={setUserInfoAndShowPaymentScreen}
-					user={user}
-					signedInIdentity={signedInIdentity}
-					logoutCallback={logoutCallback}
-					className={BLOCK_CLASS_NAME}
-				/>
-			) : (
-				<PaymentInfo
-					successURL={successURL}
-					className={BLOCK_CLASS_NAME}
-					userInfo={userInfo}
-					offerURL={offerURL}
-					stripeIntentsID={stripeIntentsID}
-					isInitialized = {isInitialized}
-					loginURL = {loginURL}
-				/>
-			)}
+			<CheckoutCardDetail className={`${BLOCK_CLASS_NAME}__card`} type={ACCOUNT} summary={accountSummary} link={<a href={`${loginURL}?redirect=${checkoutURL}`} onClick={logoutAndRedirect}>Edit</a>} isOpen={isOpen.account} isComplete={isComplete.account}>
+				Account Placeholder 
+			</CheckoutCardDetail>
+			<CheckoutCardDetail className={`${BLOCK_CLASS_NAME}__card`} type={BILLING_ADDRESS} summary='1234 Street Dr, San Diego, CA 92121' link={<a href='/login' >{phrases.t("checkout-block.edit")}</a>} isOpen={isOpen.billingAddress}>
+				Billing Address Placeholder
+			</CheckoutCardDetail>
+			<CheckoutCardDetail className={`${BLOCK_CLASS_NAME}__card`} type={PAYMENT} summary='Credit Card' link={<a href='/login' >Edit</a>} isOpen={isOpen.payment}>
+				Payment Placeholder
+			</CheckoutCardDetail>
+			<CheckoutCardDetail className={`${BLOCK_CLASS_NAME}__card`} type={REVIEW} isOpen={isOpen.review}>
+				Review Placeholder
+			</CheckoutCardDetail>
 		</section>
 	);
 };

blocks/subscriptions-block/features/checkout/default.test.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { useIdentity, usePhrases } from "@wpmedia/arc-themes-components";
+import useSales from "../../components/useSales";
+import Checkout from "./default";
+
+jest.mock("@wpmedia/arc-themes-components");
+jest.mock("../../components/useSales");
+
+const assignMock = jest.fn(() => "checkoutURL");
+delete window.location;
+window.location = { assign: assignMock, href: "checkoutURL" };
+
+describe("Checkout Feature", () => {
+	afterEach(() => {
+		assignMock.mockClear();
+	})
+	it("show billing address card when user is logged in", async () => {
+		useIdentity.mockImplementation(() => ({
+			getSignedInIdentity: jest.fn(
+				(user) =>
+					user?.identities?.reduce((prev, current) =>
+						prev.lastLoginDate > current.lastLoginDate ? prev : current,
+					) || null,
+			),
+			Identity: {
+				isLoggedIn: jest.fn(async () => true),
+				getUserProfile: jest.fn(async () => {})
+			},
+		}));
+
+		usePhrases.mockImplementation(() => ({
+			t: jest.fn((phrase => phrase))
+		}))
+
+		useSales.mockReturnValue({
+			Sales: {},
+		});
+
+		render(
+			<Checkout
+				customFields={{
+					offerURL: "/offer-url/"
+				}}
+			/>,
+		);
+		expect(await screen.findByText("Billing Address Placeholder")).not.toBeNull();
+	});
+	it("redirects user to login url when user is not logged in", async () => {
+		useIdentity.mockImplementation(() => ({
+			getSignedInIdentity: jest.fn(
+				(user) =>
+					user?.identities?.reduce((prev, current) =>
+						prev.lastLoginDate > current.lastLoginDate ? prev : current,
+					) || null,
+			),
+			Identity: {
+				isLoggedIn: jest.fn(async () => false),
+				getUserProfile: jest.fn(async () => {})
+			},
+		}));
+
+		usePhrases.mockImplementation(() => ({
+			t: jest.fn((phrase => phrase))
+		}))
+
+		useSales.mockReturnValue({
+			Sales: {},
+		});
+
+		render(
+			<Checkout
+				customFields={{
+					loginURL: "/login-url/",
+				}}
+			/>,
+		);
+
+		expect(await screen.findByText("Account Placeholder")).not.toBeNull();
+		await waitFor(() => expect(window.location.href).toBe("/login-url/?redirect=checkoutURL"));
+	});
+});