Subscriptions blocks v2

blocks/identity-block/features/signup/default.jsx

@@ -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,
 				}),
 			},
 		},

blocks/identity-block/index.js

@@ -0,0 +1,6 @@
+import useIdentity from "./components/identity";
+
+export {
+	// eslint-disable-next-line import/prefer-default-export
+	useIdentity,
+};

blocks/subscriptions-block/README.md

@@ -0,0 +1 @@
+# `@wpmedia/subscriptions-block`

blocks/subscriptions-block/_index.scss

@@ -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");
+}

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

@@ -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;