Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subscriptions blocks v2 #1768

Merged
merged 10 commits into from
Nov 15, 2023
4 changes: 2 additions & 2 deletions blocks/identity-block/features/signup/default.jsx
Original file line number Diff line number Diff line change
@@ -96,8 +96,8 @@ const SignUp = ({ customFields, arcSite }) => {
},
specialCharacters: {
value: pwSpecialCharacters,
message: phrases.t("identity-block.password-requirements-uppercase", {
requirementCount: pwUppercase,
message: phrases.t("identity-block.password-requirements-special", {
requirementCount: pwSpecialCharacters,
}),
},
},
6 changes: 6 additions & 0 deletions blocks/identity-block/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import useIdentity from "./components/identity";

export {
// eslint-disable-next-line import/prefer-default-export
useIdentity,
};
1 change: 1 addition & 0 deletions blocks/subscriptions-block/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# `@wpmedia/subscriptions-block`
206 changes: 206 additions & 0 deletions blocks/subscriptions-block/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
@use "@wpmedia/arc-themes-components/scss";

.b-checkout {
&__cart {
@include scss.block-components("checkout-cart");
@include scss.block-properties("checkout-cart");
}

&__cart-items {
@include scss.block-components("checkout-cart-items");
@include scss.block-properties("checkout-cart-items");
}

&__cart-item {
@include scss.block-components("checkout-cart-item");
@include scss.block-properties("checkout-cart-item");

&--name {
@include scss.block-components("checkout-cart-item--name");
@include scss.block-properties("checkout-cart-item--name");
}

&--info {
@include scss.block-components("checkout-cart-item--info");
@include scss.block-properties("checkout-cart-item--info");
}
}

&__contact-info {
@include scss.block-components("checkout-contact-info");
@include scss.block-properties("checkout-contact-info");

&-profile {
@include scss.block-components("checkout-contact-info-profile");
@include scss.block-properties("checkout-contact-info-profile");
}
}

&__identity-row {
@include scss.block-components("checkout-identity-row");
@include scss.block-properties("checkout-identity-row");
}

&__identity-icon {
@include scss.block-components("checkout-identity-icon");
@include scss.block-properties("checkout-identity-icon");
}

&__payment {
@include scss.block-components("checkout-payment");
@include scss.block-properties("checkout-payment");

&-form {
@include scss.block-components("checkout-payment-form");
@include scss.block-properties("checkout-payment-form");

&--stripe-input-container {
@include scss.block-components("checkout-payment-form--stripe-input-container");
@include scss.block-properties("checkout-payment-form--stripe-input-container");
}

&--stripe-label {
@include scss.block-components("checkout-payment-form--stripe-label");
@include scss.block-properties("checkout-payment-form--stripe-label");
}

&--stripe-element {
@include scss.block-components("checkout-payment-form--stripe-element");
@include scss.block-properties("checkout-payment-form--stripe-element");
}

&--stripe-cardDetails {
@include scss.block-components("checkout-payment-form--stripe-cardDetails");
@include scss.block-properties("checkout-payment-form--stripe-cardDetails");
}

&--stripe-countryDetails {
@include scss.block-components("checkout-payment-form--stripe-countryDetails");
@include scss.block-properties("checkout-payment-form--stripe-countryDetails");
}

&--stripe-row {
@include scss.block-components("checkout-payment-form--stripe-row");
@include scss.block-properties("checkout-payment-form--stripe-row");
}

&--border-bottom {
@include scss.block-components("checkout-payment-form--border-bottom");
@include scss.block-properties("checkout-payment-form--border-bottom");
}

&--border-right {
@include scss.block-components("checkout-payment-form--border-right");
@include scss.block-properties("checkout-payment-form--border-right");
}
}

&-information {
@include scss.block-components("checkout-payment-information");
@include scss.block-properties("checkout-payment-information");
}
}

&__test {
@include scss.block-components("checkout-payment-test");
@include scss.block-properties("checkout-payment-test");

&-1 {
@include scss.block-components("checkout-payment-test-1");
@include scss.block-properties("checkout-payment-test-1");
}

&-2 {
@include scss.block-components("checkout-payment-test-2");
@include scss.block-properties("checkout-payment-test-2");
}

&-row {
@include scss.block-components("checkout-payment-test-row");
@include scss.block-properties("checkout-payment-test-row");
}
}

@include scss.block-components("checkout");
@include scss.block-properties("checkout");
}

.b-offer {
&__headings {
@include scss.block-components("offer-headings");
@include scss.block-properties("offer-headings");
}

&__title {
@include scss.block-components("offer-title");
@include scss.block-properties("offer-title");
}

&__subtitle {
@include scss.block-components("offer-subtitle");
@include scss.block-properties("offer-subtitle");
}

&__wrapper {
@include scss.block-components("offer-wrapper");
@include scss.block-properties("offer-wrapper");
}

&__children-grid {
@include scss.block-components("offer-children-grid");
@include scss.block-properties("offer-children-grid");
}

&__grid-list {
@include scss.block-components("offer-grid-list");
@include scss.block-properties("offer-grid-list");

&--1 {
@include scss.block-components("offer-grid-list-1");
@include scss.block-properties("offer-grid-list-1");
}

&--2 {
@include scss.block-components("offer-grid-list-2");
@include scss.block-properties("offer-grid-list-2");
}

&--3 {
@include scss.block-components("offer-grid-list-3");
@include scss.block-properties("offer-grid-list-3");
}

&--4 {
@include scss.block-components("offer-grid-list-4");
@include scss.block-properties("offer-grid-list-4");
}

&--5 {
@include scss.block-components("offer-grid-list-5");
@include scss.block-properties("offer-grid-list-5");

> * {
@include scss.block-components("offer-grid-list-5-children");
@include scss.block-properties("offer-grid-list-5-children");
}
}
}

&__card {
@include scss.block-components("offer-card");
@include scss.block-properties("offer-card");
}

&__card--features {
@include scss.block-components("offer-card-features");
@include scss.block-properties("offer-card-features");
}

&__card--features--feature-item {
@include scss.block-components("offer-card-features--feature-item");
@include scss.block-properties("offer-card-features--feature-item");
}

@include scss.block-components("offer");
@include scss.block-properties("offer");
}
108 changes: 108 additions & 0 deletions blocks/subscriptions-block/components/Cart/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import React, { useEffect, useState } from "react";
import PropTypes from "@arc-fusion/prop-types";
import { useFusionContext } from "fusion:context";
import getProperties from "fusion:properties";
import { usePhrases, Heading, Link } from "@wpmedia/arc-themes-components";
import useSales from "../useSales";
import currency from "../../utils/currency";
import Item from "./item";

const getPaymentInfo = ({ origin, endpoint, priceCode }) =>
fetch(`${origin}${endpoint}${priceCode}/1/${new Date().getTime()}`, {}).then((res) => res.json());

const Cart = ({ offerURL, className }) => {
const { arcSite } = useFusionContext();
const phrases = usePhrases();

const [isFetching, setIsFetching] = useState(true);
const [cartItems, setCartItems] = useState();

const {
api: {
retail: { origin },
},
} = getProperties(arcSite);

const { Sales } = useSales();

useEffect(() => {
const fetchPaymentInfo = (priceCode) =>
getPaymentInfo({
origin,
endpoint: "/retail/public/v1/pricing/paymentInfo/",
priceCode,
});

const fetchCartItemSummaries = async (cartDetails) => {
const updatedCart = cartDetails;

if (!cartDetails.items) {
return cartDetails;
}

await Promise.all(
cartDetails.items.map((item) =>
fetchPaymentInfo(item.priceCode).then((priceSummary) => ({
...item,
priceSummary,
}))
)
).then((results) => {
updatedCart.items = results;
});

return updatedCart;
};

const getAllCart = async () => {
setCartItems(
await Sales.getCart()
.then(fetchCartItemSummaries)
.catch(() => [])
);
setIsFetching(false);
};

getAllCart();
}, [Sales, origin]);

if (isFetching) {
return null;
}

if (!cartItems?.items || !cartItems?.items.length) {
return (
<div className={`${className}__cart`}>
<Link href={offerURL}>{phrases.t("checkout-block.empty-cart-message")}</Link>
</div>
);
}

return (
<div className={`${className}__cart`}>
<Heading>{phrases.t("checkout-block.order-summary")}</Heading>
<div className={`${className}__cart-items`}>
{cartItems.items.map((itemDetails) => (
<Item
key={itemDetails.sku}
name={itemDetails.name}
description={itemDetails?.priceSummary?.pricingStrategy?.summary}
className={className}
/>
))}
<Item
name={phrases.t("checkout-block.due-today")}
description={`${currency(cartItems.currency)}${cartItems.total}`}
additionalInfo={phrases.t("checkout-block.plus-sales-tax")}
className={className}
/>
</div>
</div>
);
};

Cart.propTypes = {
offerURL: PropTypes.string.isRequired,
};

export default Cart;
Loading