Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 4x 4x | import React, { FC, useMemo, useState } from 'react';
import { StepComponentProps } from '../../types';
import { Layout } from './Layout';
import { Button, Loading } from 'ag-ems-ui-library';
const styles = require('./Checkout.module.css')
import { useTranslation } from 'react-i18next';
import { BasketCode, BasketProducts, BasketTotal } from '../Basket';
import { useCartContext } from '../../contexts';
import { useQuery } from '@apollo/client';
import { GET_COUNTRIES } from '../../contexts/cartContext/queries';
export const Confirm: FC<StepComponentProps> = ({ setNextStep, setActiveStep }) => {
const { t } = useTranslation();
const { address, positions, selectedPaymentMethod, paymentMethods, createOrder } = useCartContext();
const { data: countriesData } = useQuery(GET_COUNTRIES);
const [preloader, setPreloader] = useState(false);
const countries = useMemo(() => countriesData ? countriesData.countries : [], [countriesData]);
const paymentMethod = useMemo(() => {
return paymentMethods.find(m => m.code === selectedPaymentMethod?.code)?.title ?? '';
}, [selectedPaymentMethod, paymentMethods]);
const selectContactStep = () => {
setActiveStep && setActiveStep(2);
};
const selectPaymentStep = () => {
setActiveStep && setActiveStep(3);
};
const handleCreateOrder = async () => {
setPreloader(true);
const result = await createOrder();
if (setNextStep && !!result.data) setNextStep();
else setPreloader(false);
}
return <Layout classes={styles.Confirm}>
<h1 className={styles.ConfirmTitle}>{t('checkout.confirmOrder')}</h1>
<div className={styles.ConfirmContent}>
{preloader && <Loading color="#007c00" />}
<div className={styles.ConfirmProducts}>
<h2 className={styles.CheckoutSubtitle}>{t('checkout.products')}</h2>
<BasketProducts classes={styles.ConfirmProducts} products={positions} setPreloader={setPreloader} />
</div>
<div className={styles.ConfirmDelivery}>
<h2 className={styles.CheckoutSubtitle}>{t('checkout.billingAddress')}</h2>
{address && <div className={styles.ContactAddress}>
<p>{address.firstname} {address.lastname}</p>
<p>{address.company}</p>
<p>{address.street.join(', ')}</p>
<p>{[address.city, address.region?.label, address.postcode].filter(e => e).join(', ')}</p>
<p>{countries.find(c => c.id === address.country.code)?.full_name_locale}</p>
<p>{address.telephone}</p>
<Button
classes={styles.ContactAddressButton}
value={t('edit')}
sizing="xs"
variant="ghost"
onClick={selectContactStep}
/>
</div>}
</div>
<div className={styles.ConfirmPayment}>
<h2 className={styles.CheckoutSubtitle}>{t('checkout.payment')}</h2>
<p className="no-margin">{paymentMethod}</p>
<Button
classes={styles.ContactAddressButton}
value={t('edit')}
sizing="xs"
variant="ghost"
onClick={selectPaymentStep}
/>
</div>
<div className={styles.ConfirmTotal}>
{/* <h2 className={`${styles.CheckoutSubtitle} no-sm`}>{t('cart.totalSum')}</h2> */}
<BasketTotal classes={styles.ConfirmSum} button={{ text: t('checkout.buyNow'), onClick: handleCreateOrder }} />
</div>
<div className={styles.ConfirmCode}>
<h2 className={styles.CheckoutSubtitle}>{t('checkout.promocode')}</h2>
<BasketCode classes={styles.ConfirmCodeContent} />
</div>
</div>
</Layout>;
}; |