ASUB-8301 OrderInformation

[LauraPinilla]

If you have not filled out the checklist below, the pr is not ready for review.

Description

• Update the OfferToProductList component. Every time we add an item to the cart:
  save the offer campaign, in session storage ArcXP_campaignName.
  *** Campaigns are unique, if the offer contains more than a single campaign save the one with the oldest end date, the same offer information will be returned when calling GET /retail/public/v1/offer/live/{campaignName} regardless of the campaign) for any of these campaigns
  ***We need a way to retrieve retail info, e.g. price/product description, product/price features, since those will be rendered into the component

Once the item is added. If the user is anonymous then save the sku & priceCode on the session storage ArcXP_cart. Currently, we don't have a way to transfer carts from anonymous user to logged In user. It is causing an anonymous user to be enforced to add the item into the cart again, once he/she is logged In

• Create an OrderInformation component, it will accept as parameters
  a. orderDetail: cart or order detail
  d. offerURL
  e. showOfferURL (boolean)
  f. showPriceDescription (boolean)
  g. ShowProductFeatures (boolean)

IF we have the orderDetail info render subtotal, tax & total based on the orderDetail. Otherwise render subtotal, tax & total from getCart();
Price description, product attributes/features & offerURL can be shown/hidden based on custom fields.
IF the user click on “View subscription offer“ redirect to offerURL

Jira Ticket

ASUB-8301

Acceptance Criteria

copy from ticket

Test Steps

• Add test steps a reviewer must complete to test this PR

1. Checkout this branch git checkout {ASUB-8301_OrderInformation}
2. Run fusion repo with linked blocks npx fusion start -l @wpmedia/subscriptions-block`
3. component will be rendered inside the checkout component, and we will be using a hook in order to grab the cart or order detail information.
   Make sure you have an item in the cart or IF an order was created, you will need to pass the orderNumber if it's the case

import React, { useEffect, useState } from "react";

import PropTypes from "@arc-fusion/prop-types";
import OrderInformation from "../../components/OrderInformation";
import useOrder from "../../components/useOrder";

const BLOCK_CLASS_NAME = "b-checkout";

const CheckoutV2 = ({ customFields }) => {
    const { offerURL, successURL, loginURL, stripeIntentsID } = customFields;
    const [orderNumber, setOrderNumber] = useState(); //orderNumber will be obtained on Step 2, once the billing address is included.

    const { cartDetails, orderDetails } = useOrder(orderNumber);

    console.log("cart/order")
    console.log(`orderNumber ${orderNumber}`)
    console.log(cartDetails);
    console.log(orderDetails);

    if (orderNumber && orderDetails?.items?.length) {
        return (
            <OrderInformation
                offerURL={offerURL}
                showOfferURL={false}
                showPriceDescription={true}
                showProductFeatures={false}
                orderDetails={orderDetails}
                className={BLOCK_CLASS_NAME}
            />
        );
    } else if (cartDetails?.items?.length) {
        return (
            <OrderInformation
                offerURL={offerURL}
                showOfferURL={true}
                showPriceDescription={false}
                showProductFeatures={true}
                orderDetails={cartDetails}
                className={BLOCK_CLASS_NAME}
            />
        );
    }

    return null;
};

CheckoutV2.propTypes = {
    customFields: PropTypes.shape({
        offerURL: PropTypes.string.tag({
            defaultValue: "/offer/",
            label: "Offer URL",
        }),
        successURL: PropTypes.string.tag({
            defaultValue: "/",
            label: "Success URL",
        }),
        stripeIntentsID: PropTypes.number.tag({
            label: "Stripe Intents - Provider ID",
            description:
                "In case you have multiple payment providers for stripe Intents, It determines what is the provider ID to be used by default.",
        }),
    }),
};

CheckoutV2.label = "Subscriptions Checkout V2 - Arc Block";
CheckoutV2.icon = "shop-cart";

export default CheckoutV2;

Effect Of Changes

Before

Example: When I clicked the search button, the button turned red.

[include screenshot or gif or link to video, storybook would be awesome]

After

Example: When I clicked the search button, the button turned green.

[include screenshot or gif or link to video, storybook would be awesome]

Dependencies or Side Effects

Examples of dependencies or side effects are:

• Manifest pr for new block:
• Feature pack pr for local development:
• How to deploy to news: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3138682964/News+Theme+2.0+Migration+Development+Deployment+Notes
• Additional settings that will be required in the blocks.json
• Changes to the custom fields which will require users to reconfigure features
• Dependency on another PR that needs to be merged first

Author Checklist

The author of the PR should fill out the following sections to ensure this PR is ready for review.

• Confirmed all the test steps a reviewer will follow above are working.
• Confirmed there are no linter errors. Please run npm run lint to check for errors. Often, npm run lint:fix will fix those errors and warnings.
• Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
• Confirmed this PR has reasonable code coverage. You can run npm run test:coverage to see your progress.
  • Confirmed this PR has unit test files
  • Ran npm run test, made sure all tests are passing
  • If the amount of work to write unit tests for this change are excessive,
    please explain why (so that we can fix it whenever it gets refactored).
• Confirmed relevant documentation has been updated/added.

Reviewer Checklist

The reviewer of the PR should copy-paste this template into the review comments on review.

• Linting code actions have passed.
• Ran the code locally based on the test instructions.
  • I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test).
• I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr.
• Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.

[edwardcho1231]

typo liveCampaign

[edwardcho1231]

The ticket says save the offer campaign, in session storage ArcXP_campaignName. Do we want to store in localStorage?

[LauraPinilla]

@edwardcho1231 yes, by default we are using rememberMe true for login or signUp, for this reason, we need to save this info on localStorage. Thus, if the user opens a new page, the info is available

[edwardcho1231]

same as above

[edwardcho1231]

The ticket mentions passing
b. paymentType: ‘stripeIntents’ || ‘paypal’ || undefined
c. campaignName
Do we no longer needs these passed to OrderInformation component?

[edwardcho1231]

By any chance have you checked with Vito on what's the process for ignoring one off linting errors like this?