Skip to content

Commit

Permalink
ASUB-8484 Including threshold for pending order and fixing styles (#2133
Browse files Browse the repository at this point in the history 
)

Including threshold for pending order and fixing styles
  • Loading branch information
@LauraPinilla
LauraPinilla authored May 30, 2024
1 parent ec86b77 commit 97794d5
Show file tree
Hide file tree
Showing 9 changed files with 269 additions and 113 deletions.
50 changes: 35 additions & 15 deletions blocks/subscriptions-block/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@include scss.block-components("checkout-main-full");
@include scss.block-properties("checkout-main-full");
}

@include scss.block-components("checkout-main");
@include scss.block-properties("checkout-main");
}
Expand Down Expand Up @@ -93,7 +93,7 @@
@include scss.block-components("checkout-payment-form--stripe-row");
@include scss.block-properties("checkout-payment-form--stripe-row");
}

&--stripe-error {
@include scss.block-components("checkout-payment-form--stripe-error");
@include scss.block-properties("checkout-payment-form--stripe-error");
Expand Down Expand Up @@ -252,7 +252,7 @@
@include scss.block-components("checkout-review-tos-link");
@include scss.block-properties("checkout-review-tos-link");
}

@include scss.block-components("checkout-review-tos-container-link");
@include scss.block-properties("checkout-review-tos-container-link");
}
Expand Down Expand Up @@ -438,11 +438,19 @@
&-cancel-info {
&-button {
&:hover {
@include scss.block-components("subscriptions-subscription-list-detail-cancel-info-button-hover");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-info-button-hover");
@include scss.block-components(
"subscriptions-subscription-list-detail-cancel-info-button-hover"
);
@include scss.block-properties(
"subscriptions-subscription-list-detail-cancel-info-button-hover"
);
}
@include scss.block-components("subscriptions-subscription-list-detail-cancel-info-button");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-info-button");
@include scss.block-components(
"subscriptions-subscription-list-detail-cancel-info-button"
);
@include scss.block-properties(
"subscriptions-subscription-list-detail-cancel-info-button"
);
}
@include scss.block-components("subscriptions-subscription-list-detail-cancel-info");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-info");
Expand All @@ -464,8 +472,12 @@
}

&-payment-title-payment-info {
@include scss.block-components("subscriptions-subscription-list-detail-payment-title-payment-info");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-title-payment-info");
@include scss.block-components(
"subscriptions-subscription-list-detail-payment-title-payment-info"
);
@include scss.block-properties(
"subscriptions-subscription-list-detail-payment-title-payment-info"
);
}

&-payment-next-bill {
Expand All @@ -474,8 +486,12 @@
}

&-payment-billing-frequency {
@include scss.block-components("subscriptions-subscription-list-detail-payment-billing-frequency");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-billing-frequency");
@include scss.block-components(
"subscriptions-subscription-list-detail-payment-billing-frequency"
);
@include scss.block-properties(
"subscriptions-subscription-list-detail-payment-billing-frequency"
);
}

