vgrg

import React, { Fragment, useEffect, useState, useRef } from 'react';
import { shape, string } from 'prop-types';
import { FormattedMessage, useIntl } from 'react-intl';
import { AlertCircle as AlertCircleIcon } from 'react-feather';
import { Link } from 'react-router-dom';
import { useWindowSize, useToasts } from '@magento/peregrine';
import {
    CHECKOUT_STEP,
    useCheckoutPage
} from '@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage';
import { useStyle } from '@magento/venia-ui/lib/classify';
import Button from '@magento/venia-ui/lib/components/Button';
import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
import Icon from '@magento/venia-ui/lib/components/Icon';
import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
import StockStatusMessage from '@magento/venia-ui/lib/components/StockStatusMessage';
import AddressBook from './AddressBook';
import GuestSignIn from '@magento/venia-ui/lib/components/CheckoutPage/GuestSignIn';
import OrderSummary from './OrderSummary';
import PaymentInformation from './PaymentInformation';
import payments from './PaymentInformation/paymentMethodCollection';
import PriceAdjustments from '@magento/venia-ui/lib/components/CheckoutPage/PriceAdjustments';
import ShippingMethod from '../CheckoutPage/ShippingMethod';
import ShippingInformation from './ShippingInformation';
import Auth from './Auth';
import OrderConfirmationPage from '@magento/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage';
import ItemsReview from './ItemsReview';

import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';

import defaultClasses from './checkoutPage.module.css';
import ScrollAnchor from '@magento/venia-ui/lib/components/ScrollAnchor/scrollAnchor';

import GiftOptions from './GiftOptions';
import downarrow from './GiftOptions/images/down_arrow.svg';
import Payment from './Payment';
import { gql, useQuery } from '@apollo/client';
import { useSelector } from 'react-redux';
import apiClient from '../../api';
import { useAccountMenu } from '../../talons/Header/useAccountMenu';
import { useUserContext } from '@magento/peregrine/lib/context/user';
import { BrowserPersistence } from '@magento/peregrine/lib/util';

import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';

