tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/OrderSuccess/OrderSuccess.jsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { BrowserRouter as Router, Switch, Route, Redirect, useParams, useHistory, useLocation } from 'react-router-dom';
+import { useQuery, useQueryClient, useMutation } from 'react-query';
+import { css } from 'glamor';
+import { IoBagCheckOutline } from '@react-icons/all-files/io5/IoBagCheckOutline';
+import { IoBagRemoveOutline } from '@react-icons/all-files/io5/IoBagRemoveOutline';
+
+const OrderSuccess = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const uselocation = props.actions.uselocation;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
+    const [IsOrderSuccess, setIsOrderSuccess] = useState(false);
+    const [ReasonFail, setReasonFail] = useState('');
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
+    // useEffect(() => {
+    //     const query = new URLSearchParams(uselocation.search);
+    //     var issuccess = query.get('status');
+    //     if (issuccess == true || issuccess == 1 || issuccess == 'true') {
+    //         if (fetchcustomercartQueryContext.isSuccess) {
+    //             setTimeout(() => {
+    //                 localStorage.removeItem('cdata');
+    //             }, 1000);
+    //         }
+    //     }
+    // }, [fetchcustomercartQueryContext.isSuccess]);
+    useEffect(() => {
+        const query = new URLSearchParams(uselocation.search);
+        var issuccess = query.get('status');
+        if (issuccess == true || issuccess == 1 || issuccess == 'true') {
+            if (fetchcustomercartQueryContext.isSuccess) {
+                setTimeout(() => {
+                    localStorage.removeItem('cdata');
+
+                    AddtoCartMutationContext.mutate({ functype: 'clearcart', reloadpage: false, openproductmodal: false });
+                }, 1000);
+            }
+        }
+    }, [fetchcustomercartQueryContext.isSuccess]);
+
+    useEffect(() => {
+        const query = new URLSearchParams(uselocation.search);
+        var issuccess = query.get('status');
+
+        if (issuccess == true || issuccess == 1 || issuccess == 'true') {
+            setIsOrderSuccess(true);
+        } else {
+            setIsOrderSuccess(false);
+            setReasonFail(query.get('reason'));
+        }
+    }, []);
+    useEffect(() => {
+        var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '62af2f545cebb');
+        if (cartindex >= 0) {
+            setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
+        }
+    }, []);
+    useEffect(() => {
+        var secpropobj = {};
+        props?.actions?.StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+            secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+        });
+
+        setsectionproperties({ ...secpropobj });
+    }, [props?.actions?.StatePagePropertiesContext]);
+    const authdetailsContext = props.actions.authdetailsContext;
+    const ordersuccessstyle = {
+        ordersuccessbtn: css({
+            background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+            color: sectionproperties.generalbtn_textColor,
+            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            textTransform: sectionproperties.generalbtn_texttransform,
+            width: sectionproperties.generalbtn_width + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            transition: '.3s',
+            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        containerstyle: css({
+            paddingLeft: sectionproperties.paddingLeft + 'px',
+            paddingRight: sectionproperties.paddingRight + 'px',
+            paddingTop: sectionproperties.marginTop + 'px',
+            paddingBottom: sectionproperties.marginBottom + 'px',
+            '@media (max-width: 800px)': {
+                paddingTop: sectionproperties.marginTopResp + 'px',
+            },
+        }),
+    };
+    return (
+        <div className={ordersuccessstyle.containerstyle + ' row ml-0 mr-0 w-100 justify-content-center mt-4 mb-4 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2 '} style={{}}>
+            {IsOrderSuccess && (
+                <div
+                    className="col-lg-12 allcentered flex-column d-none"
+                    style={{
+                        minHeight: '50vh',
+                        background: 'white',
+                        borderRadius: '10px',
+                    }}
+                >
+                    <IoBagCheckOutline size={sectionproperties.icontextfontsize} color={sectionproperties.iconcontainercolor} className="mb-2" />
+                    <p
+                        className="m-0 p-0 wordbreak"
+                        style={{
+                            color: sectionproperties.slideshowText1ContentColor,
+                            fontSize: sectionproperties.slideshowText1ContentFontSize + 'px',
+                            fontWeight: sectionproperties.slideshowText1ContentFontWeight,
+                        }}
+                        dangerouslySetInnerHTML={{ __html: langdetect == 'en' ? sectionproperties.text1editortexten : sectionproperties.text1editortextar }}
+                    ></p>
+                    {authdetailsContext.loggedin && (
+                        <button
+                            className={`${ordersuccessstyle.ordersuccessbtn} ` + ' mt-3 d-flex align-items-center justify-content-center '}
+                            onClick={() => {
+                                routingcountext(StaticPagesLinksContext.Ordershistory);
+                            }}
+                        >
+                            {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
+                        </button>
+                    )}
+                </div>
+            )}
+            {!IsOrderSuccess && (
+                <div
+                    className="col-lg-12 allcentered flex-column"
+                    style={{
+                        minHeight: '50vh',
+                        background: 'white',
+                        borderRadius: '10px',
+                    }}
+                >
+                    <IoBagRemoveOutline size={sectionproperties.icontextfontsize} color={sectionproperties.iconcontainercolor} className="mb-2" />
+                    <p
+                        className="m-0 p-0 wordbreak"
+                        style={{
+                            color: sectionproperties.slideshowText2ContentColor,
+                            fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
+                            fontWeight: sectionproperties.slideshowText2ContentFontWeight,
+                        }}
+                        dangerouslySetInnerHTML={{ __html: langdetect == 'en' ? sectionproperties.contenteditor : sectionproperties.text2editortextar }}
+                    >
+                        {/* {lang.ordererror1} */}
+                    </p>
+                    <p
+                        className="m-0 p-0 wordbreak"
+                        style={{
+                            color: sectionproperties.slideshowText2ContentColor,
+                            fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
+                            fontWeight: sectionproperties.slideshowText2ContentFontWeight,
+                        }}
+                    >
+                        {ReasonFail}
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+};
+export default OrderSuccess;