diff --git a/blocks/subscriptions-block/components/CheckoutCardDetail/index.jsx b/blocks/subscriptions-block/components/CheckoutCardDetail/index.jsx index a26320826..7b227868b 100644 --- a/blocks/subscriptions-block/components/CheckoutCardDetail/index.jsx +++ b/blocks/subscriptions-block/components/CheckoutCardDetail/index.jsx @@ -15,6 +15,7 @@ const CheckoutCardDetail = ({ type, summary, children, link, className, isOpen, 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 ( diff --git a/blocks/subscriptions-block/components/CheckoutCardDetail/index.test.jsx b/blocks/subscriptions-block/components/CheckoutCardDetail/index.test.jsx index 0a9f7e5a7..de5a5b7ca 100644 --- a/blocks/subscriptions-block/components/CheckoutCardDetail/index.test.jsx +++ b/blocks/subscriptions-block/components/CheckoutCardDetail/index.test.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { render, screen, act } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import '@testing-library/jest-dom'; import CheckoutCardDetail from "./index"; @@ -10,13 +10,13 @@ describe('CheckoutCardDetail component', () => { render(

Account placeholder

) - expect(await screen.getByText('1. checkout-block.account')).toHaveTextContent('1. checkout-block.account'); - expect(await screen.getByText('Account placeholder')).toHaveTextContent('Account placeholder'); + 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( @@ -27,37 +27,34 @@ describe('CheckoutCardDetail component', () => {

Account placeholder

) - expect(await screen.getByText('1. checkout-block.account')).toHaveTextContent('1. checkout-block.account'); - expect(await screen.queryByText('Account placeholder')).toBe(null); + 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( - + isOpen + /> ) - expect(await screen.getByText('2. checkout-block.billingAddress')).toHaveTextContent('2. checkout-block.billingAddress'); + expect(screen.getByText('2. checkout-block.billingAddress')).toHaveTextContent('2. checkout-block.billingAddress'); }); it("renders payment card", async () => { render( - + isOpen + /> ) - expect(await screen.getByText('3. checkout-block.payment')).toHaveTextContent('3. checkout-block.payment'); + expect(screen.getByText('3. checkout-block.payment')).toHaveTextContent('3. checkout-block.payment'); }); it("renders review card", async () => { render( - + isOpen + /> ) - expect(await screen.getByText('4. checkout-block.review')).toHaveTextContent('4. checkout-block.review'); + expect(screen.getByText('4. checkout-block.review')).toHaveTextContent('4. checkout-block.review'); }); }) \ No newline at end of file diff --git a/blocks/subscriptions-block/features/checkout/default.jsx b/blocks/subscriptions-block/features/checkout/default.jsx index 6d2b9f409..36a651705 100644 --- a/blocks/subscriptions-block/features/checkout/default.jsx +++ b/blocks/subscriptions-block/features/checkout/default.jsx @@ -2,23 +2,17 @@ import React, { useEffect, useState } from "react"; import PropTypes from "@arc-fusion/prop-types"; import { usePhrases, Heading, useIdentity } from "@wpmedia/arc-themes-components"; -import Cart from "../../components/Cart"; -import ContactInfo from "../../components/ContactInfo"; -import PaymentInfo from "./_children/PaymentInfo"; 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 initialState = { account: true, billingAddress: false, @@ -29,22 +23,11 @@ const Checkout = ({ customFields }) => { const [isComplete, setIsComplete] = useState(initialState); const [accountSummary, setAccountSummary] = useState(); - const { Identity, getSignedInIdentity } = useIdentity(); + const { Identity } = useIdentity(); const phrases = usePhrases(); - const [isInitialized, setIsInitialized] = useState(false); - - const params = new URLSearchParams(window.location.search); - const token = params.get("token"); const checkoutURL = window.location.href; - useEffect(() => { - const isOrderNumberInLocalStorage = localStorage.getItem(LABEL_ORDER_NUMBER_PAYPAL); - if (isOrderNumberInLocalStorage && token) { - setIsInitialized(true); - } - }, []); - useEffect(() => { const isLoggedIn = async () => { setIsLoggedIn(await Identity.isLoggedIn()); @@ -62,7 +45,6 @@ const Checkout = ({ customFields }) => { .then((userProfile) => { if (isActive) { setUser(userProfile); - setSignedInIdentity(getSignedInIdentity(userProfile)); } }) .catch(() => { @@ -83,11 +65,11 @@ const Checkout = ({ customFields }) => { setIsOpen(state => ({...state, account: false, billingAddress: true})) setIsComplete(state => ({...state, account: true})) if (user?.email) setAccountSummary(user?.email) - } else { + } else if (loginURL && checkoutURL) { window.location.href = `${loginURL}?redirect=${checkoutURL}`; } } - }, [loggedIn, user, isFetching]) + }, [loggedIn, user, isFetching, loginURL, checkoutURL]) const logoutAndRedirect = () => { Identity.logout().then(() => { @@ -95,54 +77,16 @@ const Checkout = ({ customFields }) => { }) } - const logoutCallback = () => { - Identity.logout().then(() => { - setUser(false); - }); - }; - - const setUserInfoAndShowPaymentScreen = async (userInfo) => { - const { firstName, lastName } = userInfo; - setUserInfo(userInfo); - if (user) { - Identity.updateUserProfile({ firstName, lastName }); - } - setShowPaymentScreen(true); - }; - return (
{phrases.t("checkout-block.headline")} - {/* {phrases.t("checkout-block.back-to-offer-page")} - - - - {!showPaymentScreen && !isInitialized ? ( - - ) : ( - - )} */} Edit} isOpen={isOpen.account} isComplete={isComplete.account}> Account Placeholder - {phrases.t("checkout-block.edit")}} isOpen={isOpen.billingAddress}> + {phrases.t("checkout-block.edit")}} isOpen={isOpen.billingAddress}> Billing Address Placeholder - Edit} isOpen={isOpen.payment}> + Edit} isOpen={isOpen.payment}> Payment Placeholder