tabexseriescomponents 0.2.1280 → 0.2.1281

package/srcbefore27-11/TabexComponents/StaticPages/Signup/CustomerInformationForm.jsx

@@ -1,1505 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import loginstyles from '../../../styles/staticpages/signup.module.css';
-import { CircularProgress } from 'react-cssfx-loading';
-import TextareaAutosize from 'react-textarea-autosize';
-import { css } from 'glamor';
-import { defaultstyles, defaultstylestranslated, defaultstyleswhite, defaultstylestranslatedwhite, selectcustomStyles, selectcustomStylesTranslated } from '../../../StylesJS/Customstyles.js';
-import GoogleLogin from '../Login/GoogleLoginButton.jsx';
-import FacebookLoginButton from '../Login/FacebookLoginButton.jsx';
-import PhoneInput from 'react-phone-input-2';
-import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
-import { Modal } from 'react-bootstrap';
-const Select = React.lazy(() => import('react-select'));
-const CustomerInformationForm = (props) => {
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const routingcountext = props.actions.routingcountext;
-    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
-    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
-    const fetchinstitutecustomerinfosignupQueryContext = props.actions.fetchinstitutecustomerinfosignupQueryContext;
-    const fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
-    const fetchTabexStatesQueryContext = props.actions.fetchTabexStatesQueryContext;
-    const fetchTabexCitiesQueryContext = props.actions.fetchTabexCitiesQueryContext;
-    const FetchTabexStatesPayloadobjContext = props.actions.FetchTabexStatesPayloadobjContext;
-    const setFetchTabexStatesPayloadobjContext = props.actions.setFetchTabexStatesPayloadobjContext;
-    const CustomerSignUpMutationContext = props.actions.CustomerSignUpMutationContext;
-    const fetchAuthorizationQueryContext = props.actions.fetchAuthorizationQueryContext;
-    const authdetailsContext = props.actions.authdetailsContext;
-    const instapikey = props.actions.instapikey;
-    const templatepropcontext = props.actions.templatepropcontext;
-    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
-    const NotificationManager = props.actions.NotificationManager;
-    const actions = props.actions;
-    const [customeraddressrequierd, setcustomeraddressrequierd] = useState(fetchAuthorizationQueryContext?.data?.data?.instinfo?.customerAddressrequiered);
-    const [customervalidateemail, setcustomervalidateemail] = useState(fetchAuthorizationQueryContext?.data?.data?.instinfo?.customervalidateemail);
-    const [customervalidatephonenumber, setcustomervalidatephonenumber] = useState(fetchAuthorizationQueryContext?.data?.data?.instinfo?.customervalidatephonenumber);
-    const [validatephonenumbermodal, setvalidatephonenumbermodal] = useState(false);
-    const [validateemailmodal, setvalidateemailmodal] = useState(false);
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [dataloaded, setdataloaded] = useState(false);
-    const [validatephonenumberpayload, setvalidatephonenumberpayload] = useState({
-        phonenumber: '',
-        code: '',
-        step: 'sendcode',
-        isvalidated: false,
-    });
-    const [validateemailpayload, setvalidateemailpayload] = useState({
-        email: '',
-        code: '',
-        step: 'sendcode',
-        isvalidated: props.srcfromprops == 'accountinfo' ? true : false,
-    });
-    const [payloadobj, setpayloadobj] = useState({
-        instapikey: instapikey,
-        name: '',
-        email: '',
-        mobile: '',
-        password: '',
-        password2: '',
-        shippingaddress: '',
-        addedsourcetype: 'Webapp',
-        instsignupformvalues: [],
-        countryid: '',
-        stateid: '',
-        cityid: '',
-        countrydialcode: '',
-    });
-    const [showpassword, setshowpassword] = useState(false);
-    const [showpassword2, setshowpassword2] = useState(false);
-    const [waitingpage, setwaitingpage] = useState(false);
-
-    useEffect(() => {
-        if (fetchAuthorizationQueryContext.isSuccess) {
-            setcustomeraddressrequierd(fetchAuthorizationQueryContext?.data?.data?.instinfo?.customerAddressrequiered);
-            setcustomervalidateemail(fetchAuthorizationQueryContext?.data?.data?.instinfo?.customervalidateemail);
-            setcustomervalidatephonenumber(fetchAuthorizationQueryContext?.data?.data?.instinfo?.customervalidatephonenumber);
-        }
-    }, [fetchAuthorizationQueryContext.isSuccess]);
-    useEffect(() => {
-        var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
-        tempFetchQueriesEngineContext.institutecustomerinfosignup = true;
-        tempFetchQueriesEngineContext.fetchtabexcountries = true;
-        setFetchQueriesEngineContext({ ...tempFetchQueriesEngineContext });
-
-        var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
-    }, []);
-    useEffect(() => {
-        if (props.sectionpropertiesprops != undefined && props.sectionpropertiesprops.length != 0) {
-            setsectionproperties({ ...props.sectionpropertiesprops });
-        }
-    }, [props.sectionpropertiesprops]);
-
-    useEffect(() => {
-        if (fetchinstitutecustomerinfosignupQueryContext.isSuccess) {
-            if (authdetailsContext.loggedin == true) {
-                var tempcustomerinfoobj = { ...fetchinstitutecustomerinfosignupQueryContext.data.data.customerinfo };
-                setpayloadobj({ ...tempcustomerinfoobj });
-                var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
-                if (tempcustomerinfoobj.countryid != null) {
-                    tempFetchTabexStatesPayloadobjContext.country_id = tempcustomerinfoobj.countryid;
-                }
-                if (tempcustomerinfoobj.stateid != null) {
-                    tempFetchTabexStatesPayloadobjContext.state_id = tempcustomerinfoobj.stateid;
-                }
-                setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
-                setdataloaded(true);
-            } else {
-                var tempcustomerinfoobj = { ...payloadobj };
-                if (Array.isArray(fetchinstitutecustomerinfosignupQueryContext?.data?.data?.instsignupformvalues)) {
-                    tempcustomerinfoobj.instsignupformvalues = [...fetchinstitutecustomerinfosignupQueryContext.data.data.instsignupformvalues];
-                }
-                setpayloadobj({ ...tempcustomerinfoobj });
-                setdataloaded(true);
-            }
-        }
-    }, [fetchinstitutecustomerinfosignupQueryContext.isSuccess, fetchinstitutecustomerinfosignupQueryContext.data, authdetailsContext]);
-    const payloadobjchange = (key, value) => {
-        var temppayloadobj = { ...payloadobj };
-        temppayloadobj[key] = value;
-        setpayloadobj({ ...temppayloadobj });
-    };
-    const validateEmailstring = (email) => {
-        return String(email)
-            .toLowerCase()
-            .match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
-    };
-    const verifypayload = () => {
-        var iscompleted = false;
-        var isshippingaddresscompleted = false;
-        var passwordvalidation = false;
-        // password
-        if (authdetailsContext.loggedin == false) {
-            if (authdetailsContext?.instinfo?.ispasswordrequired_signup == 1) {
-                if (payloadobj.password.length != 0) {
-                    if (payloadobj.password == payloadobj.password2) {
-                        passwordvalidation = true;
-                    }
-                }
-            } else {
-                passwordvalidation = true;
-            }
-        } else if (authdetailsContext.loggedin == true) {
-            if (payloadobj.password.length != 0) {
-                if (payloadobj.password == payloadobj.password2) {
-                    passwordvalidation = true;
-                }
-            } else {
-                passwordvalidation = true;
-            }
-        }
-        if (passwordvalidation == false) {
-            NotificationManager.warning('', lang.passwordsdontmatch);
-        }
-        // address
-        if (customeraddressrequierd == 1) {
-            if (payloadobj.countryid.length != 0 && payloadobj.stateid.length != 0 && payloadobj.cityid.length != 0 && payloadobj.shippingaddress.length != 0) {
-                isshippingaddresscompleted = true;
-            }
-        } else {
-            isshippingaddresscompleted = true;
-        }
-        // if (authdetailsContext?.instinfo?.contactinfo.instid == '652e3ae969122') {
-        //     if (payloadobj.name.length < 3) {
-        //         NotificationManager.warning('', langdetect == 'en' ? 'Please Write your Full Name' : 'من فضلك اكتب اسمك كاملاً');
-        //     }
-        //     if (payloadobj.countrydialcode == '20' && payloadobj.mobile.length < 10) {
-        //         NotificationManager.warning('', langdetect == 'en' ? 'Please Write valid phone number' : 'من فضلك اكتب رقم تليفون صحيح');
-        //     }
-        // }
-
-        if (validateEmailstring(payloadobj.email)) {
-            if (payloadobj.email.length != 0 && payloadobj.name.length != 0 && payloadobj.mobile.length != 0 && passwordvalidation == true) {
-                if (isshippingaddresscompleted) {
-                    var signupformismissing = true;
-                    payloadobj.instsignupformvalues.forEach(function (arrayItem) {
-                        if (arrayItem.optional == 1) {
-                            if (arrayItem.customersignupvalue == undefined || arrayItem.customersignupvalue.length == 0) {
-                                signupformismissing = false;
-                            }
-                        }
-                    });
-                    if (signupformismissing) {
-                        iscompleted = true;
-                    } else {
-                        iscompleted = false;
-                        NotificationManager.warning('', lang.completerequiredfields);
-                    }
-                } else {
-                    iscompleted = false;
-                    NotificationManager.warning('', lang.pleasecompleteaddressmissingfields);
-                }
-            } else {
-                iscompleted = false;
-                NotificationManager.warning('', lang.fillthemissingfields);
-            }
-        } else if (fetchAuthorizationQueryContext?.data?.data?.instinfo?.customerEmailrequiered == 0) {
-            if (payloadobj.name.length != 0 && payloadobj.mobile.length != 0 && passwordvalidation == true) {
-                if (isshippingaddresscompleted) {
-                    var signupformismissing = true;
-                    payloadobj.instsignupformvalues.forEach(function (arrayItem) {
-                        if (arrayItem.optional == 1) {
-                            if (arrayItem.customersignupvalue == undefined || arrayItem.customersignupvalue.length == 0) {
-                                signupformismissing = false;
-                            }
-                        }
-                    });
-                    if (signupformismissing) {
-                        iscompleted = true;
-                    } else {
-                        iscompleted = false;
-                        NotificationManager.warning('', lang.completerequiredfields);
-                    }
-                } else {
-                    iscompleted = false;
-                    NotificationManager.warning('', lang.pleasecompleteaddressmissingfields);
-                }
-            } else {
-                iscompleted = false;
-                NotificationManager.warning('', lang.fillthemissingfields);
-            }
-        } else {
-            iscompleted = false;
-            NotificationManager.warning('', lang.writevalidemail);
-        }
-        return iscompleted;
-    };
-    const signupbuttonfunc = () => {
-        if (verifypayload() == true) {
-            var temppayloadobj = { ...payloadobj };
-            if (authdetailsContext.loggedin == true) {
-                temppayloadobj.functype = 'edit';
-            } else {
-                temppayloadobj.functype = 'add';
-            }
-            temppayloadobj.addedsourcetype = 'Webapp';
-            temppayloadobj.instapikey = instapikey;
-            if (sectionproperties.redirectsaftersignup != 'Home') {
-                setwaitingpage(true);
-            }
-            CustomerSignUpMutationContext.mutate(temppayloadobj);
-        }
-    };
-
-    const formstyles = {
-        loginbtn: css({
-            background: templatepropcontext.primarycolor,
-            color: sectionproperties.generalbtn_textColor,
-            borderRadius: sectionproperties.generalbtn_borderradius + 'px',
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            lineHeight: sectionproperties.generalbtn_fontsize + 'px',
-            textTransform: sectionproperties.generalbtn_texttransform,
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            ':hover': {
-                background: templatepropcontext.secondarycolor,
-            },
-        }),
-        btnstyles: css({
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            textTransform: sectionproperties.generalbtn_texttransform,
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            color: sectionproperties.generalbtn_textColor,
-            background: sectionproperties.generalbtn_bgColor,
-            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
-            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
-            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
-            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.generalbtn_bgColoronhover,
-                color: sectionproperties.generalbtn_textColoronhover,
-            },
-        }),
-        signupbtn: css({
-            width: sectionproperties.signup_btn_width + 'px',
-            height: sectionproperties.signup_btn_height + 'px',
-            borderRadius: sectionproperties.signup_btn_borderBottomLeftRadius + 'px',
-            textTransform: sectionproperties.signup_btn_texttransform,
-            fontSize: sectionproperties.signup_btn_fontSize + 'px',
-            color: sectionproperties.signup_btn_color,
-            fontWeight: sectionproperties.signup_btn_fontweight,
-            background: sectionproperties.signup_btnbgcolor_transparent == 'Transparent' ? 'transparent' : sectionproperties.signup_btnbgcolor,
-            border: sectionproperties.signup_btn_borderwidth + 'px solid ' + sectionproperties.signupbtn_bordercolor,
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.signup_btnbgcoloroonhovertransparent == 'Transparent' ? 'transparent' : sectionproperties.signup_btnbgcoloroonhover,
-                color: sectionproperties.signup_btn_coloronhover,
-                borderColor: sectionproperties.signup_btn_coloronhover,
-            },
-        }),
-        input_label_name: css({
-            color: sectionproperties.form_labelcolor,
-            textTransform: sectionproperties.form_labeltexttransform,
-            fontWeight: sectionproperties.form_labelfontweight,
-            fontSize: sectionproperties.form_labelfontsize + 'px',
-            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
-        }),
-        form_control: css({
-            background: 'transparent',
-            color: sectionproperties.inputfieldcolor,
-            fontSize: sectionproperties.inputfieldfontsize + 'px',
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            display: 'block',
-            width: '100%',
-            // height: '35px',
-            padding: '0 10px',
-            transition: '.3s',
-            border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
-            borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
-            borderRadius: sectionproperties.inputfieldborderradius + 'px',
-            height: sectionproperties.inputfieldheight + 'px',
-            background: sectionproperties.input_bgcolor,
-            color: sectionproperties.inputfieldcolor,
-            ':focus': {
-                borderColor: sectionproperties.inputfeildbordercoloronfocus,
-            },
-            ':focus .login_input_icon': {
-                color: sectionproperties.inputfeildbordercoloronfocus,
-            },
-        }),
-        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 + ')',
-        }),
-        terms: css({
-            ':hover': {
-                transition: '.3s',
-                color: sectionproperties.termsandconditionsecondarycolor,
-            },
-        }),
-    };
-
-    const PersonalInformation = () => {
-        return (
-            <div className="row m-0 w-100">
-                <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                    <label className={`${formstyles.input_label_name}` + '  d-flex align-items-start '}>
-                        {lang.name} {props.srcfromprops == 'signup' && <span class="text-danger ml-1 mr-1">*</span>}
-                    </label>
-                    <input
-                        type="text"
-                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                        value={payloadobj.name}
-                        onChange={(event) => {
-                            payloadobjchange('name', event.target.value);
-                        }}
-                        style={{
-                            background: sectionproperties.input_bgcolor,
-                        }}
-                    />
-                </div>
-
-                <div
-                    className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0 flex-column' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0 flex-column'}
-                    style={{
-                        display:
-                            authdetailsContext?.instinfo?.customerEmailrequiered == 1
-                                ? 'flex'
-                                : sectionproperties.showemail == 'Hide' && authdetailsContext?.instinfo?.customerEmailrequiered == 0
-                                ? 'none'
-                                : authdetailsContext?.instinfo?.contactinfo.instid == '6808c6295b598'
-                                ? 'none'
-                                : 'flex',
-                    }}
-                >
-                    <label className={`${formstyles.input_label_name}` + '  d-flex align-items-start '}>
-                        {lang.email} {props.srcfromprops == 'signup' && authdetailsContext?.instinfo?.customerEmailrequiered == 1 && <span class="text-danger ml-1 mr-1">*</span>}
-                    </label>
-                    {sectionproperties.showemaildisclaimer == 'Show' && <sup>{langdetect == 'en' ? sectionproperties.emaildisclaimeren : sectionproperties.emaildisclaimerar}</sup>}
-                    <input
-                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                        type="text"
-                        textplaceholder=""
-                        value={payloadobj.email}
-                        disabled={validateemailpayload.isvalidated}
-                        onChange={(event) => {
-                            payloadobjchange('email', event.target.value);
-                        }}
-                        style={{
-                            background: sectionproperties.input_bgcolor,
-                        }}
-                    />
-                </div>
-                <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                    <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>
-                        {lang.phonenumber}
-                        {props.srcfromprops == 'signup' && <span class="text-danger ml-1 mr-1">*</span>}
-                    </label>
-                    {/* <input
-                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                        type="text"
-                        textplaceholder=""
-                        value={payloadobj.mobile}
-                        onChange={(event) => {
-                            payloadobjchange('mobile', event.target.value);
-                        }}
-                    /> */}
-                    <PhoneInput
-                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                        country={sectionproperties.countrycode == 'SA' ? 'sa' : sectionproperties.countrycode == 'QA' ? 'qa' : 'eg'}
-                        enableSearch={true}
-                        autoFormat={true}
-                        value={payloadobj.mobile}
-                        inputStyle={{
-                            color: sectionproperties.inputfieldcolor,
-                        }}
-                        onChange={(event, country) => {
-                            var temp = { ...payloadobj };
-                            temp.mobile = event;
-                            temp.countrydialcode = country.dialCode;
-                            setpayloadobj({ ...temp });
-                            // payloadobjchange('mobile', event);
-
-                            // alert(JSON.stringify(country));
-                            // alert(JSON.stringify(country));
-                        }}
-                        style={{ direction: 'ltr', color: sectionproperties.inputfieldcolor }}
-                    />
-                </div>
-            </div>
-        );
-    };
-    const Address = () => {
-        return (
-            <div
-                className="row m-0 w-100"
-                style={{
-                    display: sectionproperties.hidecountrystatecity == 'Show' && sectionproperties.hideaddress == 'Show' ? 'flex' : 'none',
-                }}
-            >
-                {sectionproperties.hidecountrystatecity == 'Show' && (
-                    <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                        <div class={sectionproperties.inputfieldcolor == '#ffffff' ? 'col-lg-12 p-0 selectwhite' : 'col-lg-12 p-0'}>
-                            <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>
-                                {lang.country}
-                                {customeraddressrequierd == 1 && (
-                                    <span class="ml-1 mr-1" style={{ color: 'red' }}>
-                                        *
-                                    </span>
-                                )}
-                            </label>
-                            {fetchTabexCountriesQueryContext.isFetching && (
-                                <div className="col-lg-4 col-md-12 col-sm-12 mb-3 p-sm-0 d-flex justify-content-center align-items-center">
-                                    <CircularProgress color="black" width="20px" height="20px" duration="1s" />
-                                </div>
-                            )}
-                            {!fetchTabexCountriesQueryContext.isFetching && fetchTabexCountriesQueryContext.isSuccess && (
-                                <Select
-                                    placeholder={''}
-                                    options={fetchTabexCountriesQueryContext.data.data.countries}
-                                    getOptionLabel={(option) => {
-                                        var crname = '';
-                                        if (langdetect == 'en') {
-                                            crname = option.name;
-                                        } else if (langdetect == 'ar') {
-                                            if (option.name_ar != null) {
-                                                crname = option.name_ar;
-                                            } else {
-                                                crname = option.name;
-                                            }
-                                        }
-                                        return crname;
-                                    }}
-                                    getOptionValue={(option) => option.id}
-                                    autocomplete="new-password"
-                                    value={fetchTabexCountriesQueryContext.data.data.countries.filter((option) => option.id == payloadobj.countryid)}
-                                    onChange={(option) => {
-                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
-                                        tempFetchTabexStatesPayloadobjContext.functype = 'states';
-                                        tempFetchTabexStatesPayloadobjContext.country_id = option.id;
-                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
-                                        payloadobjchange('countryid', option.id);
-                                    }}
-                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
-                                    isSearchable={true}
-                                />
-                            )}
-                            {/* {!fetchTabexCountriesQueryContext.isFetching && fetchTabexCountriesQueryContext.isSuccess && sectionproperties.inputfieldcolor == '#ffffff' && (
-                                <Select
-                                    options={fetchTabexCountriesQueryContext.data.data.countries}
-                                    getOptionLabel={(option) => {
-                                        var crname = '';
-                                        if (langdetect == 'en') {
-                                            crname = option.name;
-                                        } else if (langdetect == 'ar') {
-                                            if (option.name_ar != null) {
-                                                crname = option.name_ar;
-                                            } else {
-                                                crname = option.name;
-                                            }
-                                        }
-                                        return crname;
-                                    }}
-                                    getOptionValue={(option) => option.id}
-                                    autocomplete="new-password"
-                                    value={fetchTabexCountriesQueryContext.data.data.countries.filter((option) => option.id == payloadobj.countryid)}
-                                    onChange={(option) => {
-                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
-                                        tempFetchTabexStatesPayloadobjContext.functype = 'states';
-                                        tempFetchTabexStatesPayloadobjContext.country_id = option.id;
-                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
-                                        payloadobjchange('countryid', option.id);
-                                    }}
-                                    styles={langdetect == 'en' ? defaultstyleswhite : defaultstylestranslatedwhite}
-                                    isSearchable={true}
-                                />
-                            )} */}
-                        </div>
-                    </div>
-                )}
-                {sectionproperties.hidecountrystatecity == 'Show' && (
-                    <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                        <div class={sectionproperties.inputfieldcolor == '#ffffff' ? 'col-lg-12 p-0 selectwhite' : 'col-lg-12 p-0'}>
-                            <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>
-                                {lang.choosestategov}{' '}
-                                {customeraddressrequierd == 1 && (
-                                    <span class="ml-1 mr-1" style={{ color: 'red' }}>
-                                        *
-                                    </span>
-                                )}
-                            </label>
-                            {fetchTabexStatesQueryContext.isFetching && (
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0 d-flex justify-content-center align-items-center">
-                                    <CircularProgress color="black" width="20px" height="20px" duration="1s" />
-                                </div>
-                            )}
-                            {FetchTabexStatesPayloadobjContext.country_id == '' && (
-                                <Select styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated} placeholder={''} isSearchable={true} />
-                            )}
-                            {!fetchTabexStatesQueryContext.isFetching && fetchTabexStatesQueryContext.isSuccess && (
-                                <Select
-                                    options={fetchTabexStatesQueryContext.data.data.states}
-                                    getOptionLabel={(option) => {
-                                        var crname = '';
-                                        if (langdetect == 'en') {
-                                            crname = option.name;
-                                        } else if (langdetect == 'ar') {
-                                            if (option.name_ar != null) {
-                                                crname = option.name_ar;
-                                            } else {
-                                                crname = option.name;
-                                            }
-                                        }
-                                        return crname;
-                                    }}
-                                    getOptionValue={(option) => option.id}
-                                    autocomplete="new-password"
-                                    value={fetchTabexStatesQueryContext.data.data.states.filter((option) => option.id == payloadobj.stateid)}
-                                    onChange={(option) => {
-                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
-                                        tempFetchTabexStatesPayloadobjContext.functype = 'cities';
-                                        tempFetchTabexStatesPayloadobjContext.state_id = option.id;
-                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
-                                        payloadobjchange('stateid', option.id);
-                                    }}
-                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
-                                    isSearchable={true}
-                                    placeholder={''}
-                                />
-                            )}
-                            {/* {!fetchTabexStatesQueryContext.isFetching && fetchTabexStatesQueryContext.isSuccess && sectionproperties.inputfieldcolor == '#ffffff' && (
-                                <Select
-                                    options={fetchTabexStatesQueryContext.data.data.states}
-                                    getOptionLabel={(option) => {
-                                        var crname = '';
-                                        if (langdetect == 'en') {
-                                            crname = option.name;
-                                        } else if (langdetect == 'ar') {
-                                            if (option.name_ar != null) {
-                                                crname = option.name_ar;
-                                            } else {
-                                                crname = option.name;
-                                            }
-                                        }
-                                        return crname;
-                                    }}
-                                    getOptionValue={(option) => option.id}
-                                    autocomplete="new-password"
-                                    value={fetchTabexStatesQueryContext.data.data.states.filter((option) => option.id == payloadobj.stateid)}
-                                    onChange={(option) => {
-                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
-                                        tempFetchTabexStatesPayloadobjContext.functype = 'cities';
-                                        tempFetchTabexStatesPayloadobjContext.state_id = option.id;
-                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
-                                        payloadobjchange('stateid', option.id);
-                                    }}
-                                    styles={langdetect == 'en' ? defaultstyleswhite : defaultstylestranslatedwhite}
-                                    placeholder={lang.choosestategov}
-                                    isSearchable={true}
-                                />
-                            )} */}
-                        </div>
-                    </div>
-                )}
-
-                {sectionproperties.hidecountrystatecity == 'Show' && (
-                    <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                        <div class={sectionproperties.inputfieldcolor == '#ffffff' ? 'col-lg-12 p-0 selectwhite' : 'col-lg-12 p-0'}>
-                            <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>
-                                {lang.city}
-                                {customeraddressrequierd == 1 && (
-                                    <span class="ml-1 mr-1" style={{ color: 'red' }}>
-                                        *
-                                    </span>
-                                )}
-                            </label>
-                            {fetchTabexCitiesQueryContext.isFetching && (
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0 d-flex justify-content-center align-items-center">
-                                    <CircularProgress color="black" width="20px" height="20px" duration="1s" />
-                                </div>
-                            )}
-                            {FetchTabexStatesPayloadobjContext.country_id == '' && (
-                                <Select placeholder={''} styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated} isSearchable={true} />
-                            )}
-                            {!fetchTabexCitiesQueryContext.isFetching && fetchTabexCitiesQueryContext.isSuccess && (
-                                <Select
-                                    options={fetchTabexCitiesQueryContext.data.data.cities}
-                                    getOptionLabel={(option) => {
-                                        var crname = '';
-                                        if (langdetect == 'en') {
-                                            crname = option.name;
-                                        } else if (langdetect == 'ar') {
-                                            if (option.name_ar != null) {
-                                                crname = option.name_ar;
-                                            } else {
-                                                crname = option.name;
-                                            }
-                                        }
-                                        return crname;
-                                    }}
-                                    getOptionValue={(option) => option.id}
-                                    autocomplete="new-password"
-                                    value={fetchTabexCitiesQueryContext.data.data.cities.filter((option) => option.id == payloadobj.cityid)}
-                                    onChange={(option) => {
-                                        payloadobjchange('cityid', option.id);
-                                    }}
-                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
-                                    placeholder={''}
-                                    isSearchable={true}
-                                />
-                            )}
-                            {/* {!fetchTabexCitiesQueryContext.isFetching && fetchTabexCitiesQueryContext.isSuccess && sectionproperties.inputfieldcolor == '#ffffff' && (
-                                <Select
-                                    options={fetchTabexCitiesQueryContext.data.data.cities}
-                                    getOptionLabel={(option) => {
-                                        var crname = '';
-                                        if (langdetect == 'en') {
-                                            crname = option.name;
-                                        } else if (langdetect == 'ar') {
-                                            if (option.name_ar != null) {
-                                                crname = option.name_ar;
-                                            } else {
-                                                crname = option.name;
-                                            }
-                                        }
-                                        return crname;
-                                    }}
-                                    getOptionValue={(option) => option.id}
-                                    autocomplete="new-password"
-                                    value={fetchTabexCitiesQueryContext.data.data.cities.filter((option) => option.id == payloadobj.cityid)}
-                                    onChange={(option) => {
-                                        payloadobjchange('cityid', option.id);
-                                    }}
-                                    styles={langdetect == 'en' ? defaultstyleswhite : defaultstylestranslatedwhite}
-                                    placeholder={lang.choosecity}
-                                    isSearchable={true}
-                                />
-                            )} */}
-                        </div>
-                    </div>
-                )}
-                {sectionproperties.hideaddress == 'Show' && (
-                    <div className={'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                        <label className={`${formstyles.input_label_name}` + ' mb-1  d-flex align-items-start '}>
-                            {lang.address}{' '}
-                            {customeraddressrequierd == 1 && (
-                                <span class="ml-1 mr-1" style={{ color: 'red' }}>
-                                    *
-                                </span>
-                            )}
-                        </label>
-                        <div className={loginstyles.wrap_input100}>
-                            <TextareaAutosize
-                                type="text"
-                                className={`${loginstyles.form_control} ${formstyles.form_control}` + ' py-1 '}
-                                value={payloadobj.shippingaddress}
-                                textplaceholder=""
-                                onChange={(event) => {
-                                    payloadobjchange('shippingaddress', event.target.value);
-                                }}
-                                style={{ resize: 'none', background: sectionproperties.input_bgcolor }}
-                            />
-                            <span className={loginstyles.login_input_focus}></span>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    };
-    const Password = () => {
-        return (
-            <div className="row m-0 w-100">
-                <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-6 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                    <label className={`${formstyles.input_label_name}` + '  d-flex align-items-start '}>
-                        {lang.password}
-                        {props.srcfromprops == 'signup' && <span class="text-danger ml-1 mr-1">*</span>}
-                    </label>
-                    <input
-                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                        type={'password'}
-                        autocomplete="new-password"
-                        textplaceholder=""
-                        value={payloadobj.password}
-                        onChange={(event) => {
-                            payloadobjchange('password', event.target.value);
-                        }}
-                        style={{
-                            background: sectionproperties.input_bgcolor,
-                        }}
-                    />
-                    {/* <div
-                        onClick={() => {
-                            setshowpassword(!showpassword);
-                        }}
-                        className={langdetect == 'en' ? loginstyles.showpassword_input_icon : loginstyles.showpassword_input_icontrans}
-                    >
-                        <i class="h-100 allcentered">
-                            {showpassword == true && <AiOutlineEye size={18} />}
-                            {showpassword == false && <AiOutlineEyeInvisible size={18} />}
-                        </i>
-                    </div> */}
-                </div>
-                <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-6 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                    <label className={`${formstyles.input_label_name}` + '  d-flex align-items-start '}>
-                        {lang.confirmpassword}
-                        {props.srcfromprops == 'signup' && <span class="text-danger ml-1 mr-1">*</span>}
-                    </label>
-                    <input
-                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                        type="password"
-                        autocomplete="new-password"
-                        textplaceholder=""
-                        value={payloadobj.password2}
-                        onChange={(event) => {
-                            payloadobjchange('password2', event.target.value);
-                        }}
-                        style={{
-                            background: sectionproperties.input_bgcolor,
-                        }}
-                    />
-                </div>
-                {sectionproperties.showpassworddisclaimer == 'Show' && props.srcfromprops == 'signup' && (
-                    <div class="col-lg-12 text-start text-danger">
-                        <p style={{ fontSize: 14 }}>{langdetect == 'en' ? " Password shouldn't be lessthan 8 characters" : 'الرقم السرى لا يقل عن 8 حروف او ارقام'}</p>
-                    </div>
-                )}
-            </div>
-        );
-    };
-    const Otherinformation = () => {
-        return (
-            <div className="row m-0 w-100">
-                {payloadobj.instsignupformvalues.length != 0 && (
-                    <>
-                        {payloadobj.instsignupformvalues.map((item, index) => {
-                            return (
-                                <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-6 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0'}>
-                                    {item.inputtype != 'checkbox' && (
-                                        <label className={formstyles.input_label_name + ' d-flex align-items-start '}>
-                                            {langdetect == 'en' ? item.inputname_en : item.inputname_ar} <span class="text-danger ml-1 mr-1">{item.optional == 1 ? '*' : ''}</span>
-                                        </label>
-                                    )}
-                                    <div className={loginstyles.wrap_input100}>
-                                        {item.inputtype == 'input' && (
-                                            <input
-                                                className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                                                type="text"
-                                                value={item.customersignupvalue}
-                                                textplaceholder=""
-                                                onChange={(event) => {
-                                                    var temppayloadobj = { ...payloadobj };
-                                                    temppayloadobj.instsignupformvalues[index].customersignupvalue = event.target.value;
-                                                    setpayloadobj({ ...temppayloadobj });
-                                                }}
-                                                style={{
-                                                    background: sectionproperties.input_bgcolor,
-                                                }}
-                                                readOnly={authdetailsContext?.instinfo?.contactinfo.instid == '68527dfef348b' ? true : false}
-                                            />
-                                        )}
-                                        {item.inputtype == 'checkbox' && (
-                                            <label
-                                                className={
-                                                    langdetect == 'en'
-                                                        ? `${loginstyles.checkbox} ${formstyles.checkbox} ` + ' d-flex mb-0 '
-                                                        : `${loginstyles.checkbox} ${loginstyles.checkboxtranslated}` + ' d-flex mb-0 '
-                                                }
-                                                for="codcheckbox"
-                                            >
-                                                <input
-                                                    id={'codcheckbox'}
-                                                    type="checkbox"
-                                                    className={formstyles.checkboxinputstyles + ' mt-auto mb-auto '}
-                                                    checked={item.customersignupvalue == 1 ? true : false}
-                                                    onChange={() => {
-                                                        var temppayloadobj = { ...payloadobj };
-                                                        if (temppayloadobj.instsignupformvalues[index].customersignupvalue == 1) {
-                                                            temppayloadobj.instsignupformvalues[index].customersignupvalue = 0;
-                                                        } else {
-                                                            temppayloadobj.instsignupformvalues[index].customersignupvalue = 1;
-                                                        }
-                                                        setpayloadobj({ ...temppayloadobj });
-                                                    }}
-                                                />
-                                                <svg viewBox="0 0 21 21" className={formstyles.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.input_label_name + ' ml-2 cursor-pointer wordbreak mr-2'} style={{}}>
-                                                    {langdetect == 'en' ? item.inputname_en : item.inputname_ar} <span class="text-danger ml-1 mr-1">{item.optional == 1 ? '' : '*'}</span>
-                                                </p>
-                                            </label>
-                                        )}
-                                        {item.inputtype == 'selectbox' && (
-                                            <select
-                                                className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                                                value={item.customersignupvalue}
-                                                textplaceholder=""
-                                                onChange={(event) => {
-                                                    var temppayloadobj = { ...payloadobj };
-                                                    temppayloadobj.instsignupformvalues[index].customersignupvalue = event.target.value;
-                                                    setpayloadobj({ ...temppayloadobj });
-                                                }}
-                                            >
-                                                <option value={''}>{langdetect == 'en' ? 'Choose' : 'إختر'}</option>
-                                                {JSON.parse(item.selectboxvalues).map((selectboxitem, selectboxindex) => {
-                                                    return <option value={selectboxitem.optionname_en}>{langdetect == 'en' ? selectboxitem.optionname_en : selectboxitem.optionname_ar}</option>;
-                                                })}
-                                            </select>
-                                        )}
-                                        {item.inputtype == 'textarea' && (
-                                            <TextareaAutosize
-                                                type="text"
-                                                className={`${loginstyles.form_control} ${formstyles.form_control}`}
-                                                value={item.customersignupvalue}
-                                                textplaceholder=""
-                                                onChange={(event) => {
-                                                    var temppayloadobj = { ...payloadobj };
-                                                    temppayloadobj.instsignupformvalues[index].customersignupvalue = event.target.value;
-                                                    setpayloadobj({ ...temppayloadobj });
-                                                }}
-                                                style={{
-                                                    resize: 'none',
-                                                    paddingTop: authdetailsContext?.instinfo?.contactinfo.instid == '68527dfef348b' ? 10 : 0,
-                                                    paddingLeft: authdetailsContext?.instinfo?.contactinfo.instid == '68527dfef348b' ? 20 : 0,
-                                                    paddingRight: authdetailsContext?.instinfo?.contactinfo.instid == '68527dfef348b' ? 20 : 0,
-                                                }}
-                                                disabled={authdetailsContext?.instinfo?.contactinfo.instid == '68527dfef348b' ? true : false}
-                                            />
-                                        )}
-                                        <span className={loginstyles.login_input_focus}></span>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </>
-                )}
-            </div>
-        );
-    };
-    const SignUpButtonContent = () => {
-        return (
-            <button
-                className={`${formstyles.signupbtn}` + ' d-flex align-items-center justify-content-center '}
-                disabled={CustomerSignUpMutationContext.isLoading ? true : false}
-                onClick={() => {
-                    if (verifypayload() == true) {
-                        var isEmailOTP_Validated = false;
-                        var isPhoneNumberOTP_Validated = false;
-                        if (customervalidateemail == 1) {
-                            if (validateemailpayload.isvalidated) {
-                                isEmailOTP_Validated = true;
-                            } else {
-                                isEmailOTP_Validated = false;
-                                setvalidateemailmodal(true);
-                            }
-                        } else {
-                            isEmailOTP_Validated = true;
-                        }
-                        if (customervalidatephonenumber == 1) {
-                            if (validatephonenumberpayload.isvalidated) {
-                                isPhoneNumberOTP_Validated = true;
-                            } else {
-                                isPhoneNumberOTP_Validated = false;
-                                setvalidatephonenumbermodal(true);
-                            }
-                        } else {
-                            isPhoneNumberOTP_Validated = true;
-                        }
-                        if (isPhoneNumberOTP_Validated && isEmailOTP_Validated) {
-                            signupbuttonfunc();
-                        }
-                    }
-                }}
-            >
-                {CustomerSignUpMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
-
-                {!CustomerSignUpMutationContext.isLoading && (
-                    <>
-                        {authdetailsContext.loggedin != true && (
-                            <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{langdetect == 'en' ? sectionproperties.signupbtn_contenten : sectionproperties.signupbtn_contentar}</span>
-                        )}
-                        {authdetailsContext.loggedin == true && <span>{lang.update}</span>}
-                    </>
-                )}
-            </button>
-        );
-    };
-    return (
-        <div
-            className="row m-0 w-100 d-flex justify-content-center"
-            style={
-                {
-                    // heigh: '100%',
-                }
-            }
-        >
-            {!dataloaded && <CircularProgress color="black" width="20px" height="20px" duration="1s" />}
-            {dataloaded && props.srcfromprops == 'signup' && waitingpage == false && (
-                <div
-                    className="col-lg-12 p-0"
-                    style={{
-                        background: sectionproperties.formLeftbgColor,
-                    }}
-                >
-                    {PersonalInformation()}
-                    {Address()}
-                    {Otherinformation()}
-                    {sectionproperties.hidepassword == 'Show' && authdetailsContext?.instinfo?.ispasswordrequired_signup == 1 && Password()}
-                    {/* {Password()} */}
-                </div>
-            )}
-            {dataloaded && props.srcfromprops == 'accountinfo' && (
-                <div className="col-lg-12 p-0">
-                    <div className="row ml-0 mr-0 w-100">
-                        {sectionproperties.showsubscription == 'Show' && (
-                            <div className="col-lg-6  col-md-6 col-sm-12 mb-3">
-                                <div
-                                    style={{
-                                        background: sectionproperties.backgroundColor,
-                                        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                                        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                                        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                                        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                                    }}
-                                    className="px-2 py-3 flex-column"
-                                >
-                                    <p
-                                        class="m-0 p-0 allcentered "
-                                        style={{
-                                            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                            color: sectionproperties.sectionTitleColor,
-                                            fontWeight: sectionproperties.sectionTitleFontWeight,
-                                        }}
-                                    >
-                                        {langdetect == 'en' ? 'Subscribed at' : 'مشترك فى'}
-                                    </p>
-                                    <p
-                                        class="m-0 p-0 allcentered "
-                                        style={{
-                                            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                            color: sectionproperties.sectionTitleColor,
-                                            fontWeight: sectionproperties.sectionTitleFontWeight,
-                                        }}
-                                    >
-                                        {authdetailsContext?.customerinfo?.subscription_name}
-                                    </p>
-                                </div>
-                            </div>
-                        )}
-                        {sectionproperties.showsubscription == 'Show' && (
-                            <div className="col-lg-6 col-md-6 col-sm-12 mb-3">
-                                <div
-                                    style={{
-                                        background: sectionproperties.backgroundColor,
-                                        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                                        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                                        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                                        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                                    }}
-                                    className="px-2 py-3 allcentered flex-column"
-                                >
-                                    <p
-                                        class="m-0 p-0"
-                                        style={{
-                                            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                            color: sectionproperties.sectionTitleColor,
-                                            fontWeight: sectionproperties.sectionTitleFontWeight,
-                                        }}
-                                    >
-                                        {langdetect == 'en' ? 'Subscription ends on' : 'الإشتراك ينتهى فى'}
-                                    </p>
-                                    <p
-                                        class="m-0 p-0"
-                                        style={{
-                                            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                            color: sectionproperties.sectionTitleColor,
-                                            fontWeight: sectionproperties.sectionTitleFontWeight,
-                                        }}
-                                    >
-                                        {authdetailsContext?.customerinfo?.subscrption_enddate}
-                                    </p>
-                                </div>
-                            </div>
-                        )}
-                        <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-12 mb-3 p-0' : 'col-lg-12 p-0'}>
-                            <div
-                                style={{
-                                    background: sectionproperties.backgroundColor,
-                                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                                }}
-                                className={sectionproperties.cardstyletype == 'Style 1' ? 'p-2 w-100' : 'w-100'}
-                            >
-                                {sectionproperties.cardstyletype == 'Style 1' && (
-                                    <div className="row ml-0 mr-0">
-                                        <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-center">
-                                            <p
-                                                className="m-0 p-0"
-                                                style={{
-                                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                                    color: sectionproperties.sectionTitleColor,
-                                                    fontWeight: sectionproperties.sectionTitleFontWeight,
-                                                }}
-                                            >
-                                                {lang.personalinformation}
-                                            </p>
-                                        </div>
-                                        <div className="col-lg-12 p-0">
-                                            <hr className="mt-2 mb-3" />
-                                        </div>
-                                    </div>
-                                )}
-                                {PersonalInformation()}
-                            </div>
-                        </div>
-                        <div
-                            className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-12 mb-3 p-0' : 'col-lg-12 p-0'}
-                            style={{
-                                display: sectionproperties.hidecountrystatecity == 'Show' && sectionproperties.hideaddress == 'Show' ? 'flex' : 'none',
-                            }}
-                        >
-                            <div
-                                className={sectionproperties.cardstyletype == 'Style 1' ? 'p-2 w-100' : 'w-100'}
-                                style={{
-                                    background: sectionproperties.backgroundColor,
-                                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                                }}
-                            >
-                                {sectionproperties.cardstyletype == 'Style 1' && (
-                                    <div className="row ml-0 mr-0">
-                                        <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-center">
-                                            <p
-                                                className="m-0 p-0"
-                                                style={{
-                                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                                    color: sectionproperties.sectionTitleColor,
-                                                    fontWeight: sectionproperties.sectionTitleFontWeight,
-                                                }}
-                                            >
-                                                {lang.address}
-                                            </p>
-                                        </div>
-                                        <div className="col-lg-12 p-0">
-                                            <hr className="mt-2 mb-3" />
-                                        </div>
-                                    </div>
-                                )}
-                                {Address()}
-                            </div>
-                        </div>
-                        <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-12 mb-3 p-0' : 'col-lg-12 p-0'}>
-                            <div
-                                className={sectionproperties.cardstyletype == 'Style 1' ? 'p-2 w-100' : 'w-100'}
-                                style={{
-                                    background: sectionproperties.backgroundColor,
-                                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                                }}
-                            >
-                                {sectionproperties.cardstyletype == 'Style 1' && (
-                                    <div className="row ml-0 mr-0">
-                                        <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-center">
-                                            <p
-                                                className="m-0 p-0"
-                                                style={{
-                                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                                    color: sectionproperties.sectionTitleColor,
-                                                    fontWeight: sectionproperties.sectionTitleFontWeight,
-                                                }}
-                                            >
-                                                {lang.security}
-                                            </p>
-                                        </div>
-                                        <div className="col-lg-12 p-0">
-                                            <hr className="mt-2 mb-3" />
-                                        </div>
-                                    </div>
-                                )}
-                                <div className="row ml-0 mr-0">{Password()}</div>
-                            </div>
-                        </div>
-                        {payloadobj.instsignupformvalues.length != 0 && (
-                            <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-12 mb-3 p-0' : 'col-lg-12 p-0'}>
-                                <div
-                                    style={{
-                                        background: sectionproperties.backgroundColor,
-                                        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-                                        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-                                        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-                                        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-                                    }}
-                                    className={sectionproperties.cardstyletype == 'Style 1' ? 'p-2 w-100' : 'w-100'}
-                                >
-                                    <div className="row ml-0 mr-0">
-                                        <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-center">
-                                            <p
-                                                className="m-0 p-0"
-                                                style={{
-                                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                                    color: sectionproperties.sectionTitleColor,
-                                                    fontWeight: sectionproperties.sectionTitleFontWeight,
-                                                }}
-                                            >
-                                                {lang.otherinformation}
-                                            </p>
-                                        </div>
-                                        <div className="col-lg-12 p-0">
-                                            <hr className="mt-2 mb-3" />
-                                        </div>
-                                    </div>
-                                    <div className="row ml-0 mr-0">{Otherinformation()}</div>
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            )}
-            {sectionproperties.viewtermsandcondition == 'Show' && (
-                <div class="col-lg-12 allcentered">
-                    <p
-                        class="m-0 p-0"
-                        style={{
-                            fontSize: sectionproperties.termsandconditionfontsize + 'px',
-                            color: sectionproperties.termsandconditioncolor,
-                            fontWeight: 600,
-                        }}
-                    >
-                        {langdetect == 'en' ? sectionproperties.termsandconditiontext_en : sectionproperties.termsandconditiontext_ar}{' '}
-                        <span
-                            class={formstyles.terms + ' cursor-pointer '}
-                            onClick={() => {
-                                window.open(window.location.origin + '/policies', '_blank');
-                            }}
-                        >
-                            {langdetect == 'en' ? 'Terms & Conditions' : 'الشروط و الاحكام'}
-                        </span>
-                    </p>
-                </div>
-            )}
-            {waitingpage == false && (
-                <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-3">
-                    {authdetailsContext.loggedin == false && SignUpButtonContent()}
-                    {authdetailsContext.loggedin == true && sectionproperties.showupdatebtn == 'Show' && SignUpButtonContent()}
-                </div>
-            )}
-            {props.srcfromprops == 'signup' && waitingpage == false && (
-                <div className="row m-0 w-100">
-                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex d-md-none align-items-center justify-content-center mb-2">
-                        <div className="ml-1 mr-1">
-                            <FacebookLoginButton actions={actions} />
-                        </div>
-                        <div className="ml-1 mr-1">
-                            <GoogleLogin actions={actions} />
-                        </div>
-                    </div>
-                    <div className="col-lg-12 col-md-12 col-sm-12 d-none d-md-flex align-items-center justify-content-center mb-2">
-                        <div className="ml-1 mr-1">
-                            <FacebookLoginButton actions={actions} />
-                        </div>
-                    </div>
-                    <div className="col-lg-12 col-md-12 col-sm-12 d-none d-md-flex align-items-center justify-content-center mb-2">
-                        <div className="ml-1 mr-1">
-                            <GoogleLogin actions={actions} />
-                        </div>
-                    </div>
-                </div>
-            )}
-            {waitingpage == true && (
-                <div class="col-lg-12 allcentered my-5">
-                    <div class="row m-0 w-100">
-                        <div class="col-lg-12 allcentered">
-                            <p
-                                style={{
-                                    color: sectionproperties.waitingapprovalcolor,
-                                    fontSize: sectionproperties.waitingapprovalfontsize + 'px',
-                                }}
-                            >
-                                {langdetect == 'en' ? sectionproperties.waitingapprovaltest_en : sectionproperties.waitingapprovaltest_ar}
-                            </p>
-                        </div>
-                        <div class="col-lg-12 allcentered">
-                            <p
-                                style={{
-                                    color: sectionproperties.waitingapprovalcolor2,
-                                    fontSize: sectionproperties.waitingapprovalfontsize2 + 'px',
-                                }}
-                            >
-                                {langdetect == 'en' ? sectionproperties.waitingapprovaltest_en2 : sectionproperties.waitingapprovaltest_ar2}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            )}
-            <Modal show={validateemailmodal} onHide={() => setvalidateemailmodal(false)} centered size={'md'}>
-                <Modal.Body>
-                    <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={() => setvalidateemailmodal(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: '#000',
-                                        fontWeight: 600,
-                                    }}
-                                >
-                                    {langdetect == 'en' ? 'Validate Email' : 'التحقق من صحة البريد الإلكتروني'}
-                                </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={`${formstyles.logininputLabel}` + '  d-flex justify-content-start '}
-                                    style={{
-                                        color: '#000',
-                                    }}
-                                >
-                                    {langdetect == 'en' ? 'Email' : 'البريد الإلكترونى'}
-                                </label>
-                                <input
-                                    type="text"
-                                    className={`${formstyles.form_control}`}
-                                    value={payloadobj.email}
-                                    disabled={true}
-                                    style={{
-                                        background: 'transparent',
-                                        color: '#000',
-                                    }}
-                                />
-                            </div>
-                            {validateemailpayload.step == 'verifycode' && (
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 mt-3 p-sm-0">
-                                    <label
-                                        className={`${formstyles.logininputLabel}` + '  d-flex justify-content-start '}
-                                        style={{
-                                            color: '#000',
-                                        }}
-                                    >
-                                        {langdetect == 'en' ? 'Code' : ' كود البريد الاكتروني'}
-                                    </label>
-                                    <input
-                                        type="text"
-                                        className={`${formstyles.form_control}`}
-                                        value={validateemailpayload.code}
-                                        onChange={(event) => {
-                                            setvalidateemailpayload({ ...validateemailpayload, code: event.target.value });
-                                        }}
-                                        style={{
-                                            background: 'transparent',
-                                            color: '#000',
-                                        }}
-                                    />
-                                </div>
-                            )}
-                            <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-3">
-                                <button
-                                    className={`${formstyles.signupbtn}` + ' d-flex align-items-center justify-content-center '}
-                                    disabled={GeneralAPIMutationContext.isLoading ? true : false}
-                                    onClick={() => {
-                                        if (payloadobj.email.length != 0) {
-                                            if (validateemailpayload.isvalidated == true) {
-                                                setvalidateemailmodal(false);
-                                                signupbuttonfunc();
-                                            } else {
-                                                GeneralAPIMutationContext.mutate({
-                                                    endpointurl: '/validateemail',
-                                                    functype: validateemailpayload.step,
-                                                    code: validateemailpayload.code,
-                                                    name: payloadobj.name,
-                                                    email: payloadobj.email,
-
-                                                    mutateSuccesscallback: (data, variables) => {
-                                                        if (data.data.status) {
-                                                            if (data.data.functype == 'sendcode') {
-                                                                setvalidateemailpayload({ ...validateemailpayload, step: 'verifycode' });
-                                                            }
-                                                            if (data.data.functype == 'verifycode') {
-                                                                setvalidateemailpayload({ ...validateemailpayload, isvalidated: true });
-                                                                setvalidateemailmodal(false);
-                                                                if (customervalidatephonenumber == 1) {
-                                                                    if (validatephonenumberpayload.isvalidated) {
-                                                                        signupbuttonfunc();
-                                                                    } else {
-                                                                        setvalidatephonenumbermodal(true);
-                                                                    }
-                                                                } else {
-                                                                    signupbuttonfunc();
-                                                                }
-                                                            }
-                                                        } else {
-                                                            NotificationManager.warning('', data.data.reason);
-                                                        }
-                                                    },
-                                                });
-                                            }
-                                        } else {
-                                            NotificationManager.warning(lang.completerequiredfields);
-                                        }
-                                    }}
-                                >
-                                    {GeneralAPIMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
-
-                                    {!GeneralAPIMutationContext.isLoading && (
-                                        <>
-                                            <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{validateemailpayload.step == 'sendcode' ? lang.sendcode : lang.verifycode}</span>
-                                        </>
-                                    )}
-                                </button>
-                            </div>
-                        </div>
-                    </Modal.Body>
-                </Modal.Body>
-                <Modal.Footer></Modal.Footer>
-            </Modal>
-            <Modal show={validatephonenumbermodal} onHide={() => setvalidatephonenumbermodal(false)} centered size={'md'}>
-                <Modal.Body>
-                    <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={() => setvalidatephonenumbermodal(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' ? 'Validate Phone Number' : 'التحقق من صحة  رقم الهاتف'}
-                                </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={`${formstyles.logininputLabel}` + '  d-flex justify-content-start '}>{langdetect == 'en' ? 'Phone Number' : ' رقم الهاتف'}</label>
-                                <input
-                                    type="text"
-                                    className={`${formstyles.form_control}`}
-                                    value={payloadobj.mobile}
-                                    disabled={true}
-                                    style={{
-                                        background: 'transparent',
-                                    }}
-                                />
-                            </div>
-                            {validatephonenumberpayload.step == 'verifycode' && (
-                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 mt-3 p-sm-0">
-                                    <label className={`${formstyles.logininputLabel}` + '  d-flex justify-content-start '}>{langdetect == 'en' ? 'Code' : ' كود  الرسالة النصية'}</label>
-                                    <input
-                                        type="text"
-                                        className={`${formstyles.form_control}`}
-                                        value={validatephonenumberpayload.code}
-                                        onChange={(event) => {
-                                            setvalidatephonenumberpayload({ ...validatephonenumberpayload, code: event.target.value });
-                                        }}
-                                        style={{
-                                            background: 'transparent',
-                                        }}
-                                    />
-                                </div>
-                            )}
-                            <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-3">
-                                <button
-                                    className={`${formstyles.signupbtn}` + ' d-flex align-items-center justify-content-center '}
-                                    disabled={GeneralAPIMutationContext.isLoading ? true : false}
-                                    onClick={() => {
-                                        if (payloadobj.mobile.length != 0) {
-                                            if (validatephonenumberpayload.isvalidated == true) {
-                                                setvalidateemailmodal(false);
-                                                signupbuttonfunc();
-                                            } else {
-                                                GeneralAPIMutationContext.mutate({
-                                                    endpointurl: '/validatephonenumber',
-                                                    functype: validatephonenumberpayload.step,
-                                                    code: validatephonenumberpayload.code,
-                                                    name: payloadobj.name,
-                                                    phonenumber: payloadobj.mobile,
-
-                                                    mutateSuccesscallback: (data, variables) => {
-                                                        if (data.data.status) {
-                                                            if (data.data.functype == 'sendcode') {
-                                                                setvalidatephonenumberpayload({ ...validatephonenumberpayload, step: 'verifycode' });
-                                                            }
-                                                            if (data.data.functype == 'verifycode') {
-                                                                setvalidatephonenumberpayload({ ...validatephonenumberpayload, isvalidated: true });
-                                                                setvalidatephonenumbermodal(false);
-                                                                if (customervalidateemail == 1) {
-                                                                    if (validateemailpayload.isvalidated) {
-                                                                        signupbuttonfunc();
-                                                                    } else {
-                                                                        setvalidateemailmodal(true);
-                                                                    }
-                                                                } else {
-                                                                    signupbuttonfunc();
-                                                                }
-                                                            }
-                                                        } else {
-                                                            NotificationManager.warning('', data.data.reason);
-                                                        }
-                                                    },
-                                                });
-                                            }
-                                        } else {
-                                            NotificationManager.warning(lang.completerequiredfields);
-                                        }
-                                    }}
-                                >
-                                    {GeneralAPIMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
-
-                                    {!GeneralAPIMutationContext.isLoading && (
-                                        <>
-                                            <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{validatephonenumberpayload.step == 'sendcode' ? lang.sendcode : lang.verifycode}</span>
-                                        </>
-                                    )}
-                                </button>
-                            </div>
-                        </div>
-                    </Modal.Body>
-                </Modal.Body>
-                <Modal.Footer></Modal.Footer>
-            </Modal>
-        </div>
-    );
-};
-export default CustomerInformationForm;