tabexseriescomponents 0.0.217 → 0.0.220

package/srcold/TabexComponents/StaticPages/Checkout/Checkout.jsx

@@ -0,0 +1,1280 @@
+import React, { useEffect, useState, useContext } from 'react';
+import formstyles from '../../../styles/general/form.module.css';
+import TextareaAutosize from 'react-textarea-autosize';
+import generalstyles from '../../../styles/general/general.module.css';
+import { CircularProgress, Messaging } from 'react-cssfx-loading';
+import { css } from 'glamor';
+import { defaultstyles, defaultstylestranslated } from '../../../StylesJS/Customstyles';
+import { IKImage } from 'imagekitio-react';
+import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
+import { HiUser } from '@react-icons/all-files/hi/HiUser';
+import { GrMail } from '@react-icons/all-files/gr/GrMail';
+import { FiCheckCircle } from '@react-icons/all-files/fi/FiCheckCircle';
+import { BiPhone } from '@react-icons/all-files/bi/BiPhone';
+
+const Select = React.lazy(() => import('react-select'));
+
+const Checkout = (props) => {
+    const [timer, settimer] = useState(null);
+    const langdetect = props.actions.langdetect;
+    const lang = props.actions.lang;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const routingcountext = props.actions.routingcountext;
+    const ApplyPromoCodeMutationContext = props.actions.ApplyPromoCodeMutationContext;
+    const CurrentSrcTypeContext = props.actions.CurrentSrcTypeContext;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
+    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
+    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
+    const fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
+    const fetchTabexStatesQueryContext = props.actions.fetchTabexStatesQueryContext;
+    const FetchTabexStatesPayloadobjContext = props.actions.FetchTabexStatesPayloadobjContext;
+    const setFetchTabexStatesPayloadobjContext = props.actions.setFetchTabexStatesPayloadobjContext;
+    const ChooseState_CountryMutationContext = props.actions.ChooseState_CountryMutationContext;
+    const fetchTabexCitiesQueryContext = props.actions.fetchTabexCitiesQueryContext;
+    const AddOrderMutationContext = props.actions.AddOrderMutationContext;
+    const fetchAuthorizationQueryContext = props.actions.fetchAuthorizationQueryContext;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const queryClient = props.actions.queryClient;
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [CurrentPageId, setCurrentPageId] = useState('');
+
+    useEffect(() => {
+        var cartindex = templatepropcontext?.pagesnprop?.findIndex((x) => x.staticpageid == '6218bccb82af8');
+        if (cartindex >= 0) {
+            setCurrentPageId(cartindex);
+        }
+    }, []);
+    useEffect(() => {
+        // var secpropobj = {};
+        // templatepropcontext?.pagesnprop[CurrentPageId]?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+        //     secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+        // });
+        // setsectionproperties({ ...secpropobj });
+    }, [CurrentPageId, props.actions.templatepropcontext]);
+    useEffect(() => {
+        // if (rops?.actions?.StatePagePropertiesContext != null && rops?.actions?.StatePagePropertiesContext != undefined && StatePagePropertiesContext.length != 0) {
+        var secpropobj = {};
+        props?.actions?.StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+            secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+        });
+        setsectionproperties({ ...secpropobj });
+        // }
+    }, [props.actions.StatePagePropertiesContext]);
+
+    useEffect(() => {
+        var Canorder = false;
+        if (authdetailsContext != undefined && authdetailsContext.instinfo != undefined && authdetailsContext.instinfo.cancustomerguestorder != undefined) {
+            if (authdetailsContext.loggedin == true) {
+                Canorder = true;
+            } else {
+                if (authdetailsContext?.instinfo?.cancustomerguestorder == 1) {
+                    Canorder = true;
+                }
+            }
+            if (Canorder == true) {
+                var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
+                tempFetchQueriesEngineContext.fetchtabexcountries = true;
+                setFetchQueriesEngineContext({ ...tempFetchQueriesEngineContext });
+                var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                if (
+                    // Aya
+                    !fetchcustomercartQueryContext.isFetching &&
+                    fetchcustomercartQueryContext.isSuccess &&
+                    fetchcustomercartQueryContext?.data?.data?.customercart != undefined &&
+                    fetchcustomercartQueryContext?.data?.data?.customercart.countryid != null &&
+                    // End
+                    fetchcustomercartQueryContext?.data?.data?.customercart.countryid.length != 0
+                ) {
+                    tempFetchTabexStatesPayloadobjContext.country_id = fetchcustomercartQueryContext?.data?.data?.customercart.countryid;
+                }
+                if (
+                    // aya
+                    !fetchcustomercartQueryContext.isFetching &&
+                    fetchcustomercartQueryContext.isSuccess &&
+                    fetchcustomercartQueryContext?.data?.data?.customercart != undefined &&
+                    fetchcustomercartQueryContext?.data?.data?.customercart.stateid != null &&
+                    // end
+                    fetchcustomercartQueryContext?.data?.data?.customercart.stateid.length != 0
+                ) {
+                    tempFetchTabexStatesPayloadobjContext.state_id = fetchcustomercartQueryContext?.data?.data?.customercart.stateid;
+                }
+                setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+            } else {
+                NotificationManager.warning('', lang.pleaselogintocheckout);
+                routingcountext(StaticPagesLinksContext.Login);
+            }
+        }
+    }, [authdetailsContext]);
+
+    const cartinfoupdater = (key, value) => {
+        var cartarr = queryClient.getQueryData('fetchcustomercart_API');
+        cartarr.data.customercart[key] = value;
+        queryClient.setQueryData('fetchcustomercart_API', cartarr);
+        var payloadobj = {
+            stateid: fetchcustomercartQueryContext?.data?.data?.customercart.stateid,
+            countryid: fetchcustomercartQueryContext?.data?.data?.customercart.countryid,
+            cityid: fetchcustomercartQueryContext?.data?.data?.customercart.cityid,
+            address: fetchcustomercartQueryContext?.data?.data?.customercart.address,
+            paymentmethod: fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod,
+            name: fetchcustomercartQueryContext?.data?.data?.customercart.name,
+            email: fetchcustomercartQueryContext?.data?.data?.customercart.email,
+            mobile: fetchcustomercartQueryContext?.data?.data?.customercart.mobile,
+            notes: fetchcustomercartQueryContext?.data?.data?.customercart.notes,
+        };
+        if (key == 'address' || key == 'name' || key == 'mobile' || key == 'email' || key == 'notes') {
+            clearTimeout(timer);
+            settimer(
+                setTimeout(() => {
+                    ChooseState_CountryMutationContext.mutate(payloadobj);
+                }, 1500),
+            );
+        } else {
+            ChooseState_CountryMutationContext.mutate(payloadobj);
+        }
+    };
+
+    const checkoutstyles = {
+        Salepricestyless: css({
+            fontSize: sectionproperties.prodsalepriceFontSize + 'px',
+            fontWeight: sectionproperties.prodsalePriceFontWeight,
+            color: sectionproperties.prodsalePriceColor,
+            show: sectionproperties.prodsalePriceshow,
+            transition: '.3s',
+        }),
+        userinfo_iconcont: css({
+            width: sectionproperties.userinfo_iconwidth + 'px',
+            height: sectionproperties.userinfo_iconheight + 'px',
+            background: sectionproperties.userinfo_iconbg,
+            borderRadius: sectionproperties.userinfo_iconborderbottomleftradius + 'px',
+            color: sectionproperties.userinfo_iconcolor,
+        }),
+        userinfotextstyles: css({
+            color: sectionproperties.userinfo_color,
+            fontWeight: sectionproperties.userinfo_fontweight,
+            fontSize: sectionproperties.userinfo_fontsize + 'px',
+        }),
+        input_label_name: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+        }),
+        checkbox: css({
+            color: sectionproperties.checkbox_color,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.checkbox_texthovercolor,
+            },
+            'input:checked': {
+                color: sectionproperties.checkbox_checkedcolor,
+            },
+        }),
+        checkboxinputstyles: css({
+            ':hover:not(:checked)': {
+                boxShadow: 'inset 0 0 0 2px ' + sectionproperties.checkbox_texthovercolor,
+            },
+            ':checked': {
+                boxShadow: 'inset 0 0 0 2px ' + sectionproperties.checkbox_checkedcolor,
+            },
+        }),
+        svgstyles: css({
+            stroke: 'var(--stroke, ' + sectionproperties.checkbox_checkedcolor + ')',
+        }),
+
+        innersectiontitlestyles: css({
+            color: sectionproperties.innersection_titlecolor,
+            fontSize: sectionproperties.innersection_titlefontsize + 'px',
+            fontWeight: sectionproperties.innersection_titlefontweight,
+            textTransform: sectionproperties.innersection_titletextTransform,
+        }),
+        summarysectionstyles: css({
+            fontSize: sectionproperties.summary_fontsize + 'px',
+            color: sectionproperties.summary_textcolor,
+            fontWeight: sectionproperties.summary_textfontweight,
+            textTransform: sectionproperties.summary_texttransform,
+            textAlign: langdetect == 'en' ? 'left' : 'right',
+        }),
+
+        checkoutbtnstyles: css({
+            background: sectionproperties.checkoutBtnbgColor,
+            width: sectionproperties.checkoutBtnWidth,
+            height: sectionproperties.checkoutBtnHeight,
+            borderRadius: sectionproperties.checkout_borderBottomLeftRadius + 'px',
+            color: sectionproperties.checkoutBtnTextcolor,
+            textTransform: sectionproperties.checkoutBtnTexttransform,
+            fontWeight: sectionproperties.checkoutBtnTextfontweight,
+            fontSize: sectionproperties.checkoutBtnTextfontsize + 'px',
+            border: sectionproperties.checkoutBtn_borderwidth + 'px solid ' + sectionproperties.checkoutBtn_bordercolor,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.checkoutBtnbgColoronhover_tranparent == 'Transparent' ? 'transparent' : sectionproperties.checkoutBtnbgColoronhover,
+                color: sectionproperties.checkoutBtnTextcoloronhover,
+            },
+        }),
+        productNameStyles: css({
+            color: sectionproperties.prodNameColor,
+            fontSize: sectionproperties.prodNameFontSize + 'px',
+            textTransform: sectionproperties.prodNameTextTranform,
+            fontWeight: sectionproperties.prodNameFontWeight,
+        }),
+        productPricestyles: css({
+            color: sectionproperties.prodPriceColor,
+            fontSize: sectionproperties.prodpriceFontSize + 'px',
+            fontWeight: sectionproperties.prodPriceFontWeight,
+        }),
+        productSalePricestyles: css({
+            color: sectionproperties.prodsalePriceColor,
+            fontSize: sectionproperties.prodsalepriceFontSize + 'px',
+            fontWeight: sectionproperties.prodsalePriceFontWeight,
+        }),
+        imagecont: css({
+            width: '8vh',
+            height: '8vh',
+            border: sectionproperties.prodimage_borderwidth + 'px solid ' + sectionproperties.prodimage_color,
+            backgroundColor: sectionproperties.prodimage_bgcolor,
+            borderBottomLeftRadius: sectionproperties.prodimage__borderBottomLeftRadius + 'px',
+            borderBottomRightRadius: sectionproperties.prodimage__borderBottomRightRadius + 'px',
+            borderTopLeftRadius: sectionproperties.prodimage__borderTopLeftRadius + 'px',
+            borderTopRightRadius: sectionproperties.prodimage__borderTopRightRadius + 'px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            position: 'relative',
+        }),
+        applybtnstyles: css({
+            width: sectionproperties.applybtn_width + 'px',
+            height: sectionproperties.applybtn_height + 'px',
+            borderRadius: sectionproperties.applybtn_borderBottomLeftRadius + 'px',
+            textTransform: sectionproperties.applybtn_texttransform,
+            fontSize: sectionproperties.applybtn_fontsize + 'px',
+            color: sectionproperties.applybtn_textColor,
+            fontWeight: sectionproperties.applybtn_Textfontweight,
+            background: sectionproperties.applybtn_bgColor,
+            border: sectionproperties.applybtnborderwidth + 'px solid ' + sectionproperties.applybtnbordercolor,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.applybtn_bgColoronhover,
+                color: sectionproperties.applybtn_Textcoloronhover,
+            },
+        }),
+        inputfiledstyles: css({}),
+        checkorderbtnstyles: css({
+            background: sectionproperties.generalbtn_bgColor,
+            width: sectionproperties.generalbtn_width,
+            height: sectionproperties.generalbtn_height,
+            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+            color: sectionproperties.generalbtn_textColor,
+            textTransform: sectionproperties.generalbtn_texttransform,
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        input_label_name: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+        }),
+    };
+
+    const Mycart = () => {
+        return (
+            <div className="row  m-0 w-100">
+                <div className="col-lg-12 d-flex align-items-center p-0">
+                    <p
+                        style={{
+                            fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                            color: sectionproperties.sectionTitleColor,
+                            marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                            marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                            textTransform: sectionproperties.sectionTitleTextTransform,
+                            fontWeight: sectionproperties.sectionTitleFontWeight,
+                        }}
+                    >
+                        {lang.mycart}
+                    </p>
+                </div>
+                {ChooseState_CountryMutationContext.isLoading && (
+                    <div className="col-lg-12 allcentered p-0">
+                        <Messaging color="#000" width="10px" height="10px" duration="1s" />
+                    </div>
+                )}
+                {!ChooseState_CountryMutationContext.isLoading && (
+                    <div className="row m-0 w-100">
+                        <div className="col-lg-12 p-0">
+                            {fetchcustomercartQueryContext?.data?.data?.customercart.cartitems.map((item, index) => {
+                                return (
+                                    <div
+                                        className={langdetect == 'en' ? 'col-lg-12 col-md-12 col-sm-12 pt-3 pb-3 pl-2 pr-0 mb-3' : 'col-lg-12 col-md-12 col-sm-12 pt-3 pb-3 pr-2 pl-0 mb-3'}
+                                        style={{
+                                            background: sectionproperties.summary_sectionbgcolor,
+                                            borderRadius: sectionproperties.summary_sectionborderbottomleftradius + 'px',
+                                            border: sectionproperties.summary_sectionborderwidth + 'px solid ' + sectionproperties.summary_sectionbordercolor,
+                                        }}
+                                    >
+                                        <div className="row m-0 w-100 d-flex">
+                                            <div className={`${checkoutstyles.imagecont}`}>
+                                                <IKImage
+                                                    urlEndpoint={IKurlEndpoint}
+                                                    publicKey={IKpublicKey}
+                                                    path={
+                                                        item.productinfo.hasvariants == 0
+                                                            ? '/tr:w-300,h-300/' + item.productinfo.productmainimage
+                                                            : '/tr:w-300,h-300/' + item.productinfo.variantinfo.variantimageurl
+                                                    }
+                                                    style={{
+                                                        width: '100%',
+                                                        height: '100%',
+                                                        objectFit: 'cover',
+                                                    }}
+                                                    loading="lazy"
+                                                />
+                                            </div>
+                                            <div className="col-lg-7 col-md-7 col-sm-7">
+                                                <div className="row m-0 w-100">
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 p-0">
+                                                        <p className={`${checkoutstyles.productNameStyles}` + ' m-0 p-0 d-flex justify-content-start '}>
+                                                            {langdetect == 'en' ? item.productinfo.name_en : item.productinfo.name_ar}
+                                                        </p>
+                                                    </div>
+                                                    <div className="col-lg-12 p-0">
+                                                        <p className="m-0 p-0 font-weight-500 text-light d-flex justify-content-start">
+                                                            {lang.qty}: {item.quantity}
+                                                        </p>
+                                                    </div>
+                                                    {item.productinfo.hasvariants == 1 &&
+                                                        item.productinfo.variantinfo.variantoptions.map((variantitem, variantindex) => {
+                                                            return (
+                                                                <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex">
+                                                                    <p className={'text-capitalize text-dark m-0 p-0 font-weight-500 font-13 m-0 p-0 '}>{variantitem.optionname}:</p>
+                                                                    <p className={' text-capitalize text-dark font-weight-500 m-0 p-0 ml-1 mr-1 '}>{variantitem.optionvalue}</p>
+                                                                </div>
+                                                            );
+                                                        })}
+                                                </div>
+                                            </div>
+                                            <div className="col-lg-3 col-md-3 col-sm-2 p-0">
+                                                <div className="row m-0 w-100 h-100">
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex align-items-center justify-content-end mb-auto">
+                                                        {item.productinfo.hasvariants == 0 && (
+                                                            <div className="row m-0 w-100 d-flex flex-column justify-content-end">
+                                                                {item.productinfo.hassale == 0 && (
+                                                                    <div className="col-lg-12 p-0 d-flex justify-content-end">
+                                                                        <p
+                                                                            className={
+                                                                                langdetect == 'en'
+                                                                                    ? `${checkoutstyles.productPricestyles}` + ' m-0 p-0 wordbreak text-right '
+                                                                                    : `${checkoutstyles.productPricestyles}` + ' m-0 p-0 wordbreak text-left '
+                                                                            }
+                                                                        >
+                                                                            {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {item.productinfo.defaultprice}{' '}
+                                                                            {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                                        </p>
+                                                                    </div>
+                                                                )}
+                                                                {item.productinfo.hassale == 1 && (
+                                                                    <div className="row m-0 w-100 d-flex flex-column justify-content-end">
+                                                                        <div className="col-lg-12 p-0 d-flex justify-content-end">
+                                                                            <p
+                                                                                className={
+                                                                                    langdetect == 'en'
+                                                                                        ? `${checkoutstyles.productPricestyles}` + ' m-0 p-0 wordbreak text-right '
+                                                                                        : `${checkoutstyles.productPricestyles}` + ' m-0 p-0 wordbreak text-left '
+                                                                                }
+                                                                            >
+                                                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {item.productinfo.defaultsaleprice}{' '}
+                                                                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                                            </p>
+                                                                        </div>
+                                                                        <div className="col-lg-12 p-0 d-flex justify-content-end">
+                                                                            <p
+                                                                                className={
+                                                                                    langdetect == 'en'
+                                                                                        ? `${checkoutstyles.Salepricestyless}` + ' linethrough mb-0 p-0 wordbreak text-right '
+                                                                                        : `${checkoutstyles.Salepricestyless}` + ' linethrough mb-0 p-0 wordbreak text-left '
+                                                                                }
+                                                                            >
+                                                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {item.productinfo.defaultprice}{' '}
+                                                                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                                            </p>
+                                                                        </div>
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        )}
+                                                        {item.productinfo.hasvariants == 1 && (
+                                                            <div className="row m-0 w-100 d-flex flex-column justify-content-end">
+                                                                {item.productinfo.variantinfo.hassale == 0 && (
+                                                                    <div className="col-lg-12 p-0 d-flex justify-content-end">
+                                                                        <p
+                                                                            className={
+                                                                                langdetect == 'en'
+                                                                                    ? `${checkoutstyles.productPricestyles}` + ' m-0 p-0 wordbreak text-right '
+                                                                                    : `${checkoutstyles.productPricestyles}` + ' m-0 p-0 wordbreak text-left '
+                                                                            }
+                                                                        >
+                                                                            {langdetect == 'en' ? authdetailsContext?.currencyname_en : authdetailsContext?.currencyname_ar}{' '}
+                                                                            {item.productinfo.variantinfo.variantprice}
+                                                                        </p>
+                                                                    </div>
+                                                                )}
+                                                                {item.productinfo.variantinfo.hassale == 1 && (
+                                                                    <div className="row m-0 w-100 d-flex flex-column justify-content-end">
+                                                                        <div className="col-lg-12 p-0 d-flex justify-content-end">
+                                                                            <p
+                                                                                className={
+                                                                                    langdetect == 'en'
+                                                                                        ? `${checkoutstyles.productPricestyles}` +
+                                                                                          ' m-0 p-0 wordbreak d-flex align-items-center justify-content-end text-right '
+                                                                                        : `${checkoutstyles.productPricestyles}` +
+                                                                                          ' m-0 p-0 wordbreak d-flex align-items-center justify-content-end text-left '
+                                                                                }
+                                                                            >
+                                                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {item.productinfo.variantinfo.variantsaleprice}
+                                                                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                                            </p>
+                                                                        </div>
+                                                                        <div className="col-lg-12 p-0 d-flex justify-content-end">
+                                                                            <p
+                                                                                className={
+                                                                                    langdetect == 'en'
+                                                                                        ? `${checkoutstyles.Salepricestyless}` +
+                                                                                          ' linethrough mb-0 p-0 wordbreak d-flex align-items-center justify-content-end text-right '
+                                                                                        : `${checkoutstyles.Salepricestyless}` +
+                                                                                          ' linethrough mb-0 p-0 wordbreak d-flex align-items-center justify-content-end text-left '
+                                                                                }
+                                                                            >
+                                                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {item.productinfo.variantinfo.variantprice}{' '}
+                                                                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                                            </p>
+                                                                        </div>
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                            <div
+                                className={' row m-0 w-100 p-3'}
+                                style={{
+                                    background: sectionproperties.summary_sectionbgcolor,
+                                    borderRadius: sectionproperties.summary_sectionborderradius + 'px',
+                                    border: sectionproperties.summary_sectionborderwidth + 'px solid ' + sectionproperties.summary_sectionbordercolor,
+                                }}
+                            >
+                                <div className="col-lg-12 p-0 mb-1">
+                                    <div className="col-lg-12 p-0 mb-4">
+                                        <label className={`${checkoutstyles.input_label_name}` + ' m-0 p-0 mb-2 d-flex justify-content-start '}>{lang.doyouhavepromocode}</label>
+                                        <div className={' row m-0 w-100 d-flex justify-content-center align-items-center '}>
+                                            <div className={'col-lg-12 col-md-12 col-sm-12 p-0 mb-3'}>
+                                                <input
+                                                    type="text"
+                                                    className={`${formstyles.form_control}`}
+                                                    style={{
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        backgroundColor: sectionproperties.input_bgcolor,
+                                                    }}
+                                                    placeholder={lang.giftcarddicountcode}
+                                                    value={fetchcustomercartQueryContext?.data?.data?.customercart.couponname}
+                                                    onChange={(event) => {
+                                                        var cartarr = queryClient.getQueryData('fetchcustomercart_API');
+                                                        cartarr.data.customercart.couponname = event.target.value;
+                                                        queryClient.setQueryData('fetchcustomercart_API', cartarr);
+                                                    }}
+                                                    disabled={fetchcustomercartQueryContext?.data?.data?.customercart.couponexists ? true : false}
+                                                />
+                                            </div>
+                                            <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+                                                <button
+                                                    className={` ${checkoutstyles.applybtnstyles}`}
+                                                    onClick={() => {
+                                                        if (!fetchcustomercartQueryContext?.data?.data?.customercart.couponexists) {
+                                                            var payloadobj = {
+                                                                couponname: fetchcustomercartQueryContext?.data?.data?.customercart.couponname,
+                                                                functype: 'add',
+                                                            };
+                                                            if (fetchcustomercartQueryContext?.data?.data?.customercart.couponname.length != 0) {
+                                                                ApplyPromoCodeMutationContext.mutate(payloadobj);
+                                                            } else {
+                                                                NotificationManager.warning('', 'Please Type Promo Code');
+                                                            }
+                                                        } else {
+                                                            var payloadobj = {
+                                                                functype: 'delete',
+                                                            };
+                                                            ApplyPromoCodeMutationContext.mutate(payloadobj);
+                                                        }
+                                                    }}
+                                                    disabled={ApplyPromoCodeMutationContext.isLoading ? true : false}
+                                                >
+                                                    <span className={ApplyPromoCodeMutationContext.isLoading ? `${generalstyles.fadeOutButton}` : `${generalstyles.fadeInButton}`}>
+                                                        {fetchcustomercartQueryContext?.data?.data?.customercart.couponexists
+                                                            ? langdetect == 'en'
+                                                                ? 'Remove'
+                                                                : 'حذف'
+                                                            : langdetect == 'en'
+                                                            ? 'Apply'
+                                                            : 'تطبيق'}
+                                                    </span>
+                                                    <div
+                                                        className={
+                                                            ApplyPromoCodeMutationContext.isLoading
+                                                                ? `${generalstyles.fadeInButton} ${generalstyles.btn_preloader}` + ' d-flex align-items-center justify-content-center '
+                                                                : `${generalstyles.fadeOutButton}` + ' align-items-center justify-content-center '
+                                                        }
+                                                    >
+                                                        <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />
+                                                    </div>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="row m-0 w-100">
+                                        <div className="col-lg-6 col-md-6 col-sm-6 p-0">
+                                            <p className={`${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 d-flex align-items-center wordbreak '}>{lang.subtotal}</p>
+                                        </div>
+                                        <div className="col-lg-6 col-md-6 col-sm-6 d-flex justify-content-end p-0">
+                                            <p
+                                                className={
+                                                    langdetect == 'en'
+                                                        ? `${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 wordbreak text-right '
+                                                        : `${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 wordbreak text-left '
+                                                }
+                                            >
+                                                {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {fetchcustomercartQueryContext?.data?.data?.customercart.totalprice}{' '}
+                                                {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                {fetchcustomercartQueryContext?.data?.data?.customercart.couponexists && fetchcustomercartQueryContext?.data?.data?.customercart.discountprice != 0 && (
+                                    <div className="col-lg-12 p-0 mb-1">
+                                        <div className="row m-0 w-100">
+                                            <div className="col-lg-6 col-md-6 col-sm-6 p-0">
+                                                <p className={`${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 text-danger d-flex align-items-start wordbreak '}>{lang.discount}</p>
+                                            </div>
+
+                                            <div className="col-lg-6 col-md-6 col-sm-6 d-flex justify-content-end p-0">
+                                                <p
+                                                    className={
+                                                        langdetect == 'en'
+                                                            ? `${checkoutstyles.summarysectionstyles} ` + ' m-0 p-0 text-danger wordbreak text-right '
+                                                            : `${checkoutstyles.summarysectionstyles} ` + ' m-0 p-0 text-danger wordbreak text-left '
+                                                    }
+                                                >
+                                                    {fetchcustomercartQueryContext?.data?.data?.customercart.discountprice != 0 && (
+                                                        <span>
+                                                            - {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {fetchcustomercartQueryContext?.data?.data?.customercart.discountprice}{' '}
+                                                            {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                        </span>
+                                                    )}
+                                                    {fetchcustomercartQueryContext?.data?.data?.customercart.discountprice == 0 && <span>0</span>}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                                <div className="col-lg-12 p-0">
+                                    <div className="row m-0 w-100">
+                                        <div className="col-lg-6 col-md-6 col-sm-6 p-0">
+                                            <p className={`${checkoutstyles.summarysectionstyles} ` + ' m-0 p-0 d-flex align-items-start wordbreak '}>{lang.shippingfees}</p>
+                                        </div>
+                                        {fetchcustomercartQueryContext?.data?.data?.customercart.zoneexists && (
+                                            <div className="col-lg-6 col-md-6 col-sm-6 d-flex justify-content-end p-0">
+                                                <p
+                                                    className={
+                                                        langdetect == 'en'
+                                                            ? `${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 wordbreak text-right '
+                                                            : `${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 wordbreak text-left '
+                                                    }
+                                                >
+                                                    {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''} {fetchcustomercartQueryContext?.data?.data?.customercart.zoneprice}{' '}
+                                                    {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                </p>
+                                            </div>
+                                        )}
+                                        {!fetchcustomercartQueryContext?.data?.data?.customercart.zoneexists && (
+                                            <div className="col-lg-6 col-md-6 col-sm-6 d-flex justify-content-end p-0">
+                                                <p className={`${checkoutstyles.summarysectionstyles}` + ' m-0 p-0 d-flex align-items-start wordbreak '} style={{ color: 'red' }}>
+                                                    {lang.outofzone}
+                                                </p>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className="col-lg-12 p-0">
+                                    <hr className="mt-2 mb-2" />
+                                </div>
+                                <div className="col-lg-12 p-0">
+                                    <div className="row m-0 w-100">
+                                        <div className="col-lg-6 col-md-6 col-sm-6 p-0">
+                                            <p
+                                                className="d-flex align-items-start"
+                                                style={{
+                                                    fontSize: sectionproperties.total_fontsize + 'px',
+                                                    fontWeight: sectionproperties.total_fontweight,
+                                                    textTransform: sectionproperties.total_texttransform,
+                                                    color: sectionproperties.total_color,
+                                                }}
+                                            >
+                                                {lang.total}
+                                            </p>
+                                        </div>
+                                        <div className="col-lg-6 col-md-6 col-sm-6 p-0">
+                                            <div className="row m-0 w-100">
+                                                <div className="col-lg-12 p-0 d-flex justify-content-end ">
+                                                    <p
+                                                        className={langdetect == 'en' ? ' wordbreak text-right ' : 'wordbreak text-left '}
+                                                        style={{
+                                                            fontSize: sectionproperties.total_fontsize + 'px',
+                                                            fontWeight: sectionproperties.total_fontweight,
+                                                            textTransform: sectionproperties.total_texttransform,
+                                                            color: sectionproperties.total_color,
+                                                        }}
+                                                    >
+                                                        {langdetect == 'en' ? authdetailsContext?.currencyname_en : ''}{' '}
+                                                        {fetchcustomercartQueryContext?.data?.data?.customercart.totalpriceafterdiscount}{' '}
+                                                        {langdetect == 'en' ? '' : authdetailsContext?.currencyname_ar}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="col-lg-12 d-flex align-items-center justify-content-center mb-2 mt-sm-3">
+                                    <button
+                                        className={` ${checkoutstyles.checkoutbtnstyles}` + ' d-flex align-items-center justify-content-center '}
+                                        onClick={() => {
+                                            var payloadobj = {};
+                                            AddOrderMutationContext.mutate(payloadobj);
+                                        }}
+                                        disabled={AddOrderMutationContext.isLoading ? true : false}
+                                    >
+                                        {AddOrderMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+                                        {!AddOrderMutationContext.isLoading
+                                            ? fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod == 'onlinepayment'
+                                                ? lang.continuetopayment
+                                                : authdetailsContext.loggedin
+                                                ? lang.confirmorder
+                                                : lang.confirmorder + ' ' + lang.asaguest
+                                            : ''}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+    return (
+        <div className={'row m-0 w-100 mb-3 d-flex justify-content-center p-sm-0 mt-sm-3'}>
+            <div
+                className={'col-lg-12 w-100 d-flex justify-content-center pl-md-3 pr-md-3 pl-sm-2 pr-sm-2'}
+                style={{
+                    marginTop: sectionproperties.marginTop + 'px',
+                    marginBottom: sectionproperties.marginBottom + 'px',
+                    paddingLeft: sectionproperties.paddingLeft + 'px',
+                    paddingRight: sectionproperties.paddingRight + 'px',
+                    paddingTop: sectionproperties.paddingTop + 'px',
+                    paddingBottom: sectionproperties.paddingBottom + 'px',
+                    background: sectionproperties.backgroundColor,
+                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+                }}
+            >
+                <div className={'row m-0 w-100 justify-content-center '}>
+                    {/* <div className={langdetect == 'en' ? 'col-lg-4 col-md-12 pr-0 d-none d-md-block p-md-0' : 'col-lg-4 col-md-12 pl-0 d-none d-md-block p-md-0'}>
+                            <Mycart />
+                        </div> */}
+                    <div className={langdetect == 'en' ? ' col-lg-8 col-md-12 pl-0 p-md-0 ' : ' col-lg-8 col-md-12 pr-0 p-md-0 '}>
+                        <div className="col-lg-12 d-flex align-items-center p-0">
+                            <p
+                                style={{
+                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                    color: sectionproperties.sectionTitleColor,
+                                    marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                                    marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                                    textTransform: sectionproperties.sectionTitleTextTransform,
+                                    fontWeight: sectionproperties.sectionTitleFontWeight,
+                                }}
+                            >
+                                {langdetect == 'en' ? sectionproperties.checkoutButtonContenten : sectionproperties.checkoutButtonContentar}
+                                {/* {lang.checkout} */}
+                            </p>
+                        </div>
+                        {/* Logged in information */}
+                        {authdetailsContext.loggedin && (
+                            <div className="col-lg-12 p-0">
+                                <div
+                                    className="pl-3 pr-3 pt-2 pb-2"
+                                    style={{
+                                        background: sectionproperties.userinfo_sectionbgcolor,
+                                        borderRadius: sectionproperties.userinfo_borderradius + 'px',
+                                        marginTop: sectionproperties.userinfo_sectionmarginTop + 'px',
+                                        marginBottom: sectionproperties.userinfo_sectionmarginbottom + 'px',
+                                        border: sectionproperties.userinfo_borderwidth + 'px solid ' + sectionproperties.usserinfo_sectionbordercolor,
+                                    }}
+                                >
+                                    <div className="row m-0 w-100">
+                                        <div className={`${checkoutstyles.userinfo_iconcont}` + ' d-flex align-items-center justify-content-center '}>
+                                            <FiCheckCircle size={20} />
+                                        </div>
+                                        <div className="col-lg-11 col-md-10 col-sm-10 p-0">
+                                            <div className="row m-0 w-100">
+                                                <div
+                                                    className="col-lg-12 d-flex align-items-center pl-2 pr-2"
+                                                    style={{
+                                                        fontSize: sectionproperties.userinfo_titlefontsize + 'px',
+                                                        color: sectionproperties.userinfo_titlecolor,
+                                                        fontWeight: sectionproperties.userinfo_titlefontweight,
+                                                    }}
+                                                >
+                                                    {lang.loggedinas}
+                                                </div>
+
+                                                <div className={`${checkoutstyles.userinfotextstyles}` + ' col-lg-4 col-md-6 col-sm-12 d-flex align-items-center pl-1 pr-1 text-capitalize '}>
+                                                    <div className="m-0 p-0 d-flex align-items-center">
+                                                        <i
+                                                            className="h-100 d-flex align-items-center justify-content-center mb-auto mt-1"
+                                                            style={{
+                                                                fontSize: sectionproperties.userinfotext_iconfontsize + 'px',
+                                                                color: sectionproperties.userinfotext_iconcolor,
+                                                                marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                marginLeft: langdetect == 'en' ? 0 : '5px',
+                                                            }}
+                                                        >
+                                                            <HiUser />
+                                                        </i>
+                                                        <p className="m-0 p-0 wordbreak">{authdetailsContext.customerinfo.name}</p>
+                                                    </div>
+                                                </div>
+                                                <div className={`${checkoutstyles.userinfotextstyles}` + ' col-lg-4 col-md-6 col-sm-12 d-flex align-items-center pl-1 pr-1 '}>
+                                                    <div className="m-0 p-0 d-flex align-items-center">
+                                                        <i
+                                                            className="h-100 d-flex align-items-center justify-content-center mb-auto mt-1"
+                                                            style={{
+                                                                fontSize: sectionproperties.userinfotext_iconfontsize + 'px',
+                                                                color: sectionproperties.userinfotext_iconcolor,
+                                                                marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                marginLeft: langdetect == 'en' ? 0 : '5px',
+                                                            }}
+                                                        >
+                                                            <BiPhone />
+                                                        </i>
+                                                        <p className="m-0 p-0 wordbreak">{authdetailsContext.customerinfo.mobile}</p>
+                                                    </div>
+                                                </div>
+                                                <div className={`${checkoutstyles.userinfotextstyles}` + ' col-lg-4 col-md-6 col-sm-12 d-flex align-items-center pl-1 pr-1 '}>
+                                                    <div className="m-0 p-0 d-flex align-items-center">
+                                                        <i
+                                                            className="h-100 d-flex align-items-center justify-content-center mb-auto mt-1"
+                                                            style={{
+                                                                fontSize: sectionproperties.userinfotext_iconfontsize + 'px',
+                                                                color: sectionproperties.userinfotext_iconcolor,
+                                                                marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                marginLeft: langdetect == 'en' ? 0 : '5px',
+                                                            }}
+                                                        >
+                                                            <GrMail />
+                                                        </i>
+                                                        <p className="m-0 p-0 wordbreak">{authdetailsContext.customerinfo.email}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        {langdetect == 'en' && (
+                                            <div
+                                                className="col-lg-12 justify-content-end float-right pl-2 pr-2"
+                                                style={{
+                                                    fontSize: sectionproperties.userinfo_titlefontsize + 'px',
+                                                    color: sectionproperties.userinfo_titlecolor,
+                                                    fontWeight: sectionproperties.userinfo_titlefontweight,
+                                                    textAlign: 'right',
+                                                    textDecoration: 'underline',
+                                                    cursor: 'pointer',
+                                                    position: 'absolute',
+                                                    right: 10,
+                                                    top: 10,
+                                                }}
+                                                onClick={() => {
+                                                    routingcountext(StaticPagesLinksContext.accountinfo);
+                                                }}
+                                            >
+                                                {lang.update}
+                                            </div>
+                                        )}
+                                        {langdetect == 'ar' && (
+                                            <div
+                                                className="col-lg-12 justify-content-end float-left pl-2 pr-2"
+                                                style={{
+                                                    fontSize: sectionproperties.userinfo_titlefontsize + 'px',
+                                                    color: sectionproperties.userinfo_titlecolor,
+                                                    fontWeight: sectionproperties.userinfo_titlefontweight,
+                                                    textAlign: 'left',
+                                                    textDecoration: 'underline',
+                                                    cursor: 'pointer',
+                                                    position: 'absolute',
+                                                    left: 10,
+                                                    top: 10,
+                                                }}
+                                                onClick={() => {
+                                                    routingcountext(StaticPagesLinksContext.accountinfo);
+                                                }}
+                                            >
+                                                {lang.update}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        {/* Address Details */}
+                        <div className="col-lg-12 p-0">
+                            <div
+                                style={{
+                                    marginTop: sectionproperties.contactinfo_sectionmarginTop + 'px',
+                                    marginBottom: sectionproperties.contactinfo_sectionmarginbottom + 'px',
+                                    background: sectionproperties.contactinfo_sectionbgcolor,
+                                    borderRadius: sectionproperties.contactinfo_sectionborderradius + 'px',
+                                    border: sectionproperties.contactinfo_borderwidth + 'px solid ' + sectionproperties.contactinfo_sectionbordercolor,
+                                }}
+                            >
+                                <div className="col-lg-12 pl-3 pr-3 pt-2">
+                                    <p className={checkoutstyles.innersectiontitlestyles + ' m-0 p-0 d-flex align-items-start '}>
+                                        {authdetailsContext.loggedin ? lang.addressdetails : lang.contactdetails}
+                                    </p>
+                                </div>
+                                <div className="col-lg-12 p-0">
+                                    <hr className="mt-2 mb-2" />
+                                </div>
+                                <div className="row m-0 w-100 mb-3 pl-3 pr-3 pb-3">
+                                    {!authdetailsContext.loggedin && (
+                                        <>
+                                            <div className="col-lg-4 col-md-12 mb-3">
+                                                <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.name}</label>
+                                                <input
+                                                    type={'text'}
+                                                    className={`${formstyles.form_control}`}
+                                                    value={fetchcustomercartQueryContext?.data?.data?.customercart.name}
+                                                    onChange={(event) => {
+                                                        cartinfoupdater('name', event.target.value);
+                                                    }}
+                                                    style={{
+                                                        resize: 'none',
+                                                        fontWeight: sectionproperties.inputtextfontweight,
+                                                        background: sectionproperties.input_bgcolor,
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                        boxShadow: 'none',
+                                                    }}
+                                                />
+                                            </div>
+                                            <div className="col-lg-4 col-md-12 mb-3">
+                                                <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{langdetect == 'en' ? 'Phone Number' : 'رقم الهاتف'}</label>
+                                                <input
+                                                    type={'text'}
+                                                    className={`${formstyles.form_control}`}
+                                                    value={fetchcustomercartQueryContext?.data?.data?.customercart.mobile}
+                                                    onChange={(event) => {
+                                                        cartinfoupdater('mobile', event.target.value);
+                                                    }}
+                                                    style={{
+                                                        resize: 'none',
+                                                        fontWeight: sectionproperties.inputtextfontweight,
+                                                        background: sectionproperties.input_bgcolor,
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                        boxShadow: 'none',
+                                                    }}
+                                                />
+                                            </div>
+                                            <div className="col-lg-4 col-md-12 mb-3">
+                                                <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.email}</label>
+                                                <input
+                                                    type={'text'}
+                                                    className={`${formstyles.form_control}`}
+                                                    value={fetchcustomercartQueryContext?.data?.data?.customercart.email}
+                                                    onChange={(event) => {
+                                                        cartinfoupdater('email', event.target.value);
+                                                    }}
+                                                    style={{
+                                                        resize: 'none',
+                                                        fontWeight: sectionproperties.inputtextfontweight,
+                                                        background: sectionproperties.input_bgcolor,
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                        boxShadow: 'none',
+                                                    }}
+                                                />
+                                            </div>
+                                        </>
+                                    )}
+                                    <div className="col-lg-4 col-md-12 mb-3">
+                                        <label className={`${checkoutstyles.input_label_name}` + ' m-0 d-flex align-items-start '}> {lang.country}</label>
+                                        {fetchTabexCountriesQueryContext.isFetching && (
+                                            <div className="w-100 allcentered mt-1">
+                                                <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                            </div>
+                                        )}
+                                        {!fetchTabexCountriesQueryContext.isFetching && fetchTabexCountriesQueryContext.isSuccess && (
+                                            <Select
+                                                options={fetchTabexCountriesQueryContext.data.data.countries}
+                                                getOptionLabel={(option) => option.name}
+                                                getOptionValue={(option) => option.id}
+                                                value={fetchTabexCountriesQueryContext.data.data.countries.filter(
+                                                    (option) => option.id == fetchcustomercartQueryContext?.data?.data?.customercart.countryid,
+                                                )}
+                                                onChange={(option) => {
+                                                    var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                                                    tempFetchTabexStatesPayloadobjContext.functype = 'states';
+                                                    tempFetchTabexStatesPayloadobjContext.country_id = option.id;
+                                                    setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+                                                    cartinfoupdater('countryid', option.id);
+                                                }}
+                                                styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                                placeholder={lang.choosecountry}
+                                                isSearchable={true}
+                                            />
+                                        )}
+                                    </div>
+                                    <div className="col-lg-4 col-md-12 mb-3">
+                                        <label className={`${checkoutstyles.input_label_name}` + ' m-0 d-flex align-items-start '}>{lang.stategov}</label>
+                                        {fetchTabexStatesQueryContext.isFetching && (
+                                            <div className="w-100 allcentered mt-1">
+                                                <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                            </div>
+                                        )}
+                                        {!fetchTabexStatesQueryContext.isFetching && fetchTabexStatesQueryContext.isSuccess && (
+                                            <Select
+                                                options={fetchTabexStatesQueryContext.data.data.states}
+                                                getOptionLabel={(option) => option.name}
+                                                getOptionValue={(option) => option.id}
+                                                value={fetchTabexStatesQueryContext.data.data.states.filter((option) => option.id == fetchcustomercartQueryContext?.data?.data?.customercart.stateid)}
+                                                onChange={(option) => {
+                                                    if (option.id.length != 0 && fetchcustomercartQueryContext?.data?.data?.customercart.countryid.length != 0) {
+                                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                                                        tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+                                                        tempFetchTabexStatesPayloadobjContext.state_id = option.id;
+                                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+                                                        cartinfoupdater('stateid', option.id);
+                                                    } else {
+                                                        NotificationManager.warning('', 'Please Choose Country Or State');
+                                                    }
+                                                }}
+                                                styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                                placeholder={lang.choosestategov}
+                                                isSearchable={true}
+                                            />
+                                        )}
+                                    </div>
+                                    <div className="col-lg-4 col-md-12 mb-3">
+                                        <label className={`${checkoutstyles.input_label_name}` + ' m-0 d-flex align-items-start '}>{lang.city}</label>
+                                        {fetchTabexCitiesQueryContext.isFetching && (
+                                            <div className="w-100 allcentered mt-1">
+                                                <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                            </div>
+                                        )}
+                                        {!fetchTabexCitiesQueryContext.isFetching && fetchTabexCitiesQueryContext.isSuccess && (
+                                            <Select
+                                                options={fetchTabexCitiesQueryContext.data.data.cities}
+                                                getOptionLabel={(option) => option.name}
+                                                getOptionValue={(option) => option.id}
+                                                value={fetchTabexCitiesQueryContext.data.data.cities.filter((option) => option.id == fetchcustomercartQueryContext?.data?.data?.customercart.cityid)}
+                                                onChange={(option) => {
+                                                    cartinfoupdater('cityid', option.id);
+                                                }}
+                                                styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                                placeholder={lang.choosecity}
+                                                isSearchable={true}
+                                            />
+                                        )}
+                                    </div>
+                                    <div className="col-lg-12 mb-3">
+                                        <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.shippingaddress}</label>
+                                        <TextareaAutosize
+                                            type={'text'}
+                                            className={`${formstyles.form_control}`}
+                                            value={fetchcustomercartQueryContext?.data?.data?.customercart.address}
+                                            onChange={(event) => {
+                                                cartinfoupdater('address', event.target.value);
+                                            }}
+                                            style={{
+                                                resize: 'none',
+                                                fontWeight: sectionproperties.inputtextfontweight,
+                                                background: sectionproperties.input_bgcolor,
+                                                color: sectionproperties.inputfieldcolor,
+                                                fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                boxShadow: 'none',
+                                            }}
+                                        />
+                                    </div>
+                                    {sectionproperties.shownotes == 'Show' && (
+                                        <div className="col-lg-12 mb-3">
+                                            <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{langdetect == 'en' ? 'Notes' : 'الملاحظات'}</label>
+                                            <TextareaAutosize
+                                                type={'text'}
+                                                className={`${formstyles.form_control}`}
+                                                value={fetchcustomercartQueryContext?.data?.data?.customercart.notes}
+                                                onChange={(event) => {
+                                                    cartinfoupdater('notes', event.target.value);
+                                                }}
+                                                style={{
+                                                    // minHeight: '40px',
+                                                    resize: 'none',
+                                                    fontWeight: sectionproperties.inputtextfontweight,
+                                                    background: sectionproperties.input_bgcolor,
+                                                    color: sectionproperties.inputfieldcolor,
+                                                    fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                    borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                    boxShadow: 'none',
+                                                }}
+                                            />
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                        {/* Payment */}
+                        <div className="col-lg-12 p-0 w-100">
+                            <div
+                                style={{
+                                    background: sectionproperties.payment_sectionbgcolor,
+                                    borderRadius: sectionproperties.payment_borderradius + 'px',
+                                    border: sectionproperties.payment_borderwidth + 'px solid ' + sectionproperties.payment_sectionbordercolor,
+                                }}
+                            >
+                                <div className="col-lg-12 pl-3 pr-3 pt-2">
+                                    <p className={checkoutstyles.innersectiontitlestyles + ' m-0 p-0 d-flex align-items-start '}>{lang.paymentmethod}</p>
+                                </div>
+                                <div className="col-lg-12 p-0">
+                                    <hr className="mt-2 mb-2" />
+                                </div>
+                                <div className="row m-0 w-100 mb-3 pl-3 pr-3">
+                                    {authdetailsContext.instinfo.acceptCOD == 1 && (
+                                        <div className="col-xl-4 col-lg-4 col-md-12 mb-3">
+                                            <label
+                                                className={
+                                                    langdetect == 'en'
+                                                        ? `${formstyles.checkbox} ${checkoutstyles.checkbox} ` + ' d-flex mb-0 '
+                                                        : `${formstyles.checkbox} ${formstyles.checkboxtranslated}` + ' d-flex mb-0 '
+                                                }
+                                                for="codcheckbox"
+                                            >
+                                                <input
+                                                    id={'codcheckbox'}
+                                                    type="checkbox"
+                                                    className={checkoutstyles.checkboxinputstyles + ' mt-auto mb-auto '}
+                                                    checked={fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod == 'cod' ? true : false}
+                                                    onChange={() => {
+                                                        if (fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod != 'cod') {
+                                                            cartinfoupdater('paymentmethod', 'cod');
+                                                        }
+                                                    }}
+                                                />
+                                                <svg viewBox="0 0 21 21" className={checkoutstyles.svgstyles + ' h-100 '}>
+                                                    <path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
+                                                </svg>
+                                                <p className={' ml-2 mb-0 cursor-pointer wordbreak mr-2'} style={{}}>
+                                                    {lang.cod}
+                                                </p>
+                                            </label>
+                                        </div>
+                                    )}
+                                    {authdetailsContext.instinfo.acceptCardOnDelivery == 1 && (
+                                        <div className="col-xl-4 col-lg-4 col-md-12 mb-3">
+                                            <label
+                                                className={
+                                                    langdetect == 'en'
+                                                        ? `${formstyles.checkbox} ${checkoutstyles.checkbox} ` + ' d-flex mb-0 '
+                                                        : `${formstyles.checkbox} ${formstyles.checkboxtranslated} ${checkoutstyles.checkbox} ` + ' d-flex mb-0 '
+                                                }
+                                            >
+                                                <input
+                                                    type="checkbox"
+                                                    className={checkoutstyles.checkboxinputstyles + ' mt-auto mb-auto '}
+                                                    checked={fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod == 'cardondelivery' ? true : false}
+                                                    onChange={() => {
+                                                        if (fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod != 'cardondelivery') {
+                                                            cartinfoupdater('paymentmethod', 'cardondelivery');
+                                                        }
+                                                    }}
+                                                />
+                                                <svg viewBox="0 0 21 21" className={checkoutstyles.svgstyles + ' h-100 '}>
+                                                    <path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
+                                                </svg>
+                                                <p className={`${formstyles.checkbox_label}` + ' ml-2 mb-0 wordbreak cursor-pointer mr-2 '}> {lang.cardondelivery}</p>
+                                            </label>
+                                        </div>
+                                    )}
+                                    {authdetailsContext.instinfo.acceptOnlineCardPayment == 0 && (
+                                        <div className="col-xl-4 col-lg-4 col-md-12 mb-3">
+                                            <label
+                                                className={
+                                                    langdetect == 'en'
+                                                        ? `${formstyles.checkbox} ${checkoutstyles.checkbox} ` + ' d-flex mb-0 '
+                                                        : `${formstyles.checkbox} ${formstyles.checkboxtranslated} ${checkoutstyles.checkbox} ` + ' d-flex mb-0 '
+                                                }
+                                            >
+                                                <input
+                                                    type="checkbox"
+                                                    className={checkoutstyles.checkboxinputstyles + ' mt-auto mb-auto '}
+                                                    checked={fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod == 'onlinepayment' ? true : false}
+                                                    onChange={() => {
+                                                        if (fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod != 'onlinepayment') {
+                                                            cartinfoupdater('paymentmethod', 'onlinepayment');
+                                                        }
+                                                    }}
+                                                />
+                                                <svg viewBox="0 0 21 21" className={checkoutstyles.svgstyles + ' h-100 '}>
+                                                    <path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
+                                                </svg>
+                                                <p className={`${formstyles.checkbox_label}` + ' ml-2 mb-0 wordbreak cursor-pointer mr-2 '}> {lang.onlinepayment}</p>
+                                            </label>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        {fetchcustomercartQueryContext?.data?.data?.customercart.paymentmethod == 'onlinepayment1' && (
+                            <div className="col-lg-12 p-0 w-100 mb-3">
+                                <div
+                                    style={{
+                                        background: sectionproperties.payment_sectionbgcolor,
+                                        borderRadius: sectionproperties.payment_borderradius + 'px',
+                                        borderColor: sectionproperties.payment_sectionbordercolor,
+                                    }}
+                                >
+                                    <div className="col-lg-12 pl-3 pr-3 pt-2">
+                                        <p className={checkoutstyles.innersectiontitlestyles + ' m-0 p-0 d-flex align-items-start '}>{lang.paymentcardinformation}</p>
+                                    </div>
+                                    <div className="col-lg-12 p-0">
+                                        <hr className="mt-2 mb-2" />
+                                    </div>
+                                    <div className="w-100 row m-0 pl-3 pr-3 pt-2 pb-2">
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0">
+                                            <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.cardnumber}</label>
+                                            <input
+                                                className={formstyles.form_controlcheckout}
+                                                type="text"
+                                                textplaceholder=""
+                                                onChange={(event) => {}}
+                                                style={{
+                                                    fontWeight: sectionproperties.inputtextfontweight,
+                                                    background: sectionproperties.input_bgcolor,
+                                                    color: sectionproperties.inputfieldcolor,
+                                                    fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                    borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="w-100 row m-0">
+                                            <div className="col-lg-4 col-md-12 col-sm-12 p-sm-0 mb-3">
+                                                <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.year}</label>
+                                                <input
+                                                    className={formstyles.form_controlcheckout}
+                                                    type="text"
+                                                    textplaceholder=""
+                                                    onChange={(event) => {}}
+                                                    style={{
+                                                        fontWeight: sectionproperties.inputtextfontweight,
+                                                        background: sectionproperties.input_bgcolor,
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                    }}
+                                                />
+                                            </div>
+                                            <div className="col-lg-4 col-md-12 col-sm-12  p-sm-0 mb-3">
+                                                <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.month}</label>
+                                                <input
+                                                    className={formstyles.form_controlcheckout}
+                                                    type="text"
+                                                    textplaceholder=""
+                                                    onChange={(event) => {}}
+                                                    style={{
+                                                        fontWeight: sectionproperties.inputtextfontweight,
+                                                        background: sectionproperties.input_bgcolor,
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                    }}
+                                                />
+                                            </div>
+                                            <div className="col-lg-4 col-md-12 col-sm-12  p-sm-0 mb-3">
+                                                <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.cvv}</label>
+                                                <input
+                                                    className={formstyles.form_controlcheckout}
+                                                    type="text"
+                                                    textplaceholder=""
+                                                    onChange={(event) => {}}
+                                                    style={{
+                                                        fontWeight: sectionproperties.inputtextfontweight,
+                                                        background: sectionproperties.input_bgcolor,
+                                                        color: sectionproperties.inputfieldcolor,
+                                                        fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                        borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0 mb-3">
+                                            <label className={`${checkoutstyles.input_label_name}` + ' mb-2 d-flex align-items-start '}>{lang.nameoncard}</label>
+                                            <input
+                                                className={formstyles.form_controlcheckout}
+                                                type="text"
+                                                textplaceholder=""
+                                                onChange={(event) => {}}
+                                                style={{
+                                                    fontWeight: sectionproperties.inputtextfontweight,
+                                                    background: sectionproperties.input_bgcolor,
+                                                    color: sectionproperties.inputfieldcolor,
+                                                    fontSize: sectionproperties.inputfieldfontsize + 'px',
+                                                    borderRadius: sectionproperties.inputfieldborderradius + 'px',
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                    <div className={langdetect == 'en' ? 'col-lg-4 col-md-12 pr-0' : 'col-lg-4 col-md-12 pl-0'}>{Mycart()}</div>
+                </div>
+            </div>
+            {/* )} */}
+        </div>
+    );
+};
+export default Checkout;