&-billing {
Expand All @@ -489,8 +505,12 @@

&-inactive-sub {
&-paragraph {
@include scss.block-components("subscriptions-subscription-list-detail-inactive-sub-paragraph");
@include scss.block-properties("subscriptions-subscription-list-detail-inactive-sub-paragraph");
@include scss.block-components(
"subscriptions-subscription-list-detail-inactive-sub-paragraph"
);
@include scss.block-properties(
"subscriptions-subscription-list-detail-inactive-sub-paragraph"
);
}
@include scss.block-components("subscriptions-subscription-list-detail-inactive-sub");
@include scss.block-properties("subscriptions-subscription-list-detail-inactive-sub");
Expand All @@ -514,12 +534,12 @@
&-modal {
&-title {
@include scss.block-components("subscriptions-subscription-list-modal-title");
@include scss.block-properties("subscriptions-subscription-list-modal-title");
@include scss.block-properties("subscriptions-subscription-list-modal-title");
}

&-button-div {
@include scss.block-components("subscriptions-subscription-list-modal-button-div");
@include scss.block-properties("subscriptions-subscription-list-modal-button-div");
@include scss.block-properties("subscriptions-subscription-list-modal-button-div");
}
@include scss.block-components("subscriptions-subscription-list-modal");
@include scss.block-properties("subscriptions-subscription-list-modal");
Expand Down
46 changes: 38 additions & 8 deletions blocks/subscriptions-block/components/useCartOrderDetail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,46 @@ const useCartOrderDetail = (paypalToken) => {
} = getProperties(arcSite);

useEffect(() => {
const isUserLoggedIn = async () => {
setIsLoggedIn(await Identity.isLoggedIn());
const checkIsUserLoggedIn = async () => {
const isUserLoggedIn = await Identity.isLoggedIn();
if(isUserLoggedIn){
await Identity.extendSession();
}
setIsLoggedIn(isUserLoggedIn);
setIsFetching(false);
};

isUserLoggedIn();
checkIsUserLoggedIn();
}, [Identity]);

const orderNumberPayPal = localStorage[ARCXP_ORDERNUMBER];

useEffect(() => {
const maxAge = new Date().getTime() - (60 * 60 * 24 * 2 * 1000);

const getCartDetails = async () => {
const cartDetails = await Sales.getCart();
return cartDetails;
};

const getLastPendingOrder = async () => {
const orderHistory = await Sales.getOrderHistory();
const lastPendingOrder = orderHistory?.orders?.find((it) => it.orderStatus === "Pending");

let lastPendingOrder = orderHistory?.orders?.find((it) => it.orderStatus === "Pending");
const lastPaidOrder = orderHistory?.orders?.find((it) => it.orderStatus === "Paid");

if(lastPendingOrder){
if(lastPaidOrder){
if(!(lastPendingOrder?.orderDate >= lastPaidOrder?.orderDate)){
lastPendingOrder = undefined;
}
}

if(!(lastPendingOrder?.orderDate >= maxAge)){
lastPendingOrder = undefined;
}
}

return lastPendingOrder;
};

Expand Down Expand Up @@ -93,20 +114,29 @@ const useCartOrderDetail = (paypalToken) => {
};

const getCartItemFromLocalstorge = () => {
let cartItem;

const items = localStorage.getItem(ARCXP_CART);
const cartItem = verifyJSON(items);
cartItem = verifyJSON(items);

if (cartItem && cartItem?.sku && cartItem?.priceCode && cartItem?.cartDate) {
return cartItem;
if(!(cartItem?.cartDate >= maxAge)){
cartItem = undefined;
localStorage.removeItem(ARCXP_CART);
}
}else{
cartItem = undefined
}
return undefined;

return cartItem;
};

if (!isFetching && !isLoggedIn) {
setIsFetchingCartOrder(false);
}

if (isLoggedIn) {
const itemCart = getCartItemFromLocalstorge();
const itemCart = getCartItemFromLocalstorge();

if (orderNumberPayPal && paypalToken) {
getLastPendingOrder()
Expand Down
34 changes: 29 additions & 5 deletions blocks/subscriptions-block/components/useCartOrderDetail.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,14 +134,15 @@ describe("useCartOrderDetail Hook", () => {
},
];

const orderDate = new Date().getTime() - (60 * 60 * 24 * 1000);
const pendingOrder = {
start: 0,
pageSize: 10,
maxResults: 270,
orders: [
{
orderNumber: "R2OMXGQBQY6SV670",
orderDate: 1715035042000,
orderDate,
orderType: "Parent",
orderStatus: "Pending",
totalAmount: 20,
Expand Down Expand Up @@ -214,6 +215,7 @@ describe("useCartOrderDetail Hook", () => {
jest.spyOn(require("@wpmedia/arc-themes-components"), "useIdentity").mockReturnValue({
Identity: {
isLoggedIn: jest.fn(() => true),
extendSession: jest.fn(() => {})
},
});

Expand Down Expand Up @@ -303,11 +305,11 @@ describe("useCartOrderDetail Hook", () => {
await waitFor(() => expect(result.current.orderDetail).toEqual(undefined));
});

test("There is cart in local storage and pending order, pending order is more recent that pending order", async() => {
test("There is cart in local storage and pending order, pending order is more recent than pending order", async() => {
const sku = 'test';
const priceCode = 'YLE801';
const newDate = new Date(2024, 0, 1);
localStorage.setItem('ArcXP_cart', JSON.stringify({sku, priceCode, cartDate: newDate.getTime() }));
const newDate = new Date().getTime() - (60 * 60 * 24 * 10 * 1000);
localStorage.setItem('ArcXP_cart', JSON.stringify({sku, priceCode, cartDate: newDate }));

const mockSales = {
getCart: jest.fn(() => {}),
Expand Down Expand Up @@ -366,7 +368,28 @@ describe("useCartOrderDetail Hook", () => {
await waitFor(() => expect(result.current.isLoggedIn).toEqual(true));
await waitFor(() =>expect(result.current.cartDetail).toEqual({ ...cart, items: mockedItemDetails }));
await waitFor(() => expect(result.current.orderDetail).toEqual(undefined));
})
});

test("There are not pending orders neither cart, just cart in localStorage, but date is older than 48 hours. Then user should be redirected to offer page", async() => {
const sku = 'test';
const priceCode = 'YLE801';
const newDate = new Date().getTime() - (60 * 60 * 24 * 3 * 1000);
localStorage.setItem('ArcXP_cart', JSON.stringify({sku, priceCode, cartDate: newDate }));

const { result } = renderHook(() => useCartOrderDetail());

expect(result.current.isFetching).toBe(true);
expect(result.current.isFetchingCartOrder).toBe(true);
expect(result.current.isLoggedIn).toBe(false);
expect(result.current.cartDetail).toBe(undefined);
expect(result.current.orderDetail).toBe(undefined);

await waitFor(() => expect(result.current.isFetching).toEqual(false));
await waitFor(() => expect(result.current.isFetchingCartOrder).toEqual(false));
await waitFor(() => expect(result.current.isLoggedIn).toEqual(true));
await waitFor(() => expect(result.current.cartDetail).toEqual(undefined));
await waitFor(() => expect(result.current.orderDetail).toEqual(undefined));
});

test("returns a new cart if there is a orderNumber and paypalToken", async () => {
localStorage.setItem('ArcXP_orderNumber', 'R2OMXGQBQY6SV670');
Expand All @@ -382,6 +405,7 @@ describe("useCartOrderDetail Hook", () => {
jest.spyOn(require("@wpmedia/arc-themes-components"), "useIdentity").mockReturnValue({
Identity: {
isLoggedIn: jest.fn(() => true),
extendSession: jest.fn(() => {})
},
});

Expand Down
4 changes: 3 additions & 1 deletion blocks/subscriptions-block/features/checkout/_children/BillingAddress/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";

import getProperties from "fusion:properties";
import { useFusionContext } from "fusion:context";
import { usePhrases, Input, Button, Stack, useSales } from "@wpmedia/arc-themes-components";
import { usePhrases, Input, Button, Stack, useSales, useIdentity } from "@wpmedia/arc-themes-components";

import countryCodes from "../../../../components/ContactInfo/countryCodes";
import getItemDetails from "../../../../utils/itemDetails";
Expand Down Expand Up @@ -31,6 +31,7 @@ const BillingAddress = ({
const [isValid, setIsValid] = useState(formRef?.current?.checkValidity());

const { Sales } = useSales();
const {Identity} = useIdentity();

const { arcSite } = useFusionContext();
const {
Expand Down Expand Up @@ -67,6 +68,7 @@ const BillingAddress = ({
setBillingAddress(entriesRef.current);
try {
setCaptchaError(null);
await Identity.isLoggedIn();
const order = await Sales.createNewOrder(
{
...entriesRef.current,
Expand Down
Loading

0 comments on commit 97794d5

Please sign in to comment.