tabexseriescomponents 0.0.64 → 0.0.66

package/src1-10/TabexComponents/StaticPages/Signup/CustomerInformationForm.jsx

@@ -0,0 +1,776 @@
+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 } from '../../../StylesJS/Customstyles';
+import GoogleLogin from '../Login/GoogleLoginButton.jsx';
+import FacebookLoginButton from '../Login/FacebookLoginButton.jsx';
+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 authdetailsContext = props.actions.authdetailsContext;
+    const instapikey = props.actions.instapikey;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const actions = props.actions;
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [dataloaded, setdataloaded] = useState(false);
+    const [payloadobj, setpayloadobj] = useState({
+        instapikey: instapikey,
+        name: '',
+        email: '',
+        mobile: '',
+        password: '',
+        password2: '',
+        shippingaddress: '',
+        addedsourcetype: 'Webapp',
+        instsignupformvalues: [],
+        countryid: '',
+        stateid: '',
+        cityid: '',
+    });
+
+    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 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,
+            },
+        }),
+        input_label_name: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+        }),
+        form_control: css({
+            color: sectionproperties.inputfieldcolor,
+            fontSize: sectionproperties.inputfieldfontsize + 'px',
+        }),
+        checkbox: css({
+            color: sectionproperties.checkbox_color,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.checkbox_texthovercolor,
+            },
+            'input:checked': {
+                color: sectionproperties.checkbox_checkedcolor,
+            },
+        }),
+        checkboxinputstyles: css({
+            ':hover:not(:checked)': {
+                boxShadow: 'inset 0 0 0 2px ' + sectionproperties.checkbox_texthovercolor,
+            },
+            ':checked': {
+                boxShadow: 'inset 0 0 0 2px ' + sectionproperties.checkbox_checkedcolor,
+            },
+        }),
+        svgstyles: css({
+            stroke: 'var(--stroke, ' + sectionproperties.checkbox_checkedcolor + ')',
+        }),
+    };
+
+    const PersonalInformation = () => {
+        return (
+            <div className="row m-0 w-100">
+                <div className={'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0'}>
+                    <label className={`${formstyles.input_label_name}` + ' m-0 text-transform-none d-flex align-items-start '}>{lang.name}</label>
+                    <input
+                        type="text"
+                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
+                        value={payloadobj.name}
+                        onChange={(event) => {
+                            payloadobjchange('name', event.target.value);
+                        }}
+                    />
+                </div>
+                <div className={'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0'}>
+                    <label className={`${formstyles.input_label_name}` + ' m-0 text-transform-none d-flex align-items-start '}>{lang.email}</label>
+                    <input
+                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
+                        type="text"
+                        textplaceholder=""
+                        value={payloadobj.email}
+                        onChange={(event) => {
+                            payloadobjchange('email', event.target.value);
+                        }}
+                    />
+                </div>
+                <div className={'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0'}>
+                    <label className={formstyles.input_label_name + ' m-0 d-flex justify-content-start '}>{lang.phonenumber}</label>
+                    <input
+                        className={`${loginstyles.form_control} ${formstyles.form_control}`}
+                        type="text"
+                        textplaceholder=""
+                        value={payloadobj.mobile}
+                        onChange={(event) => {
+                            payloadobjchange('mobile', event.target.value);
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    };
+    const Address = () => {
+        return (
+            <div className="row m-0 w-100">
+                <div className={'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0'}>
+                    <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>{lang.country}</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
+                            options={fetchTabexCountriesQueryContext.data.data.countries}
+                            getOptionLabel={(option) => option.name}
+                            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}
+                            placeholder={langdetect == 'en' ? 'Choose Country' : 'إختر البلد'}
+                            isSearchable={true}
+                        />
+                    )}
+                </div>
+                <div className={'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0'}>
+                    <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>{lang.choosestategov}</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={lang.choosestategov} isSearchable={true} />
+                    )}
+                    {!fetchTabexStatesQueryContext.isFetching && fetchTabexStatesQueryContext.isSuccess && (
+                        <Select
+                            options={fetchTabexStatesQueryContext.data.data.states}
+                            getOptionLabel={(option) => option.name}
+                            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}
+                            placeholder={lang.choosestategov}
+                            isSearchable={true}
+                        />
+                    )}
+                </div>
+                <div className={'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0'}>
+                    <label className={formstyles.input_label_name + ' d-flex justify-content-start '}>{lang.city}</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={lang.choosecity} styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated} isSearchable={true} />
+                    )}
+                    {!fetchTabexCitiesQueryContext.isFetching && fetchTabexCitiesQueryContext.isSuccess && (
+                        <Select
+                            options={fetchTabexCitiesQueryContext.data.data.cities}
+                            getOptionLabel={(option) => option.name}
+                            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={lang.choosecity}
+                            isSearchable={true}
+                        />
+                    )}
+                </div>
+                <div className="col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0">
+                    <label className={`${formstyles.input_label_name}` + ' text-transform-none d-flex align-items-start '}>{lang.address}</label>
+                    <div className={loginstyles.wrap_input100}>
+                        <TextareaAutosize
+                            type="text"
+                            className={`${loginstyles.form_control} ${loginstyles.form_controltextarea} ${formstyles.form_control}`}
+                            value={payloadobj.shippingaddress}
+                            textplaceholder=""
+                            onChange={(event) => {
+                                payloadobjchange('shippingaddress', event.target.value);
+                            }}
+                            style={{ resize: 'none' }}
+                        />
+                        <span className={loginstyles.login_input_focus}></span>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    const Password = () => {
+        return (
+            <div className="row m-0 w-100">
+                <div className="col-lg-6 col-md-12 col-sm-12 mb-4 p-sm-0">
+                    <label className={`${formstyles.input_label_name}` + ' m-0 text-transform-none d-flex align-items-start '}>{lang.password}</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);
+                        }}
+                    />
+                </div>
+                <div className="col-lg-6 col-md-12 col-sm-12 mb-4  p-sm-0">
+                    <label className={`${formstyles.input_label_name}` + ' m-0 text-transform-none d-flex align-items-start '}>{lang.confirmpassword}</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);
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    };
+    const Otherinformation = () => {
+        return (
+            <div className="row m-0 w-100">
+                {payloadobj.instsignupformvalues.length != 0 && (
+                    <>
+                        {payloadobj.instsignupformvalues.map((item, index) => {
+                            return (
+                                <div className="col-lg-6 col-md-12 col-sm-12 mb-4 p-sm-0">
+                                    {item.inputtype != 'checkbox' && (
+                                        <label className={formstyles.input_label_name}>
+                                            {langdetect == 'en' ? item.inputname_en : item.inputname_ar} {item.optional == 1 ? '' : '*'}
+                                        </label>
+                                    )}
+                                    <div className={loginstyles.wrap_input100}>
+                                        {item.inputtype == 'input' && (
+                                            <input
+                                                className={loginstyles.logininput}
+                                                type="text"
+                                                value={item.customersignupvalue}
+                                                textplaceholder=""
+                                                onChange={(event) => {
+                                                    var temppayloadobj = { ...payloadobj };
+                                                    temppayloadobj.instsignupformvalues[index].customersignupvalue = event.target.value;
+                                                    setpayloadobj({ ...temppayloadobj });
+                                                }}
+                                            />
+                                        )}
+                                        {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 mb-0 cursor-pointer wordbreak mr-2'} style={{}}>
+                                                    {langdetect == 'en' ? item.inputname_en : item.inputname_ar} {item.optional == 1 ? '' : '*'}
+                                                </p>
+                                            </label>
+                                        )}
+                                        {item.inputtype == 'selectbox' && (
+                                            <select
+                                                className={loginstyles.wrap_input100}
+                                                value={item.customersignupvalue}
+                                                textplaceholder=""
+                                                onChange={(event) => {
+                                                    var temppayloadobj = { ...payloadobj };
+                                                    temppayloadobj.instsignupformvalues[index].customersignupvalue = event.target.value;
+                                                    setpayloadobj({ ...temppayloadobj });
+                                                }}
+                                            >
+                                                <option value={''} disabled>
+                                                    {langdetect == 'en' ? 'Choose' : 'إختر'}
+                                                </option>
+                                                {JSON.parse(item.selectboxvalues).map((selectboxitem, selectboxindex) => {
+                                                    return <option value={selectboxitem.optionname_en}>{selectboxitem.optionname_en}</option>;
+                                                })}
+                                            </select>
+                                        )}
+                                        {item.inputtype == 'textarea' && (
+                                            <TextareaAutosize
+                                                type="text"
+                                                className={loginstyles.logininput}
+                                                value={item.customersignupvalue}
+                                                textplaceholder=""
+                                                onChange={(event) => {
+                                                    var temppayloadobj = { ...payloadobj };
+                                                    temppayloadobj.instsignupformvalues[index].customersignupvalue = event.target.value;
+                                                    setpayloadobj({ ...temppayloadobj });
+                                                }}
+                                            />
+                                        )}
+                                        <span className={loginstyles.login_input_focus}></span>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </>
+                )}
+            </div>
+        );
+    };
+    return (
+        <div className="row m-0 w-100 d-flex justify-content-center">
+            {!dataloaded && <CircularProgress color="black" width="20px" height="20px" duration="1s" />}
+            {dataloaded && props.srcfromprops == 'signup' && (
+                <div
+                    className="row ml-0 mr-0"
+                    style={{
+                        background: 'white',
+                    }}
+                >
+                    {PersonalInformation()}
+                    {Address()}
+                    {Password()}
+                </div>
+            )}
+            {dataloaded && props.srcfromprops == 'accountinfo' && (
+                <div className="col-lg-12 p-0">
+                    <div className="row ml-0 mr-0 w-100">
+                        <div className="col-lg-12 mb-3 p-0">
+                            <div
+                                style={{
+                                    background: sectionproperties.backgroundColor,
+                                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+                                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+                                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+                                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+                                }}
+                                className="p-2"
+                            >
+                                <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="col-lg-12 mb-3 p-0">
+                            <div
+                                className={'p-2'}
+                                style={{
+                                    background: sectionproperties.backgroundColor,
+                                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+                                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+                                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+                                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+                                }}
+                            >
+                                <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="col-lg-12 mb-3 p-0">
+                            <div
+                                className={'p-2'}
+                                style={{
+                                    background: sectionproperties.backgroundColor,
+                                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+                                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+                                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+                                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+                                }}
+                            >
+                                <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="col-lg-12 mb-3 p-0">
+                                <div
+                                    style={{
+                                        background: sectionproperties.backgroundColor,
+                                        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+                                        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+                                        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+                                        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+                                    }}
+                                    className="p-2"
+                                >
+                                    <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 className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+                            <button
+                                className={`${formstyles.signupbtn}` + ' pl-4 pr-4 '}
+                                disabled={CustomerSignUpMutationContext.isLoading ? true : false}
+                                onClick={() => {
+                                    var passwordvalidation = false;
+                                    if (authdetailsContext.loggedin == false) {
+                                        if (payloadobj?.password?.length != 0) {
+                                            if (payloadobj?.password == payloadobj?.password2) {
+                                                passwordvalidation = true;
+                                            }
+                                        }
+                                    } else if (authdetailsContext.loggedin == true) {
+                                        if (payloadobj?.password != undefined && payloadobj?.password != null && payloadobj?.password?.length != 0) {
+                                            if (payloadobj?.password == payloadobj?.password2) {
+                                                passwordvalidation = true;
+                                            }
+                                        } else {
+                                            passwordvalidation = true;
+                                        }
+                                    }
+
+                                    if (passwordvalidation == false) {
+                                        NotificationManager.warning('', lang.passwordsdontmatch);
+                                    }
+
+                                    if (
+                                        payloadobj?.email?.length != 0 &&
+                                        payloadobj?.name?.length != 0 &&
+                                        payloadobj?.mobile?.length != 0 &&
+                                        passwordvalidation == true &&
+                                        payloadobj?.mobile != null &&
+                                        payloadobj?.stateid != null &&
+                                        payloadobj?.cityid != null &&
+                                        payloadobj?.name != null &&
+                                        payloadobj?.email != null &&
+                                        payloadobj?.countryid != null &&
+                                        payloadobj?.countryid?.length != 0 &&
+                                        payloadobj?.stateid?.length != 0 &&
+                                        payloadobj?.cityid?.length != 0
+                                    ) {
+                                        var signupformismissing = true;
+                                        payloadobj.instsignupformvalues.forEach(function (arrayItem) {
+                                            if (arrayItem.optional == 0) {
+                                                if (arrayItem.customersignupvalue == undefined || arrayItem.customersignupvalue.length == 0) {
+                                                    signupformismissing = false;
+                                                }
+                                            }
+                                        });
+                                        if (signupformismissing) {
+                                            var temppayloadobj = { ...payloadobj };
+                                            if (authdetailsContext.loggedin == true) {
+                                                temppayloadobj.functype = 'edit';
+                                            } else {
+                                                temppayloadobj.functype = 'add';
+                                            }
+
+                                            temppayloadobj.addedsourcetype = 'Webapp';
+                                            temppayloadobj.instapikey = instapikey();
+                                            CustomerSignUpMutationContext.mutate(temppayloadobj);
+                                        } else {
+                                            NotificationManager.warning('', 'Please Fill All The Mandatory Fields');
+                                        }
+                                    } else {
+                                        NotificationManager.warning('', lang.fillthemissingfields);
+                                    }
+                                }}
+                            >
+                                {CustomerSignUpMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+
+                                {!CustomerSignUpMutationContext.isLoading && (
+                                    <>
+                                        {authdetailsContext.loggedin != true && (
+                                            <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{langdetect == 'en' ? 'Signup' : 'إنشاء الحساب'}</span>
+                                        )}
+                                        {authdetailsContext.loggedin == true && (
+                                            <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{langdetect == 'en' ? 'Update' : 'تحديث'}</span>
+                                        )}
+                                    </>
+                                )}
+                            </button>
+                        </div> */}
+                    </div>
+                </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={CustomerSignUpMutationContext.isLoading ? true : false}
+                    onClick={() => {
+                        var passwordvalidation = false;
+                        if (authdetailsContext.loggedin == false) {
+                            if (payloadobj.password.length != 0) {
+                                if (payloadobj.password == payloadobj.password2) {
+                                    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);
+                        }
+                        if (
+                            payloadobj.email.length != 0 &&
+                            payloadobj.name.length != 0 &&
+                            payloadobj.mobile.length != 0 &&
+                            passwordvalidation == true &&
+                            payloadobj.countryid.length != 0 &&
+                            payloadobj.stateid.length != 0 &&
+                            payloadobj.cityid.length != 0
+                        ) {
+                            var signupformismissing = true;
+                            payloadobj.instsignupformvalues.forEach(function (arrayItem) {
+                                if (arrayItem.optional == 0) {
+                                    if (arrayItem.customersignupvalue == undefined || arrayItem.customersignupvalue.length == 0) {
+                                        signupformismissing = false;
+                                    }
+                                }
+                            });
+                            if (signupformismissing) {
+                                var temppayloadobj = { ...payloadobj };
+                                if (authdetailsContext.loggedin == true) {
+                                    temppayloadobj.functype = 'edit';
+                                } else {
+                                    temppayloadobj.functype = 'add';
+                                }
+
+                                temppayloadobj.addedsourcetype = 'Webapp';
+                                temppayloadobj.instapikey = instapikey();
+                                CustomerSignUpMutationContext.mutate(temppayloadobj);
+                            } else {
+                                NotificationManager.warning('', lang.completerequiredfields);
+                            }
+                        } else {
+                            NotificationManager.warning('', lang.fillthemissingfields);
+                        }
+                    }}
+                >
+                    {CustomerSignUpMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+
+                    {!CustomerSignUpMutationContext.isLoading && (
+                        <>
+                            {authdetailsContext.loggedin != true && <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{lang.signup}</span>}
+                            {authdetailsContext.loggedin == true && <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '' }}>{lang.update}</span>}
+                        </>
+                    )}
+                </button>
+            </div>
+            {props.srcfromprops == 'signup' && (
+                <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>
+            )}
+        </div>
+    );
+};
+export default CustomerInformationForm;