ShippingAndBilling

"use client";

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

import st from "./styles.module.scss";
import { Col, Container, Row } from "react-bootstrap";
import { H3, H6, P } from "@/components/TextStyles";
import Image from "@/components/Image";
import { Formik, Form } from "formik";
import Input from "@/components/Fields/Input";
import Select from "@/components/Fields/Select";
import CheckBox from "@/components/Fields/CheckBox";
import Button from "@/components/Button";
import { getCountries } from "@/utils/ordersApi";
import { AuthContext } from "@/providers/AuthContext";
import TextArea from "@/components/Fields/TextArea";

import checkoutValidation from "@/_validations/checkout";
import invoiceValidation from "@/_validations/invoice";
import { getProfile } from "@/utils/authenticationApi";

const ShippingAndBilling = ({
    setShippingValues,
    setInvoiceValues,
    setShippingErrors,
    setInvoiceErrors,
    setShippingDirty,
    setInvoiceDirty,
    checkoutErrors,
    shippingErrors,
    invoiceErrors,
    shippingDirty,
    invoiceDirty,
    setCheckoutStep,
    setNotesValues,
}) => {
    const { context, updateContext } = useContext(AuthContext);
    const setAuthVisible = () => {
        updateContext({ authModal: "login" });
    };

    const [userInfo, setUserInfo] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            if (context.user) {
                const res = await getProfile(context.user.access_token);
                setUserInfo(res.data);
            }
        };
        fetchData();
    }, [context.user]);

    const [countriesList, setCountriesList] = useState([]);
    const payloadFromStorage =
        typeof window !== "undefined" && localStorage.getItem("checkoutPayload")
            ? JSON.parse(localStorage.getItem("checkoutPayload"))
            : null;
    const initalStateShipping = payloadFromStorage
        ? {
              first_name: payloadFromStorage.first_name,
              last_name: payloadFromStorage.last_name,
              email: payloadFromStorage.email,
              country_id: payloadFromStorage.country_id,
              city: payloadFromStorage.city,
              state: payloadFromStorage.state,
              zip: payloadFromStorage.zip,
              address: payloadFromStorage.address,
              phone: payloadFromStorage.phone,
              phone_code: "123",
              city_id: payloadFromStorage.city_id,
          }
        : {
              first_name:
                  userInfo && userInfo.shipping_details ? userInfo.shipping_details.first_name : "",
              last_name:
                  userInfo && userInfo.shipping_details ? userInfo.shipping_details.last_name : "",
              email: userInfo && userInfo.shipping_details ? userInfo.shipping_details.email : "",
              country_id:
                  userInfo && userInfo.shipping_details ? userInfo.shipping_details.country_id : "",
              city: userInfo && userInfo.shipping_details ? userInfo.shipping_details.city : "",
              state: userInfo && userInfo.shipping_details ? userInfo.shipping_details.state : "",
              zip: userInfo && userInfo.shipping_details ? userInfo.shipping_details.zip : "",
              address:
                  userInfo && userInfo.shipping_details ? userInfo.shipping_details.address : "",
              phone:
                  userInfo && userInfo.shipping_details ? userInfo.shipping_details.phone : "+359",
              phone_code: "123",
              city_id: "",
          };

    const initialStateInvoice = payloadFromStorage
        ? {
              company_name: payloadFromStorage?.company_name || "",
              company_vat_number: payloadFromStorage?.company_vat_number || "",
              company_uin_number: payloadFromStorage?.company_uin_number || "",
              company_country_id: payloadFromStorage?.company_country_id || "",
              company_city: payloadFromStorage?.company_city || "",
              company_address: payloadFromStorage?.company_address || "",
              company_manager: payloadFromStorage?.company_manager || "",
              has_invoice: false,
              company_has_vat: payloadFromStorage.company_has_vat
                  ? payloadFromStorage.company_has_vat === 1
                      ? true
                      : false
                  : false,
          }
        : {
              company_name:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_name) ||
                  "",
              company_vat_number:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_vat_number) ||
                  "",
              company_uin_number:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_uin_number) ||
                  "",
              company_country_id:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_country_id) ||
                  "",
              company_city:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_city) ||
                  "",
              company_address:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_address) ||
                  "",
              company_manager:
                  (userInfo &&
                      userInfo.invoice_details &&
                      userInfo.invoice_details?.company_manager) ||
                  "",
              has_invoice: "",
              company_has_vat:
                  userInfo && userInfo?.invoice_details
                      ? userInfo.invoice_details.company_has_vat === 1
                          ? true
                          : false
                      : "",
          };

    const initialStateNotes = payloadFromStorage
        ? {
              note: payloadFromStorage?.note || "",
          }
        : {
              note: "",
          };

    const setShipping = (values, errors, dirty) => {
        setShippingValues(values);
        setShippingErrors(errors);
        setShippingDirty(dirty);
    };

    const setInvoice = (values, errors, dirty) => {
        setInvoiceValues(values);
        setInvoiceErrors(errors);
        setInvoiceDirty(dirty);
    };

    const setNotes = (values) => {
        setNotesValues(values);
    };

    useEffect(() => {
        const fetchData = async () => {
            const res = await getCountries();
            res.data.map((country) => {
                setCountriesList((oldArray) => [
                    ...oldArray,
                    { value: country.id, label: country.name },
                ]);
            });
        };
        fetchData();
    }, []);

    // const updateCountry = (name) => {
    //   setShippingValues((val) => [...val, country: name])
    // }

    return (
        <Container>
            <div className={st.wrapper}>
                <div className={st.item}>
                    <div className={st.titleSection}>
                        <H3>Shipping details</H3>
                        {!context.user && (
                            <div className={st.loginInfo}>
                                <Button underline onClick={() => setAuthVisible()}>
                                    Log in
                                </Button>
                                <P>for faster checkout</P>
                            </div>
                        )}
                        {/* {JSON.stringify(shippingValues, null, 4)} */}
                    </div>
                    <div className={st.formWrapper}>
                        <div className={st.formTitle}>
                            <H6>We’ll ship to this address</H6>
                            <div className={st.deliveryInfo}>
                                <P>Delivery</P>
                                <svg
                                    width='2'
                                    height='26'
                                    viewBox='0 0 2 26'
                                    fill='none'
                                    xmlns='http://www.w3.org/2000/svg'
                                >
                                    <path
                                        d='M1 1L0.999999 25'
                                        stroke='#DEDFE0'
                                        stroke-linecap='round'
                                    />
                                </svg>

                                <Image
                                    src={"/images/checkout/speedy.png"}
                                    className={st.deliveryImage}
                                />
                                <Image
                                    src={"/images/checkout/dhl.png"}
                                    className={st.deliveryImage}
                                />
                            </div>
                        </div>
                        <svg
                            width='100%'
                            height='1'
                            viewBox='0 0 747 1'
                            fill='none'
                            xmlns='http://www.w3.org/2000/svg'
                        >
                            <line y1='0.5' x2='747' y2='0.5' stroke='#EFEFEF' />
                        </svg>

                        <Formik
                            enableReinitialize
                            initialValues={initalStateShipping}
                            validationSchema={checkoutValidation}
                            validateOnMount
                            // onSubmit={onSubmit}
                            innerRef={(formikActions) =>
                                formikActions &&
                                setShipping(
                                    formikActions.values,
                                    formikActions.errors,
                                    formikActions.isValid
                                )
                            }
                        >
                            {({ values }) => (
                                <Form className={st.form}>
                                    {/* {JSON.stringify(values, null, 4)}
                  {JSON.stringify(errors, null, 4)} */}
                                    <Row className={st.row}>
                                        <Col lg={12}>
                                            <Row>
                                                <Col lg={6}>
                                                    <Input
                                                        label='First name'
                                                        name='first_name'
                                                        placeholder='Your first name'
                                                        mb='24px'
                                                    />
                                                </Col>
                                                <Col lg={6}>
                                                    <Input
                                                        label='Last name'
                                                        name='last_name'
                                                        placeholder='Your last name'
                                                        mb='24px'
                                                    />
                                                </Col>
                                            </Row>
                                            <Input
                                                label='Your email'
                                                name='email'
                                                placeholder='example@email.com'
                                                mb='24px'
                                            />
                                            <Row>
                                                <Col lg={7}>
                                                    <Select
                                                        label='Your country'
                                                        name='country_id'
                                                        mb='24px'
                                                        options={countriesList}
                                                    />
                                                </Col>
                                                {values?.country_id === 26 ? (
                                                    <>
                                                        <Col lg={5}>
                                                            <Select
                                                                label='Your city'
                                                                name='city_id'
                                                                mb='24px'
                                                                isSearchable={true}
                                                                apiPath={"cities"}
                                                            />
                                                        </Col>
                                                    </>
                                                ) : (
                                                    <>
                                                        <Col lg={5}>
                                                            <Input
                                                                label='Your city'
                                                                name='city'
                                                                placeholder='City'
                                                                mb='24px'
                                                            />
                                                        </Col>
                                                    </>
                                                )}
                                            </Row>

                                            <Row>
                                                <Col lg={7}>
                                                    {/* <Select
                            label="State / Province"
                            name="state"
                            placeholder="State / Province"
                            mb="24px"
                            options={optionsText}
                          /> */}
                                                    <Input
                                                        label='State / Province'
                                                        name='state'
                                                        placeholder='State / Province'
                                                        mb='24px'
                                                    />
                                                </Col>
                                                <Col lg={5}>
                                                    <Input
                                                        label='Postcode / zip'
                                                        name='zip'
                                                        placeholder='4023'
                                                        mb='24px'
                                                    />
                                                </Col>
                                            </Row>

                                            <Input
                                                label='Address /street,flr,ap/'
                                                name='address'
                                                placeholder='Address'
                                                mb='24px'
                                            />

                                            <Input
                                                label='Your phone number'
                                                name='phone'
                                                placeholder='0899 921 111'
                                                mb='24px'
                                                phone
                                            />
                                        </Col>
                                    </Row>
                                </Form>
                            )}
                        </Formik>
                    </div>
                </div>
                {/* {JSON.stringify(payloadFromStorage, null, 4)}
      {JSON.stringify(initialStateInvoice, null, 4)}
      {JSON.stringify(initialStateNotes, null, 4)} */}
                <div className={st.item}>
                    <div className={st.titleSection}>
                        <H3>Invoice</H3>
                    </div>
                    <div className={st.formWrapper}>
                        {/* {JSON.stringify(invoiceValues, null, 4)} */}
                        <Formik
                            enableReinitialize
                            initialValues={initialStateInvoice}
                            validationSchema={invoiceValidation}
                            validateOnMount
                            // onSubmit={onSubmit}
                            innerRef={(formikActions) =>
                                formikActions &&
                                setInvoice(
                                    formikActions.values,
                                    formikActions.errors,
                                    formikActions.isValid
                                )
                            }
                        >
                            {({ values }) => (
                                <Form className={st.form}>
                                    {/* {JSON.stringify(values, null, 4)}
                  {JSON.stringify(errors, null, 4)} */}
                                    <CheckBox
                                        label='I want an invoice'
                                        name='has_invoice'
                                        textType='h6'
                                    />
                                    {/* {JSON.stringify(errors, null, 4)} */}
                                    {values.has_invoice && (
                                        <>
                                            <svg
                                                width='100%'
                                                height='1'
                                                viewBox='0 0 747 1'
                                                fill='none'
                                                xmlns='http://www.w3.org/2000/svg'
                                                style={{ marginBottom: "24px" }}
                                            >
                                                <line y1='0.5' x2='747' y2='0.5' stroke='#EFEFEF' />
                                            </svg>

                                            <Row className={st.row}>
                                                <Col lg={12}>
                                                    <Input
                                                        label='Your company'
                                                        name='company_name'
                                                        placeholder='Your company name'
                                                        mb='24px'
                                                    />
                                                    <CheckBox
                                                        label='VAT registration'
                                                        name='company_has_vat'
                                                    />
                                                    {values.company_has_vat && (
                                                        <Input
                                                            label='VAT number'
                                                            name='company_vat_number'
                                                            placeholder='VAT registration number'
                                                            mb='24px'
                                                        />
                                                    )}

                                                    <Input
                                                        label='Company registration number'
                                                        name='company_uin_number'
                                                        placeholder='Company registration number'
                                                        mb='24px'
                                                    />

                                                    <Row>
                                                        <Col lg={7}>
                                                            <Select
                                                                label='Your country'
                                                                name='company_country_id'
                                                                mb='24px'
                                                                options={countriesList}
                                                            />
                                                        </Col>
                                                        <Col lg={5}>
                                                            <Input
                                                                label='Your city'
                                                                name='company_city'
                                                                placeholder='City'
                                                                mb='24px'
                                                            />
                                                        </Col>
                                                    </Row>

                                                    <Input
                                                        label='Address'
                                                        name='company_address'
                                                        placeholder='Address'
                                                        mb='24px'
                                                    />

                                                    <Input
                                                        label='Financially responsible person'
                                                        name='company_manager'
                                                        placeholder='Financially responsible person'
                                                        mb='24px'
                                                    />
                                                </Col>
                                            </Row>
                                        </>
                                    )}
                                </Form>
                            )}
                        </Formik>
                    </div>
                </div>

                <div className={st.item}>
                    <div className={st.titleSection}>
                        <H3>Order notes</H3>
                    </div>
                    <div className={st.formWrapper}>
                        {/* {JSON.stringify(invoiceValues, null, 4)} */}
                        <Formik
                            enableReinitialize
                            validateOnMount
                            initialValues={initialStateNotes}
                            innerRef={(formikActions) =>
                                formikActions && setNotes(formikActions.values)
                            }
                        >
                            {() => (
                                <Form className={st.form}>
                                    {/* {JSON.stringify(errors, null, 4)} */}
                                    <Row className={st.row}>
                                        <Col lg={12}>
                                            {/* <Input
                        label="Your company"
                        name="company_name"
                        placeholder="Your company name"
                        mb="24px"
                      /> */}
                                            <TextArea
                                                name='note'
                                                placeholder={"Add your notes here..."}
                                            />
                                        </Col>
                                    </Row>
                                </Form>
                            )}
                        </Formik>
                    </div>
                </div>

                <div className={st.item}>
                    <Button
                        bg
                        size='lg'
                        // onClick={() => submit()}
                        onClick={() => setCheckoutStep(3)}
                        className={st.submitBtn}
                        disabled={
                            Object.keys(checkoutErrors).length !== 0 ||
                            Object.keys(shippingErrors).length !== 0 ||
                            Object.keys(invoiceErrors).length !== 0 ||
                            !shippingDirty ||
                            !invoiceDirty
                        }
                    >
                        Preview and confirm
                    </Button>
                </div>
            </div>
        </Container>
    );
};

export default ShippingAndBilling;