tabexseriescomponents 0.0.225 → 0.0.227

package/srcold/TabexComponents/StaticPages/InnerGroups/InnerGroups.jsx

@@ -1,60 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import generalstyles from '../../../styles/general/general.module.css';
-import { css } from 'glamor';
-import { IKImage } from 'imagekitio-react';
-import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
-import CardsSection from '../../Sections/Cards/CardsSection/CardsSection.jsx';
-const InnerGroups = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
-    const favoriteprojectscountContext = props.actions.favoriteprojectscountContext;
-    const routingcountext = props.actions.routingcountext;
-    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
-    const ProductFilterObjContext = props.actions.ProductFilterObjContext;
-    const setProductFilterObjContext = props.actions.setProductFilterObjContext;
-    const TabexSectionsComponentsContext = props.actions.TabexSectionsComponentsContext;
-    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
-    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
-    const fetchProductsQuery = props.actions.fetchProductsQuery;
-    const fetchcollectionsQueryContext = props.actions.fetchcollectionsQueryContext;
-    const setParentCollectionsForCollectionQueryArr = props.actions.setParentCollectionsForCollectionQueryArr;
-    const ParentCollectionsForCollectionQueryArr = props.actions.ParentCollectionsForCollectionQueryArr;
-    const setfetchingtype = props.actions.setfetchingtype;
-    const fetchingtype = props.actions.fetchingtype;
-    const addtofavoritescontext = props.actions.addtofavoritescontext;
-    const fetchAuthorizationQueryContext = props.actions.fetchAuthorizationQueryContext;
-    const grouptypeparams = props.actions.grouptypeparams;
-    const collectionidparams = props.actions.collectionidparams;
-    const actions = props.actions;
-    const [CurrentPageId, setCurrentPageId] = useState('');
-    useEffect(() => {
-        if (Object.keys(StatePagePropertiesContext).length != 0) {
-            var secpropobj = {};
-            StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
-                secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
-            });
-            setsectionproperties({ ...secpropobj });
-        }
-    }, [StatePagePropertiesContext]);
-    // useEffect(() => {
-    //     var cartindex = templatepropcontext?.pagesnprop?.findIndex((x) => x.staticpageid == '6218bccb85eae');
-    //     if (cartindex >= 0) {
-    //         setCurrentPageId(cartindex);
-    //     }
-    // }, []);
-
-    return (
-        <div
-            className={'row m-0 w-100 d-flex justify-content-center'}
-            style={{
-                backgroundColor: sectionproperties.backgroundColor,
-            }}
-        >
-            <CardsSection actions={{ ...actions, fetchingtype: grouptypeparams }} />
-        </div>
-    );
-};
-export default InnerGroups;

package/srcold/TabexComponents/StaticPages/Login/FacebookLoginButton.jsx

@@ -1,50 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import generalstyles from '../../../styles/general/general.module.css';
-import loginstyles from '../../../styles/staticpages/login.module.css';
-import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props';
-import { FaFacebookF } from '@react-icons/all-files/fa/FaFacebookF';
-
-const FacebookLoginButton = (props) => {
-    // const { lang, langdetect } = useContext(LanguageContext);
-    // const { fetchAuthorizationQueryContext, SocialLoginMutationContext } = useContext(FetchingContext);
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const authdetailsContext = props.actions.authdetailsContext;
-    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
-    return (
-        <div className="">
-            {authdetailsContext.instinfo?.instcred?.facebookloginappid != null && (
-                <FacebookLogin
-                    cssClass={`${generalstyles.btn} ${generalstyles.btn_primary} ${loginstyles.loginbtn}` + ' w-100 mb-3 d-flex align-items-center justify-content-center '}
-                    appId={authdetailsContext.instinfo?.instcred?.facebookloginappid}
-                    fields="name,email"
-                    callback={(responseFacebook) => {
-                        var googleresp = responseFacebook;
-
-                        if (googleresp.status != 'unknown') {
-                            SocialLoginMutationContext.mutate({
-                                email: googleresp.email,
-                                name: googleresp.name,
-                                loginplattype: 'facebook',
-                            });
-                        }
-                    }}
-                    render={(renderProps) => {
-                        return (
-                            <button
-                                type="button"
-                                onClick={renderProps.onClick}
-                                className={' d-flex align-items-center justify-content-center  text-secondaryhovercontainer'}
-                                style={{ border: '1px solid #ccc', height: '38px', borderRadius: '3px', width: '218px' }}
-                            >
-                                <FaFacebookF size={15} color="black" className="ml-1 mr-1 text-secondaryhover" />
-                                <p className="m-0 p-0 font_13 ml-1 mr-1 text-secondaryhover">{lang.loginwithfacebook}</p>
-                            </button>
-                        );
-                    }}
-                />
-            )}
-        </div>
-    );
-};
-export default FacebookLoginButton;

