Skip to content

Commit

Permalink
fix linting errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@edwardcho1231
edwardcho1231 committed Mar 26, 2024
1 parent 36d2d5d commit dcddb97
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 80 deletions.
1 change: 1 addition & 0 deletions blocks/subscriptions-block/components/CheckoutCardDetail/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
33 changes: 15 additions & 18 deletions blocks/subscriptions-block/components/CheckoutCardDetail/index.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -10,13 +10,13 @@ describe('CheckoutCardDetail component', () => {
render(
<CheckoutCardDetail
type='Account'
isOpen={true}
isOpen
>
<p>Account placeholder</p>
</CheckoutCardDetail>
)
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(
Expand All @@ -27,37 +27,34 @@ describe('CheckoutCardDetail component', () => {
<p>Account placeholder</p>
</CheckoutCardDetail>
)
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(
<CheckoutCardDetail
type='Billing Address'
isOpen={true}
>
</CheckoutCardDetail>
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(
<CheckoutCardDetail
type='Payment'
isOpen={true}
>
</CheckoutCardDetail>
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(
<CheckoutCardDetail
type='Review'
isOpen={true}
>
</CheckoutCardDetail>
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');
});
})
68 changes: 6 additions & 62 deletions blocks/subscriptions-block/features/checkout/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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());
Expand All @@ -62,7 +45,6 @@ const Checkout = ({ customFields }) => {
.then((userProfile) => {
if (isActive) {
setUser(userProfile);
setSignedInIdentity(getSignedInIdentity(userProfile));
}
})
.catch(() => {
Expand All @@ -83,66 +65,28 @@ 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(() => {
window.location.href = `${loginURL}?redirect=${checkoutURL}`;
})
}

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 (
<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}>
<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}>
<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}>
Expand Down

0 comments on commit dcddb97

Please sign in to comment.