const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
const storage = new BrowserPersistence();
const CheckoutPage = props => {
    const { classes: propClasses } = props;
    const { formatMessage } = useIntl();
    const talonProps = useCheckoutPage();

    const totalProps = usePriceSummary();

    const {
        flatData
    } = totalProps;

    const {
        total
    } = flatData;

    const [addedInstructions, setaddedInstructions] = useState('');
    const [showInstructions, setShowInstructions] = useState(false);
    const [hideInstructions, setHideInstructions] = useState(true);
    const [signIn, setSignIn] = useState(false);
    const {
        /**
         * Enum, one of:
         * SHIPPING_ADDRESS, SHIPPING_METHOD, PAYMENT, REVIEW
         */
        activeContent,
        availablePaymentMethods,
        cartItems,
        checkoutStep,
        customer,
        error,
        guestSignInUsername,
        handlePlaceOrder,
        hasError,
        isCartEmpty,
        isGuestCheckout,
        isLoading,
        isUpdating,
        orderDetailsData,
        orderDetailsLoading,
        orderNumber,
        placeOrderLoading,
        placeOrderButtonClicked,
        setCheckoutStep,
        setGuestSignInUsername,
        setIsUpdating,
        setShippingInformationDone,
        scrollShippingInformationIntoView,
        setShippingMethodDone,
        scrollShippingMethodIntoView,
        setPaymentInformationDone,
        shippingInformationRef,
        shippingMethodRef,
        resetReviewOrderButtonClicked,
        handleReviewOrder,
        reviewOrderButtonClicked,
        recaptchaWidgetProps,
        toggleAddressBookContent,
        toggleSignInContent
    } = talonProps;
    const isCalledRef = useRef(false);
    const [guestCheckout, setGuestCheckout] = useState(isGuestCheckout);

    const [showGiftOptions, setShowGiftOptions] = useState(false);

    const shippingInfo = JSON.parse(localStorage.getItem('shipping_data'));

    const handleSignIn = () => {
        setSignIn(true);
        setGuestCheckout(false);
        setShowGiftOptions(false);
    }

    const [{ isSignedIn }] = useUserContext();

    const GET_CART_DETAILS = gql` query GetCartDetails($cartId: String!) {
        cart(cart_id: $cartId) {
            id
        items {
                ... on SimpleCartItem {
                  uid
                  id
                    customizable_options {
                        label
                        type
                        values {
                            label
                            value
                            price {
                                value
                            }
                        }
                    }
                }
            }
        }
    }
`;


    const cart = useSelector((state) => state.cart);
    const { cartId } = cart;

    const { data, loading } = useQuery(
        GET_CART_DETAILS,
        {
            fetchPolicy: 'cache-and-network',
            nextFetchPolicy: 'cache-first',
            skip: !cartId,
            variables: {
                cartId: cartId
            }
        }
    );
    const [, { addToast }] = useToasts();

    useEffect(() => {
        if (hasError) {
            const message =
                error && error.message
                    ? error.message
                    : formatMessage({
                        id: 'checkoutPage.errorSubmit',
                        defaultMessage:
                            'Oops! An error occurred while submitting. Please try again.'
                    });
            addToast({
                type: 'error',
                icon: errorIcon,
                message,
                dismissable: true,
                timeout: 7000
            });

            if (process.env.NODE_ENV !== 'production') {
                console.error(error);
            }
        }
    }, [addToast, error, formatMessage, hasError]);

    const classes = useStyle(defaultClasses, propClasses);

    const windowSize = useWindowSize();
    const isMobile = windowSize.innerWidth <= 960;

    const [isExp, setExp] = useState(false);

    let checkoutContent;

    const talonInstructionProps = useAccountMenu({});
    const { currentUser } = talonInstructionProps;

    const getInstructions = async () => {
        try {
            const response = await apiClient.get(apiClient.Urls.getInstructions, {
                quoteId: cartId
            });
            if (response.success) {
                setaddedInstructions(response.data.cart_instructions)
            }
        } catch (error) {
            console.log('error', error);
        }

    };

    const checkoutMeta = () => {
        fbq('track', 'InitiateCheckout', {
            'value': total?.value,
            'currency': total.currency
        });
    }

    const checkoutGoogle = () => {
        gtag('event', 'begin_checkout', {
            'value': total?.value,
            'currency': total.currency
        });
    }

    useEffect(() => {
        getInstructions();
        checkoutMeta();
        checkoutGoogle();
    }, []);

    const handleInputChange = (e) => {
        setaddedInstructions(e.target.value);
    }
    const handleInstructions = () => {
        setShowInstructions(!showInstructions)
        setHideInstructions(true);
    }
    const getAddInstructions = async () => {
        try {
            const response = await apiClient.post(apiClient.Urls.addInstructions, {
                quoteId: cartId,
                instructions: addedInstructions
            });
            if (response.success) {
                setaddedInstructions(response.data.cart_instructions);
                setHideInstructions(!hideInstructions);
            }
        } catch (error) {
            console.log('error', error);
        }

    };



    const heading = isGuestCheckout
        ? formatMessage({
            id: 'checkoutPage.guestCheckout',
            defaultMessage: 'Guest Checkout'
        })
        : formatMessage({
            id: 'checkoutPage.checkout',
            defaultMessage: 'Checkout'
        });

    if (orderNumber && orderDetailsData) {
        return (
            <OrderConfirmationPage
                data={orderDetailsData}
                orderNumber={orderNumber}
            />
        );
    } else if (isLoading) {
        return fullPageLoadingIndicator;
    } else if (isCartEmpty) {
        checkoutContent = (
            <div className={classes.empty_cart_container}>
                <div className={classes.heading_container}>
                    <h1
                        aria-live="polite"
                        className={classes.heading}
                        data-cy="ChekoutPage-heading"
                    >
                        {heading}
                    </h1>
                </div>
                <h3>
                    <FormattedMessage
                        id={'checkoutPage.emptyMessage'}
                        defaultMessage={'There are no items in your cart.'}
                    />
                </h3>
            </div>
        );
    } else {
        const signInContainerVisible =
            isGuestCheckout && checkoutStep !== CHECKOUT_STEP.REVIEW;
        const signInContainerElement = signInContainerVisible ? (
            <div className={classes.signInContainer}>
                <span className={classes.signInLabel}>
                    <FormattedMessage
                        id={'checkoutPage.signInLabel'}
                        defaultMessage={'Sign in for Express Checkout'}
                    />
                </span>
                <Button
                    className={classes.signInButton}
                    data-cy="CheckoutPage-signInButton"
                    onClick={toggleSignInContent}
                    priority="normal"
                >
                    <FormattedMessage
                        id={'checkoutPage.signInButton'}
                        defaultMessage={'Sign In'}
                    />
                </Button>
            </div>
        ) : null;

        const shippingMethodSection =
            checkoutStep >= CHECKOUT_STEP.SHIPPING_METHOD ? (
                <ShippingMethod
                    pageIsUpdating={isUpdating}
                    onSave={setShippingMethodDone}
                    onSuccess={scrollShippingMethodIntoView}
                    setPageIsUpdating={setIsUpdating}
                />
            ) : (
                <h3 className={classes.shipping_method_heading}>
                    <FormattedMessage
                        id={'checkoutPage.shippingMethodStep'}
                        defaultMessage={'2. Shipping Method'}
                    />
                </h3>
            );

        const formErrors = [];
        const paymentMethods = Object.keys(payments);

        // If we have an implementation, or if this is a "zero" checkout,
        // we can allow checkout to proceed.
        const isPaymentAvailable = !!availablePaymentMethods.find(
            ({ code }) => code === 'free' || paymentMethods.includes(code)
        );

        if (!isPaymentAvailable) {
            formErrors.push(
                new Error(
                    formatMessage({
                        id: 'checkoutPage.noPaymentAvailable',
                        defaultMessage: 'Payment is currently unavailable.'
                    })
                )
            );
        }

        const paymentInformationSection =
            checkoutStep >= CHECKOUT_STEP.PAYMENT ? (
                <PaymentInformation
                    onSave={setPaymentInformationDone}
                    checkoutError={error}
                    resetShouldSubmit={resetReviewOrderButtonClicked}
                    setCheckoutStep={setCheckoutStep}
                    shouldSubmit={reviewOrderButtonClicked}
                />
            ) : (
                <h3 className={classes.payment_information_heading}>
                    <FormattedMessage
                        id={'checkoutPage.paymentInformationStep'}
                        defaultMessage={'3. Payment Information'}
                    />
                </h3>
            );

        const priceAdjustmentsSection =
            checkoutStep === CHECKOUT_STEP.PAYMENT ? (
                <div className={classes.price_adjustments_container}>
                    <PriceAdjustments setPageIsUpdating={setIsUpdating} />
                </div>
            ) : null;

        const reviewOrderButton =
            checkoutStep === CHECKOUT_STEP.PAYMENT ? (
                <Button
                    onClick={handleReviewOrder}
                    priority="high"
                    className={classes.review_order_button}
                    data-cy="CheckoutPage-reviewOrderButton"
                    disabled={
                        reviewOrderButtonClicked ||
                        isUpdating ||
                        !isPaymentAvailable
                    }
                >
                    <FormattedMessage
                        id={'checkoutPage.reviewOrder'}
                        defaultMessage={'Review Order'}
                    />
                </Button>
            ) : null;

        const itemsReview =
            checkoutStep === CHECKOUT_STEP.REVIEW ? (
                <div className={classes.items_review_container}>
                    <ItemsReview />
                </div>
            ) : null;

        const placeOrderButton =
            checkoutStep === CHECKOUT_STEP.REVIEW ? (
                <Button
                    onClick={handlePlaceOrder}
                    priority="high"
                    className={classes.place_order_button}
                    data-cy="CheckoutPage-placeOrderButton"
                    disabled={
                        isUpdating ||
                        placeOrderLoading ||
                        orderDetailsLoading ||
                        placeOrderButtonClicked
                    }
                >
                    <FormattedMessage
                        id={'checkoutPage.placeOrder'}
                        defaultMessage={'Place Order'}
                    />
                </Button>
            ) : null;

        // If we're on mobile we should only render price summary in/after review.
        const shouldRenderPriceSummary = !(
            isMobile && checkoutStep < CHECKOUT_STEP.REVIEW
        );

        const orderSummary = shouldRenderPriceSummary ? (
            <div
                className={
                    classes.summaryContainer +
                    (signInContainerVisible
                        ? ' ' + classes.signInContainerVisible
                        : '') +
                    (recaptchaWidgetProps.shouldRender
                        ? ' ' + classes.reCaptchaMargin
                        : '')
                }
            >
                <ItemsReview />
                <OrderSummary isUpdating={isUpdating} />
            </div>
        ) : null;

        // let headerText;

        // if (isGuestCheckout) {
        //     headerText = formatMessage({
        //         id: 'checkoutPage.guestCheckout',
        //         defaultMessage: 'Guest Checkout'
        //     });
        // } else if (customer.default_shipping) {
        //     headerText = formatMessage({
        //         id: 'checkoutPage.reviewAndPlaceOrder',
        //         defaultMessage: 'Review and Place Order'
        //     });
        // } else {
        //     headerText = formatMessage(
        //         {
        //             id: 'checkoutPage.greeting',
        //             defaultMessage: 'Welcome {firstname}!'
        //         },
        //         { firstname: customer.firstname }
        //     );
        // }

        const checkoutContentClass =
            activeContent === 'checkout'
                ? classes.checkoutContent
                : classes.checkoutContent_hidden;

        const stockStatusMessageElement = (
            <Fragment>
                <FormattedMessage
                    id={'checkoutPage.stockStatusMessage'}
                    defaultMessage={
                        'An item in your cart is currently out-of-stock and must be removed in order to Checkout. Please return to your cart to remove the item.'
                    }
                />
                <Link className={classes.cartLink} to={'/cart'}>
                    <FormattedMessage
                        id={'checkoutPage.returnToCart'}
                        defaultMessage={'Return to Cart'}
                    />
                </Link>
            </Fragment>
        );
        checkoutContent = (
            <div className={checkoutContentClass}>
                <div className={classes.heading_container}>
                    {/* <FormError
                        classes={{
                            root: classes.formErrors
                        }}
                        errors={formErrors}
                    /> */}
                    <StockStatusMessage
                        cartItems={cartItems}
                        message={stockStatusMessageElement}
                    />

                </div>
                {signInContainerElement}
                <div className={classes.shipping_information_container}>
                    <ScrollAnchor ref={shippingInformationRef}>
                        <ShippingInformation
                            onSave={setShippingInformationDone}
                            onSuccess={scrollShippingInformationIntoView}
                            toggleActiveContent={toggleAddressBookContent}
                            toggleSignInContent={toggleSignInContent}
                            setGuestSignInUsername={setGuestSignInUsername}
                            cartItems={cartItems}
                            cart={cart}
                            isCalledRef={isCalledRef}
                        />
                    </ScrollAnchor>
                </div>
                <div className={classes.shipping_method_container}>
                    <ScrollAnchor ref={shippingMethodRef}>
                        {shippingMethodSection}
                    </ScrollAnchor>
                </div>
                <div className={classes.payment_information_container}>
                    {paymentInformationSection}
                </div>
                {priceAdjustmentsSection}
                {reviewOrderButton}
                {itemsReview}
                {orderSummary}
                {placeOrderButton}
                <GoogleReCaptcha {...recaptchaWidgetProps} />
            </div>
        );
    }
    const addressBookElement = !isGuestCheckout || isGuestCheckout ?
        <AddressBook
            activeContent={activeContent}
            toggleActiveContent={toggleAddressBookContent}
            onSuccess={scrollShippingInformationIntoView}
            onSave={setShippingInformationDone}
        /> : null;


    const signInElement = isGuestCheckout ? (
        <GuestSignIn
            key={guestSignInUsername}
            isActive={activeContent === 'signIn'}
            toggleActiveContent={toggleSignInContent}
            initialValues={{ email: guestSignInUsername }}
        />
    ) : null;




    const StepTitle = ({ title }) => {
        return (
            <h1 className='text-[#181A1D] text-[18px] font-lato'>{title}</h1>
        )
    }

    const login = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl px-[20px] relative py-[16px]'>
            <StepTitle title={'1. Login'} />
            <Auth setGuestCheckout={setGuestCheckout} setShowGiftOptions={setShowGiftOptions} isGuestCheckout={isGuestCheckout}/>
        </div>
    );

    const giftoptions = (
        <GiftOptions customer={customer} showInstructions={showInstructions} setShowInstructions={setShowInstructions} cartId={cartId} showGiftOptions={showGiftOptions}/>
    );

    const orderDetailsForMobile = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl py-[16px] mt-[20px]'>
            <div className='flex flex-row justify-between cursor-pointer px-[20px]' onClick={() => setExp(!isExp)}>
                <h1 className='text-[#181A1D] text-[18px] font-lato'>{'4. Order details'}</h1>
                <img src={downarrow} />
            </div>
            {isExp ?
                <div className='w-1/3 checkout_page_sub page_checkout'>
                    <ItemsReview />
                    <OrderSummary isUpdating={isUpdating} />
                </div> :
                <div className='flex flex-row justify-between pt-[15px] px-[20px]'>
                    <span className='leading-4'>Order Total</span>
                    {/* <span className='leading-4 font-bold'>{total}</span> */}
                </div>}
        </div>
    )
    const addingInstructions = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl px-[20px] py-[16px] mt-[20px]'>
            <label for='instructions' class="flex flex-row justify-between cursor-pointer"
                onClick={handleInstructions}><h1 class="text-[#181A1D] text-[18px] font-lato">3. Add Instructions</h1>
                {
                    currentUser && currentUser.firstname || showGiftOptions ? <img src={downarrow} /> : null
                }
            </label>

            {showInstructions && <>
                {
                    currentUser && currentUser.firstname || currentUser?.firstname == "" ? <>{
                        hideInstructions ? <div className='mt-3'><textarea id='instructions' name='instructions' class="w-full p-[15px] border-[#F5E7EE] border-[1px] border-solid rounded-[4px] login_field mt-4 mb-2" placeholder='Enter Instructions' onChange={handleInputChange} value={addedInstructions}></textarea>
                            <button className="bg-[#181A1D] w-1/2 py-[12px] text-[#fff] rounded-[4px] text-[12px] tracking-[2.4px] uppercase add_instructions" onClick={getAddInstructions}>Add Instructions</button></div> :
                            <div className='flex justify-between items-center ml-[1rem] mt-2'>
                                <span>Instructions : <span className='text-[#848482]'>{addedInstructions ? addedInstructions : null}</span></span>
                                {/* <button className="bg-[#181A1D] w-[100px] py-[12px] text-[#fff] rounded-[4px] text-[12px] tracking-[2.4px] uppercase" onClick={editInstructions}>Edit</button> */}
                            </div>
                    } </> : null
                }

            </>}

        </div>
    );

    const shippingAddress = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl px-[20px] py-[16px] mt-[20px] relative'>
            <StepTitle title={'4. Shipping Address'} />
            {isSignedIn ?
                <ShippingInformation
                    onSave={setShippingInformationDone}
                    onSuccess={scrollShippingInformationIntoView}
                    toggleActiveContent={toggleAddressBookContent}
                    toggleSignInContent={toggleSignInContent}
                    setGuestSignInUsername={setGuestSignInUsername}
                    cartItems={cartItems}
                    isCalledRef={isCalledRef}
                /> : null}
            <div className='hidden'>
                <ShippingMethod
                    pageIsUpdating={isUpdating}
                    onSave={setShippingMethodDone}
                    onSuccess={scrollShippingMethodIntoView}
                    setPageIsUpdating={setIsUpdating}
                />
            </div>
            {isSignedIn ? addressBookElement : null}
        </div>
    )


    const paymentMethodList = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl px-[20px] py-[16px] mt-[20px]'>
            <StepTitle title={'5. Payment method'} />
            {customer && checkoutStep == 3 ?
                <Payment /> : null}
        </div>
    );

    // Guest checkout

    const ShippingAddress = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl px-[20px] py-[16px] mt-[20px] relative'>
            <StepTitle title={'1. Shipping Address'} />
            {isGuestCheckout ?
                <ShippingInformation
                    onSave={setShippingInformationDone}
                    onSuccess={scrollShippingInformationIntoView}
                    toggleActiveContent={toggleAddressBookContent}
                    toggleSignInContent={toggleSignInContent}
                    setGuestSignInUsername={setGuestSignInUsername}
                    cartId={cartId}
                    setShowGiftOptions={setShowGiftOptions}
                    cartItems={cartItems}
                    cart={cart}
                    isCalledRef={isCalledRef}
                /> : null}
                <div className='hidden'>
                <ShippingMethod
                    pageIsUpdating={isUpdating}
                    onSave={setShippingMethodDone}
                    onSuccess={scrollShippingMethodIntoView}
                    setPageIsUpdating={setIsUpdating}
                    isGuestCheckout={isGuestCheckout}
                    setShowGiftOptions={setShowGiftOptions}
                    showGiftOptions={showGiftOptions}
                />
            </div>
            {isGuestCheckout ? addressBookElement : null}
        </div>
    )

    const paymentInformation = (
        <div className='border-[#F5E7EE] border-2 border-solid bg-[#fff] rounded-xl px-[20px] relative py-[16px] mt-[20px]'>
            <StepTitle title={'4. Payment Information'} />
            {isGuestCheckout && setShippingInformationDone && checkoutStep && checkoutStep == 3 ?
                <Payment shippingInfo={shippingInfo} isGuestCheckout={isGuestCheckout}/> : null}
        </div>
    )

    if (isSignedIn && isCartEmpty) {
        return fullPageLoadingIndicator;
    }

    if (isCartEmpty) {
        return (
            <div className={classes.empty_cart_container}>
                <div class="pl-[15px]">
                    <h1 class="text-[24px] text-[#774E4F] mb-[10px]" style={{ fontFamily: 'ivymode, sans-serif', fontWeight: 500 }}>Checkout</h1>
                </div>
                <h3 class="pl-[15px]">
                    <FormattedMessage
                        id={'checkoutPage.emptyMessage'}
                        defaultMessage={'There are no items in your cart.'}
                    />
                </h3>
            </div>
        );
    }


    return (
        <div data-cy="CheckoutPage-root" className='p-[1rem] checkout_page_root'>
            <StoreTitle>
                {formatMessage({
                    id: 'checkoutPage.titleCheckout',
                    defaultMessage: 'Checkout'
                })}
            </StoreTitle>
            {
                guestCheckout ? (
                    <div className='flex flex-row checkout_page_main'>
                    <div className='w-2/3 pr-[20px] checkout_page_sub'>
                    <main className='border-[#EFE6DB] border-b-2 flex justify-between items-center pb-[10px]'>
                    <div>
                        <h1 className='text-[24px] text-[#181A1D]' style={{
                            fontFamily: 'ivymode, sans-serif',
                            fontWeight: 500,
                        }}>Guest Checkout</h1>
                    </div>
                    <div>
                        <Button
                    className={"font-lato text-[12px] text-[#fff] bg-[#181A1D] py-[10px] px-[2rem] tracking-[2.4px] uppercase mr-4 rounded search_button"}
                    data-cy="CheckoutPage-signInButton"
                    onClick={handleSignIn}
                    priority="normal"
                >
                    <FormattedMessage
                        id={'checkoutPage.signInButton'}
                        defaultMessage={'Sign In'}
                    />
                    </Button>
                    </div>
                    </main>
                    <div className='bg-[#FCFAFB] rounded-xl p-[14px] mt-[10px] secure-checkout'>
                        {ShippingAddress}
                        {giftoptions}
                        {addingInstructions}
                        {paymentInformation}
                    </div>

                </div>
                {isMobile ? null :
                    <div className='w-1/3 checkout_page_sub page_checkout'>
                        <ItemsReview />
                        <OrderSummary isUpdating={isUpdating} />
                    </div>}
            </div>
                ) :
                <>
                {
                    signIn || isSignedIn ? (
                    <div className='flex flex-row checkout_page_main'>
                <div className='w-2/3 pr-[20px] checkout_page_sub'>
                    <div className='border-[#EFE6DB] border-b-2'>
                        <h1 className='text-[24px] text-[#181A1D] mb-[10px]' style={{
                            fontFamily: 'ivymode, sans-serif',
                            fontWeight: 500,
                        }}>Secure checkout</h1>
                    </div>
                    <div className='bg-[#FCFAFB] rounded-xl p-[14px] mt-[10px] secure-checkout'>
                        {login}
                        {giftoptions}
                        {addingInstructions}
                        {shippingAddress}
                        {isMobile ? orderDetailsForMobile : null}
                        {paymentMethodList}
                    </div>

                </div>
                {isMobile ? null :
                    <div className='w-1/3 checkout_page_sub page_checkout'>
                        <ItemsReview />
                        <OrderSummary isUpdating={isUpdating} />
                    </div>}
            </div>
                ) : null
            }
            </>
            }

        </div>
    );
};

export default CheckoutPage;

CheckoutPage.propTypes = {
    classes: shape({
        root: string,
        checkoutContent: string,
        checkoutContent_hidden: string,
        heading_container: string,
        heading: string,
        cartLink: string,
        stepper_heading: string,
        shipping_method_heading: string,
        payment_information_heading: string,
        signInContainer: string,
        signInLabel: string,
        signInButton: string,
        empty_cart_container: string,
        shipping_information_container: string,
        shipping_method_container: string,
        payment_information_container: string,
        price_adjustments_container: string,
        items_review_container: string,
        summaryContainer: string,
        formErrors: string,
        review_order_button: string,
        place_order_button: string,
        signInContainerVisible: string,
        reCaptchaMargin: string
    })
};