package/srcold/TabexComponents/StaticPages/Login/GoogleLoginButton.jsx

@@ -1,35 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { useGoogleLogin, hasGrantedAnyScopeGoogle, GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
-import jwtDecode from 'jwt-decode';
-const GoogleLoginButton = (props) => {
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const authdetailsContext = props.actions.authdetailsContext;
-    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
-    return (
-        <>
-            {authdetailsContext.instinfo?.instcred?.googleloginclientid != null && (
-                <div className="d-flex align-items-center justify-content-center">
-                    <GoogleOAuthProvider clientId={authdetailsContext.instinfo?.instcred?.googleloginclientid}>
-                        <div className={'row m-0 w-100 d-flex align-items-center justify-content-center'}>
-                            <GoogleLogin
-                                onSuccess={(tokenResponse) => {
-                                    var tt = jwtDecode(tokenResponse.credential);
-                                    SocialLoginMutationContext.mutate({
-                                        email: tt.email,
-                                        name: tt.name,
-                                        loginplattype: 'google',
-                                    });
-                                }}
-                                onError={() => {
-                                    console.log('Login Failed');
-                                }}
-                            />
-                        </div>
-                    </GoogleOAuthProvider>
-                </div>
-            )}
-        </>
-    );
-};
-export default GoogleLoginButton;

package/srcold/TabexComponents/StaticPages/Login/Login.jsx

@@ -1,469 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import loginstyles from '../../../styles/staticpages/login.module.css';
-import { CircularProgress } from 'react-cssfx-loading';
-import { css } from 'glamor';
-import GoogleLogin from './GoogleLoginButton.jsx';
-import FacebookLoginButton from './FacebookLoginButton.jsx';
-import { AiOutlineUser } from '@react-icons/all-files/ai/AiOutlineUser';
-import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
-import { Modal } from 'react-bootstrap';
-import { useQuery, useQueryClient, useMutation } from 'react-query';
-
-const Login = (props) => {
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const templatepropcontext = props.actions.templatepropcontext;
-    const langdetect = props.actions.langdetect;
-    const routingcountext = props.actions.routingcountext;
-    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
-    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
-    const ForgetpasswordMutationContext = props.actions.ForgetpasswordMutationContext;
-    const LoginMutation = props.actions.LoginMutationContext;
-    const NotificationManager = props.actions.NotificationManager;
-    const instapikey = props.actions.instapikey;
-    const actions = props.actions;
-    const [statusreason, setstatusreason] = useState('');
-    const [forgotpasswordpayload, setforgotpasswordpayload] = useState({
-        instapikey: instapikey,
-        email: '',
-        code: '',
-        newpassword: '',
-        confirmnewpassword: '',
-    });
-    const [payloadobj, setpayloadobj] = useState({
-        instapikey: instapikey,
-        email: '',
-        password: '',
-    });
-    const [forgetpasswordstage, setforgetpasswordstage] = useState('send');
-    const [forgetpasswordmodal, setforgetpasswordmodal] = useState(false);
-    const [CurrentPageId, setCurrentPageId] = useState('');
-    const [sectionproperties, setsectionproperties] = useState('');
-    useEffect(() => {
-        var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '6218bccb77283');
-        if (cartindex >= 0) {
-            setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
-        }
-    }, []);
-    useEffect(() => {
-        if (StatePagePropertiesContext != null && StatePagePropertiesContext != undefined && StatePagePropertiesContext.length != 0) {
-            var secpropobj = {};
-            StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
-                secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
-            });
-            setsectionproperties({ ...secpropobj });
-        }
-    }, [StatePagePropertiesContext]);
-    useEffect(() => {
-        if (ForgetpasswordMutationContext.isSuccess) {
-            if (ForgetpasswordMutationContext.data.data.status) {
-                if (ForgetpasswordMutationContext.data.data.stage == 'send') {
-                    setforgetpasswordstage('verify');
-                } else if (ForgetpasswordMutationContext.data.data.stage == 'verify') {
-                    setforgetpasswordstage('send');
-                    setforgotpasswordpayload({
-                        instapikey: instapikey,
-                        email: '',
-                        code: '',
-                        newpassword: '',
-                        confirmnewpassword: '',
-                    });
-                    setforgetpasswordmodal(false);
-                    NotificationManager.success('', 'Password changed successfully');
-                }
-            }
-        }
-    }, [ForgetpasswordMutationContext.isSuccess]);
-
-    const loginstyles2 = {
-        loginbtn: css({
-            background: sectionproperties.login_btn_backgroundtransparent == 'Transparent' ? 'transparent' : sectionproperties.login_btn_background,
-            color: sectionproperties.login_btn_color,
-            borderRadius: sectionproperties.login_btn_borderBottomLeftRadius + 'px',
-            fontSize: sectionproperties.login_btn_fontSize + 'px',
-            lineHeight: sectionproperties.login_btn_fontSize + 'px',
-            width: sectionproperties.login_btn_width + 'px',
-            height: sectionproperties.login_btn_height + 'px',
-            fontWeight: sectionproperties.login_btn_fontweight,
-            transition: '.3s',
-            border: sectionproperties.login_btn_borderwidth + 'px solid ' + sectionproperties.login_btn_bordercolor,
-            ':hover': {
-                background: sectionproperties.login_btn_backgroundonhover,
-                color: sectionproperties.login_btn_coloronhover,
-            },
-        }),
-        logininputLabel: css({
-            color: sectionproperties.form_labelcolor,
-            textTransform: sectionproperties.form_labeltexttransform,
-            fontWeight: sectionproperties.form_labelfontweight,
-            fontSize: sectionproperties.form_labelfontsize + 'px',
-        }),
-        signupbtn: css({
-            background: sectionproperties.signup_btnbgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.signup_btnbgcolor,
-            width: sectionproperties.signup_btn_width + 'px',
-            height: sectionproperties.signup_btn_height + 'px',
-            borderRadius: sectionproperties.signup_btn_borderBottomLeftRadius + 'px',
-            color: sectionproperties.signup_btn_color,
-            fontSize: sectionproperties.signup_btn_fontSize + 'px',
-            textTransform: sectionproperties.signup_btn_texttransform,
-            fontWeight: sectionproperties.signup_btn_fontweight,
-            boxShadow: sectionproperties.signup_btn_showshadow == 'Show' ? '0 0 10px ' + sectionproperties.signup_btn_shadowcolor : '',
-            border: sectionproperties.signup_btn_borderwidth + 'px solid ' + sectionproperties.signup_btn_bordercolor,
-            opacity: sectionproperties.signup_btn_opacity,
-            transition: '.3s',
-            ':hover': {
-                color: sectionproperties.signup_btn_coloronhover,
-                background: sectionproperties.signup_btnbgcoloroonhover,
-                opacity: sectionproperties.signup_btn_opacityonhover,
-            },
-        }),
-        form_control: css({
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
-            display: 'block',
-            width: '100%',
-            height: '35px',
-            padding: '0 30px',
-            transition: '.3s',
-            fontWeight: 500,
-            ':focus': {
-                borderColor: sectionproperties.inputfeildbordercoloronfocus,
-            },
-            ':focus .login_input_icon': {
-                color: sectionproperties.inputfeildbordercoloronfocus,
-            },
-        }),
-    };
-
-    return (
-        <div className="col-lg-12 d-flex align-items-center justify-content-center pt-md-3 mb-5 pb-5">
-            {sectionproperties.length != 0 && (
-                <div className={'row m-0 w-100 pl-5 pr-5 d-flex align-items-center justify-content-center pl-md-3 pr-md-3 p-sm-0'}>
-                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
-                        <p
-                            className="text-md-center"
-                            style={{
-                                fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                color: sectionproperties.sectionTitleColor,
-                                marginTop: sectionproperties.sectionTitleMarginTop + 'px',
-                                marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
-                                marginLeft: sectionproperties.sectionTitleMarginLeft + 'px',
-                                marginRight: sectionproperties.sectionTitleMarginRight + 'px',
-                                textTransform: sectionproperties.sectionTitleTextTransform,
-                                fontWeight: sectionproperties.sectionTitleFontWeight,
-                            }}
-                        >
-                            {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
-                        </p>
-                    </div>
-                    <div className="col-lg-12 col-md-12 col-sm-12 p-sm-0 d-flex justify-content-center">
-                        <div className={' col-lg-10 col-md-12 col-sm-12 p-sm-0 '}>
-                            <div className=" row m-0 w-100 ">
-                                <form
-                                    className={`${loginstyles.leftcontainer}` + ' col-lg-6 col-md-12 col-sm-12 pt-4 pb-4 d-flex align-items-stretch p-0 '}
-                                    style={{
-                                        background: sectionproperties.formLeftbgColor,
-                                        borderTopRightRadius: langdetect == 'en' ? sectionproperties.formLeft_bordertoprightradius + 'px' : sectionproperties.formLeft_bordertopleftradius + 'px',
-                                        borderTopLeftRadius: langdetect == 'en' ? sectionproperties.formLeft_bordertopleftradius + 'px' : sectionproperties.formLeft_bordertoprightradius + 'px',
-                                        borderBottomRightRadius:
-                                            langdetect == 'en' ? sectionproperties.formLeft_borderbottomrightadius + 'px' : sectionproperties.formLeft_borderbottomleftadius + 'px',
-                                        borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.formLeft_borderbottomleftadius + 'px' : sectionproperties.formLeft_borderbottomrightadius + 'px',
-                                    }}
-                                >
-                                    <div className="row m-0 w-100 d-block p-2 pl-sm-3 pr-sm-3">
-                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
-                                            <label className={`${loginstyles2.logininputLabel}` + ' m-0 text-transform-none d-flex justify-content-start '}>
-                                                {langdetect == 'en' ? 'E-mail or Phone number' : 'البريد الإلكترونى او رقم الهاتف'}
-                                            </label>
-                                            <input
-                                                type="text"
-                                                className={`${loginstyles2.form_control}`}
-                                                value={payloadobj.email}
-                                                onChange={(event) => {
-                                                    var temppayloadobj = { ...payloadobj };
-                                                    temppayloadobj.email = event.target.value;
-                                                    setpayloadobj({ ...temppayloadobj });
-                                                }}
-                                            />
-                                            <span className={langdetect == 'en' ? loginstyles.login_input_icon + ' login_input_icon ' : loginstyles.login_input_icontrans + ' login_input_icon '}>
-                                                <i className="h-100 d-flex align-items-center justify-content-center">
-                                                    <AiOutlineUser size={18} />
-                                                </i>
-                                            </span>
-                                        </div>
-                                        <div className="col-lg-12 col-md-12 col-sm-12 p-sm-0">
-                                            <label className={`${loginstyles2.logininputLabel}` + ' m-0 d-flex justify-content-start '}>{langdetect == 'en' ? 'Password' : 'كلمة السر'}</label>
-                                            <input
-                                                className={`${loginstyles.form_control} ${loginstyles2.form_control}`}
-                                                type="password"
-                                                textplaceholder=""
-                                                value={payloadobj.password}
-                                                onChange={(event) => {
-                                                    var temppayloadobj = { ...payloadobj };
-                                                    temppayloadobj.password = event.target.value;
-                                                    setpayloadobj({ ...temppayloadobj });
-                                                }}
-                                            />
-                                            <span className={langdetect == 'en' ? loginstyles.login_input_icon : loginstyles.login_input_icontrans}>
-                                                <i className=" fa fa-at h-100 d-flex align-items-center justify-content-center"></i>
-                                            </span>
-                                        </div>
-                                        <div
-                                            className="col-lg-12 col-md-12 col-sm-12  mb-3 d-flex justify-content-end mt-1 cursor-pointer text-light text-lighthover font-13 "
-                                            onClick={() => {
-                                                setforgetpasswordmodal(true);
-                                            }}
-                                        >
-                                            <p className={'m-0 p-0 '}>{langdetect == 'en' ? 'Forgot Password?' : 'هل نسيت كلمة السر؟'}</p>
-                                        </div>
-                                        <div className="col-lg-12 col-md-12 col-sm-12  d-flex justify-content-center font-13 mb-2">
-                                            <p style={{ color: 'red' }} className="m-0 p-0">
-                                                {statusreason}
-                                            </p>
-                                        </div>
-                                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-4">
-                                            <button
-                                                className={` ${loginstyles2.loginbtn}` + ' d-flex align-items-center justify-content-center '}
-                                                onClick={() => {
-                                                    if (payloadobj.email.length != 0 && payloadobj.password.length != 0) {
-                                                        LoginMutation.mutate(payloadobj);
-                                                    }
-                                                }}
-                                                type={'button'}
-                                                disabled={LoginMutation.isLoading == true ? true : false}
-                                            >
-                                                {!SocialLoginMutationContext.isLoading && (
-                                                    <>
-                                                        {LoginMutation.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
-
-                                                        {!LoginMutation.isLoading && (
-                                                            <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '', textTransform: sectionproperties.login_btn_texttransform }}>
-                                                                {lang.login}
-                                                            </span>
-                                                        )}
-                                                    </>
-                                                )}
-                                                {SocialLoginMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
-                                            </button>
-                                        </div>
-                                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-2">
-                                            <FacebookLoginButton actions={actions} />
-                                        </div>
-                                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
-                                            <GoogleLogin actions={actions} />
-                                        </div>
-                                    </div>
-                                </form>
-                                <div className={' col-lg-6 col-md-12 col-sm-12 d-flex align-items-stretch p-0 '}>
-                                    <div
-                                        className={`${loginstyles.rightContainer}` + ' p-2 row m-0 w-100 d-flex align-items-center justify-content-center pt-md-4 pb-md-4 '}
-                                        style={{
-                                            background: sectionproperties.formRightbgColor,
-                                            borderTopRightRadius: langdetect == 'en' ? sectionproperties.formRight_bordertoprightradius + 'px' : sectionproperties.formRight_bordertopleftradius + 'px',
-                                            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.formRight_bordertopleftradius + 'px' : sectionproperties.formRight_bordertoprightradius + 'px',
-                                            borderBottomRightRadius:
-                                                langdetect == 'en' ? sectionproperties.formRight_borderbottomrightadius + 'px' : sectionproperties.formRight_borderbottomleftadius + 'px',
-                                            borderBottomLeftRadius:
-                                                langdetect == 'en' ? sectionproperties.formRight_borderbottomleftadius + 'px' : sectionproperties.formRight_borderbottomrightadius + 'px',
-                                        }}
-                                    >
-                                        <div className="row m-0 w-100">
-                                            <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-md-2">
-                                                <p
-                                                    className={` ${loginstyles.rightContainerText}`}
-                                                    style={{
-                                                        color: sectionproperties.formRightTextColor1,
-                                                        fontSize: sectionproperties.formRightTextFontSize1 + 'px',
-                                                        fontWeight: sectionproperties.formRightTextFontWeight1,
-                                                        marginBottom: sectionproperties.formRightTextMarginBottom1 + 'px',
-                                                    }}
-                                                >
-                                                    {langdetect == 'en' ? sectionproperties.formRightText1 : sectionproperties.formRightText1_ar}
-                                                </p>
-                                            </div>
-                                            <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-md-2">
-                                                <p
-                                                    className={` ${loginstyles.rightContainerText}`}
-                                                    style={{
-                                                        color: sectionproperties.formRightTextColor2,
-                                                        fontSize: sectionproperties.formRightTextFontSize2 + 'px',
-                                                        fontWeight: sectionproperties.formRightTextFontWeight2,
-                                                        marginBottom: sectionproperties.formRightTextMarginBottom2 + 'px',
-                                                    }}
-                                                >
-                                                    {langdetect == 'en' ? sectionproperties.formRightText2 : sectionproperties.formRightText2_ar}
-                                                </p>
-                                            </div>
-
-                                            <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
-                                                <button
-                                                    className={`${loginstyles2.signupbtn} ` + '  pl-4 pr-4 '}
-                                                    onClick={() => {
-                                                        routingcountext(StaticPagesLinksContext.Signup);
-                                                    }}
-                                                >
-                                                    {lang.signup}
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <form method="POST" action={'/surfer/login'} className="" id={'loginform'} style={{ display: 'none' }}>
-                        <input type="hidden" name="email" value={payloadobj.email} />
-                        <input type="hidden" name="password" value={payloadobj.password} />
-                    </form>
-                </div>
-            )}
-            <Modal show={forgetpasswordmodal} onHide={() => setforgetpasswordmodal(false)} centered size={'md'}>
-                <Modal.Body>
-                    <div
-                        class="d-flex align-items-center justify-content-center bgdanger-hover"
-                        style={{ position: 'absolute', right: -15, top: -15, width: '4vh', height: '4vh', background: '#000', borderRadius: '50%' }}
-                        onClick={() => setforgetpasswordmodal(false)}
-                    >
-                        <IoMdClose size={15} color="white" />
-                    </div>
-                    <div class="row m-0 w-100 allcentered">
-                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center mt-2 justify-content-center">
-                            <p
-                                className="text-md-center m-0 p-0 mb-2"
-                                style={{
-                                    fontSize: '19px',
-                                    color: sectionproperties.sectionTitleColor,
-                                    fontWeight: 600,
-                                }}
-                            >
-                                {langdetect == 'en' ? 'Reset Password' : 'إعادة تعيين كلمة المرور'}
-                            </p>
-                        </div>
-                        <div class="col-lg-12 p-0">
-                            <hr class={'m-0 p-0'} />
-                        </div>
-                    </div>
-                    <div class="row w-100 m-0 mb-3 pl-2 pr-2 pt-3 pb-3 pl-sm-3 pr-sm-3">
-                        <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0">
-                            <label className={`${loginstyles2.logininputLabel}` + ' m-0 text-transform-none d-flex justify-content-start '}>
-                                {langdetect == 'en' ? 'E-mail' : 'البريد الإلكترونى'}
-                            </label>
-                            <input
-                                type="text"
-                                className={`${loginstyles2.form_control}`}
-                                value={forgotpasswordpayload.email}
-                                onChange={(event) => {
-                                    var temppayloadobj = { ...forgotpasswordpayload };
-                                    temppayloadobj.email = event.target.value;
-                                    setforgotpasswordpayload({ ...temppayloadobj });
-                                }}
-                                disabled={forgetpasswordstage == 'verify' ? true : false}
-                            />
-                            <span className={langdetect == 'en' ? loginstyles.login_input_icon + ' login_input_icon ' : loginstyles.login_input_icontrans + ' login_input_icon '}>
-                                <i className="h-100 d-flex align-items-center justify-content-center">
-                                    <AiOutlineUser size={18} />
-                                </i>
-                            </span>
-                        </div>
-                        {forgetpasswordstage == 'verify' && (
-                            <>
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 mt-3 p-sm-0">
-                                    <label className={`${loginstyles2.logininputLabel}` + ' m-0 text-transform-none d-flex justify-content-start '}>
-                                        {langdetect == 'en' ? 'Code' : ' كود البريد الاكتروني'}
-                                    </label>
-                                    <input
-                                        type="text"
-                                        className={`${loginstyles2.form_control}`}
-                                        value={forgotpasswordpayload.code}
-                                        onChange={(event) => {
-                                            var temppayloadobj = { ...forgotpasswordpayload };
-                                            temppayloadobj.code = event.target.value;
-                                            setforgotpasswordpayload({ ...temppayloadobj });
-                                        }}
-                                    />
-                                </div>
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0">
-                                    <label className={`${loginstyles2.logininputLabel}` + ' m-0 text-transform-none d-flex justify-content-start '}>{lang.password}</label>
-                                    <input
-                                        type="password"
-                                        className={`${loginstyles2.form_control}`}
-                                        value={forgotpasswordpayload.newpassword}
-                                        onChange={(event) => {
-                                            var temppayloadobj = { ...forgotpasswordpayload };
-                                            temppayloadobj.newpassword = event.target.value;
-                                            setforgotpasswordpayload({ ...temppayloadobj });
-                                        }}
-                                    />
-                                </div>
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0">
-                                    <label className={`${loginstyles2.logininputLabel}` + ' m-0 text-transform-none d-flex justify-content-start '}>{lang.confirmpassword}</label>
-                                    <input
-                                        type="password"
-                                        className={`${loginstyles2.form_control}`}
-                                        value={forgotpasswordpayload.confirmnewpassword}
-                                        onChange={(event) => {
-                                            var temppayloadobj = { ...forgotpasswordpayload };
-                                            temppayloadobj.confirmnewpassword = event.target.value;
-                                            setforgotpasswordpayload({ ...temppayloadobj });
-                                        }}
-                                    />
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </Modal.Body>
-                <Modal.Footer>
-                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 ">
-                        <button
-                            className={` ${loginstyles2.loginbtn}` + ' d-flex align-items-center justify-content-center '}
-                            onClick={() => {
-                                if (forgotpasswordpayload.email.length != 0) {
-                                    var runfunc = false;
-                                    var tempforgotpasswordpayload = { ...forgotpasswordpayload };
-                                    tempforgotpasswordpayload.functype = forgetpasswordstage;
-                                    if (forgetpasswordstage == 'verify') {
-                                        if (tempforgotpasswordpayload.newpassword.length != 0 && tempforgotpasswordpayload.code.length != 0) {
-                                            if (tempforgotpasswordpayload.newpassword == tempforgotpasswordpayload.confirmnewpassword) {
-                                                runfunc = true;
-                                            } else {
-                                                NotificationManager.warning('', 'Passwords do not match');
-                                            }
-                                        } else {
-                                            NotificationManager.warning('', 'Please complete the missing fields');
-                                        }
-                                    } else {
-                                        runfunc = true;
-                                    }
-                                    if (runfunc) {
-                                        ForgetpasswordMutationContext.mutate(tempforgotpasswordpayload);
-                                    }
-                                } else {
-                                    NotificationManager.warning('', 'Please write your email');
-                                }
-                            }}
-                            type={'button'}
-                            disabled={ForgetpasswordMutationContext.isLoading == true ? true : false}
-                            style={{ width: '230px' }}
-                        >
-                            {ForgetpasswordMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
-                            {!ForgetpasswordMutationContext.isLoading && (
-                                <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '', textTransform: sectionproperties.login_btn_texttransform }}>
-                                    {forgetpasswordstage == 'verify'
-                                        ? langdetect == 'en'
-                                            ? 'Reset password'
-                                            : 'إعادة تعيين كلمة المرور'
-                                        : langdetect == 'en'
-                                        ? 'Send verification code'
-                                        : 'أرسل رمز التحقق'}
-                                </span>
-                            )}
-                        </button>
-                    </div>
-                </Modal.Footer>
-            </Modal>
-        </div>
-    );
-};
-export default Login;