tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/AddReview/AddReview.jsx

@@ -0,0 +1,304 @@
+//productidprops
+import React, { useEffect, useState, useContext } from 'react';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+import ReactStars from 'react-rating-stars-component';
+import TextareaAutosize from 'react-textarea-autosize';
+import { css } from 'glamor';
+
+const AddReview = (props) => {
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const actions = props.actions;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const productid = props.actions.productid;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const canuserreview = props.actions.canuserreview;
+    const addreviewcallback = props.actions.addreviewcallback;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const pageindexcontext = props.actions.pageindexcontext;
+    const setpageindexcontext = props.actions.setpageindexcontext;
+    const setCurrentPageIdContext = props.actions.setCurrentPageIdContext;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const [reviewpayloadobj, setreviewpayloadobj] = useState({
+        reviewtitle: '',
+        reviewbody: '',
+        reviewrate: 0,
+        reviewname: '',
+        hasreview: 0,
+    });
+    // useEffect(() => {
+    //     var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '63fcbef36eebe');
+    //     if (cartindex >= 0) {
+    //         setpageindexcontext(cartindex);
+    //         setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
+    //         if (props.srcfromprops != 'templatedraftrouter') {
+    //             setCurrentPageIdContext(templatepropcontext.pagesnprop[cartindex].pageid);
+    //         }
+    //     }
+    // }, []);
+    useEffect(() => {
+        if (Object.keys(StatePagePropertiesContext).length != 0) {
+            var secpropobj = {};
+            StatePagePropertiesContext.pageobj != undefined &&
+                StatePagePropertiesContext.pageobj.pageproperties != undefined &&
+                StatePagePropertiesContext.pageobj.pageproperties.forEach(function (arrayItem, arrayindex) {
+                    secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+                });
+            setsectionproperties({ ...secpropobj });
+        }
+    }, [StatePagePropertiesContext]);
+    useEffect(() => {
+        var secpropobj = {};
+        templatepropcontext?.pagesnprop[pageindexcontext]?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+            secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+        });
+        setsectionproperties({ ...secpropobj });
+    }, [pageindexcontext]);
+    const reviewstyles = {
+        submitreviewbtn: css({
+            width: sectionproperties.reviewbtn_width + 'px',
+            height: sectionproperties.reviewbtn_height + 'px',
+            borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
+            fontSize: sectionproperties.reviewbtn_fontsize + 'px',
+            color: sectionproperties.reviewbtn_color,
+            fontWeight: sectionproperties.reviewbtn_fontweight,
+            backgroundColor: sectionproperties.reviewbtn_bgcolor,
+            border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
+            ':hover': {
+                transition: '.3s',
+                backgroundColor: sectionproperties.reviewbtn_bgcoloronhover,
+                color: sectionproperties.reviewbtn_coloronhover,
+            },
+        }),
+        form_control: css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            padding: '0 10px',
+            transition: '.3s',
+            fontWeight: 500,
+            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,
+            },
+        }),
+        inputfield_label: css({
+            color: sectionproperties.form_labelcolor,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            textTransform: sectionproperties.form_labeltexttransform,
+            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
+        }),
+        reviewbutton: css({
+            width: sectionproperties.reviewbtn_width + 'px',
+            height: sectionproperties.reviewbtn_height + 'px',
+            background: sectionproperties.reviewbtn_bgcolor,
+            color: sectionproperties.reviewbtn_color,
+            fontSize: sectionproperties.reviewbtn_fontsize + 'px',
+            borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
+            border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
+            fontWeight: sectionproperties.reviewbtn_fontweight,
+            ':hover': {
+                transition: '.3s',
+                color: sectionproperties.reviewbtn_coloronhover,
+                borderColor: sectionproperties.reviewbtn_coloronhover,
+                backgroundColor: sectionproperties.reviewbtn_bgcoloronhover,
+            },
+        }),
+        productname: css({
+            fontSize: sectionproperties.prodNameFontSize + 'px',
+            textTransform: sectionproperties.prodNameTextTranform,
+            fontWeight: sectionproperties.prodNameFontWeight,
+            color: sectionproperties.prodNameColor,
+        }),
+    };
+
+    return (
+        <div
+            className={'row w-100 ml-0 mr-0 pb-5'}
+            style={{
+                marginTop: sectionproperties.marginTop + 'px',
+            }}
+        >
+            {sectionproperties.sectionTitleFontSize != 0 && (
+                <div class="row m-0 w-100 mt-3">
+                    <div class="col-lg-12 p-0 allcentered">
+                        <p
+                            class="m-0 p-0"
+                            style={{
+                                fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                color: sectionproperties.sectionTitleColor,
+                                fontWeight: sectionproperties.sectionTitleFontWeight,
+                            }}
+                        >
+                            {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                        </p>
+                    </div>
+                    <div class="col-lg-12">
+                        <hr />
+                    </div>
+                </div>
+            )}
+            <div class="col-lg-12 mb-3">
+                <div class="row m-0 w-100 d-flex justify-content-start align-items-center">
+                    <div
+                        class="d-flex justify-content-start align-items-center"
+                        style={{
+                            width: '9vh',
+                            height: '9vh',
+                        }}
+                    >
+                        <Imagekitimagecomp
+                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                            publicKey={ikimagecredcontext?.ikimagepublickey}
+                            path={fetchProductInfoQueryContext.data.data.productinfo.productmainimage}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'contain',
+                            }}
+                            loading="lazy"
+                        />
+                    </div>
+                    <div class="col-lg-9 co-md-9 col-sm-9 d-flex justify-content-start align-items-center">
+                        <div class="row m-0 w-100">
+                            <div class="col-lg-12 p-0 d-flex justify-content-start align-items-center">
+                                <p class={reviewstyles.productname + ' m-0 p-0 '}>
+                                    {langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar}
+                                </p>
+                            </div>
+                            <div class="col-lg-12 p-0 d-flex justify-content-start align-items-center">
+                                <ReactStars
+                                    count={5}
+                                    value={reviewpayloadobj.reviewrate}
+                                    size={18}
+                                    emptyIcon={<i className="far fa-star" style={{ color: '#bfbfbf' }}></i>}
+                                    halfIcon={<i className="fa fa-star-half-alt style={{ color: '#FAB400' }}"></i>}
+                                    filledIcon={<i className="fa fa-star" style={{ color: '#FAB400' }}></i>}
+                                    activeColor="#ffd700"
+                                    onChange={(event) => {
+                                        var tempreviewpayloadobj = { ...reviewpayloadobj };
+                                        tempreviewpayloadobj.reviewrate = event;
+                                        setreviewpayloadobj({ ...tempreviewpayloadobj });
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12">
+                <div class="row m-0 w-100">
+                    <div class="col-lg-12 mb-4">
+                        <label className={`${reviewstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>{langdetect == 'en' ? 'Your Name' : 'اسمك'}</label>
+                        <input
+                            class={reviewstyles.form_control}
+                            value={reviewpayloadobj.reviewname}
+                            onChange={(event) => {
+                                var tempreviewpayloadobj = { ...reviewpayloadobj };
+                                tempreviewpayloadobj.reviewname = event.target.value;
+                                setreviewpayloadobj({ ...tempreviewpayloadobj });
+                            }}
+                        />
+                    </div>
+                    <div class="col-lg-12 mb-4">
+                        <label className={`${reviewstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>{langdetect == 'en' ? 'Review title' : 'عنوان التقييم'}</label>
+                        <input
+                            class={reviewstyles.form_control}
+                            value={reviewpayloadobj.reviewtitle}
+                            onChange={(event) => {
+                                var tempreviewpayloadobj = { ...reviewpayloadobj };
+                                tempreviewpayloadobj.reviewtitle = event.target.value;
+                                setreviewpayloadobj({ ...tempreviewpayloadobj });
+                            }}
+                        />
+                    </div>
+                    <div class="col-lg-12 mb-4">
+                        <label className={`${reviewstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>{langdetect == 'en' ? 'Your Review' : 'تقييمك'}</label>
+                        <TextareaAutosize
+                            type={'text'}
+                            class={reviewstyles.form_control + ' form_control '}
+                            value={reviewpayloadobj.reviewbody}
+                            onChange={(event) => {
+                                var tempreviewpayloadobj = { ...reviewpayloadobj };
+                                tempreviewpayloadobj.reviewbody = event.target.value;
+                                setreviewpayloadobj({ ...tempreviewpayloadobj });
+                            }}
+                            style={{
+                                resize: 'none',
+                                minRows: 5,
+                            }}
+                        />
+                    </div>
+
+                    {/* <div class="col-lg-12 mb-4">
+                <label className={`${reviewstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>Your Rating</label>
+                <input
+                    class={reviewstyles.form_control}
+                    value={reviewpayloadobj.reviewrate}
+                    type="number"
+                    onChange={(event) => {
+                        var tempreviewpayloadobj = { ...reviewpayloadobj };
+                        tempreviewpayloadobj.reviewrate = event.target.value;
+                        setreviewpayloadobj({ ...tempreviewpayloadobj });
+                    }}
+                />
+            </div> */}
+                </div>
+            </div>
+            {canuserreview && (
+                <div class="col-lg-12 allcentered mt-3">
+                    <button
+                        class={`${reviewstyles.submitreviewbtn}`}
+                        onClick={() => {
+                            if (
+                                reviewpayloadobj.reviewtitle.length != 0 &&
+                                reviewpayloadobj.reviewbody.length != 0 &&
+                                reviewpayloadobj.reviewrate.length != 0 &&
+                                parseInt(reviewpayloadobj.reviewrate) > 0 &&
+                                reviewpayloadobj.reviewname.length != 0
+                            ) {
+                                var tempreviewpayloadobj = reviewpayloadobj;
+                                GeneralAPIMutationContext.mutate({
+                                    endpointurl: '/addproductreview',
+                                    productid: productid,
+                                    reviewpayloadobj: reviewpayloadobj,
+                                    mutateSuccesscallback: (data, variables) => {
+                                        if (data.data.status) {
+                                            NotificationManager.success('', 'Success');
+                                            addreviewcallback();
+                                            window.location.reload();
+                                        } else {
+                                            NotificationManager.warning('', data.data.reason);
+                                        }
+                                    },
+                                });
+                            } else {
+                                NotificationManager.warning('', langdetect == 'en' ? 'Please complete the missing fields' : 'من فضلك اكمل باقى البيانات');
+
+                                // alert('Please fill the missing fields');
+                            }
+                        }}
+                    >
+                        {langdetect == 'en' ? sectionproperties.reviewbtn_contenten : sectionproperties.reviewbtn_contentar}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+export default AddReview;

package/srcoman/TabexComponents/StaticPages/Afiiliatesignup/Afiiliatesignup.jsx

@@ -0,0 +1,321 @@
+import React, { useEffect, useState, useContext } from 'react';
+import generalstyles from '../../../styles/general/general.module.css';
+import { css } from 'glamor';
+import { CircularProgress } from 'react-cssfx-loading';
+import PhoneInput from 'react-phone-input-2';
+
+const Afiiliatesignup = (props) => {
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const CurrentSrcTypeContext = props.actions.CurrentSrcTypeContext;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+
+    const actions = props.actions;
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const [issignupsuccess, setissignupsuccess] = useState(false);
+
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [affsignuppayload, setaffsignuppayload] = useState({
+        name: '',
+        email: '',
+        phonenumber: '',
+        ssn: '',
+        password: '',
+        confirmpassword: '',
+    });
+    useEffect(() => {
+        if (authdetailsContext.loggedin) {
+            routingcountext('');
+        }
+    }, []);
+    useEffect(() => {
+        var cartindex = templatepropcontext?.pagesnprop.findIndex((x) => x.staticpageid == '6218bccb7f4f7');
+        if (cartindex >= 0) {
+            setCurrentPageId(cartindex);
+        }
+    }, []);
+    // useEffect(() => {
+    //     var secpropobj = {};
+    //     templatepropcontext?.pagesnprop[CurrentPageId]?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+    //         secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+    //     });
+    //     setsectionproperties({ ...secpropobj });
+    // }, [CurrentPageId]);
+    useEffect(() => {
+        if (StatePagePropertiesContext != null && StatePagePropertiesContext != undefined && StatePagePropertiesContext.length != 0) {
+            var secpropobj = {};
+            StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+                secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+            });
+            setsectionproperties({ ...secpropobj });
+        }
+    }, [StatePagePropertiesContext]);
+    const loginstyles2 = {
+        loginbtn: css({
+            color: sectionproperties.login_btn_color,
+            fontSize: sectionproperties.login_btn_fontSize + 'px',
+            textTransform: sectionproperties.login_btn_texttransform,
+            fontWeight: sectionproperties.login_btn_fontweight,
+            textDecoration: 'underline',
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.login_btn_coloronhover,
+            },
+        }),
+        logininputLabel: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+        }),
+        signupbtn: css({
+            background: sectionproperties.signup_btnbgcolor,
+            width: sectionproperties.signup_btn_width + 'px',
+            height: sectionproperties.signup_btn_height + 'px',
+            borderRadius: sectionproperties.signup_btn_borderBottomLeftRadius + 'px',
+            color: sectionproperties.signup_btn_color,
+            fontSize: sectionproperties.signup_btn_fontSize + 'px',
+            fontWeight: sectionproperties.signup_btn_fontweight,
+            border: sectionproperties.signup_btn_borderwidth + 'px solid ' + sectionproperties.signupbtn_bordercolor,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.signup_btn_coloronhover,
+                borderColor: sectionproperties.signup_btn_coloronhover,
+                background: sectionproperties.signup_btnbgcoloroonhover,
+            },
+        }),
+        form_control: css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            height: '35px',
+            padding: '0 10px',
+            transition: '.3s',
+            fontWeight: 500,
+            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,
+            },
+        }),
+        containerstyle: css({
+            marginTop: sectionproperties.marginTop + 'px',
+            background: sectionproperties.backgroundColor,
+            marginBottom: sectionproperties.marginBottom + 'px',
+            '@media (max-width: 800px)': {
+                marginTop: sectionproperties.marginTopResp + 'px',
+            },
+        }),
+    };
+
+    return (
+        <div className={loginstyles2.containerstyle + ' col-lg-12 d-flex align-items-center justify-content-center pt-md-3 pb-5 '} style={{}}>
+            <div className={'row m-0 w-100 pl-3 pr-3 d-flex align-items-center justify-content-center pl-md-3 pr-md-3 p-sm-0'}>
+                {issignupsuccess && (
+                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mt-3" style={{ height: '40vh' }}>
+                        <p
+                            class="m-0 p-0"
+                            style={{
+                                fontSize: sectionproperties.generaltext_fontSize + 'px',
+                                color: sectionproperties.generaltext_fontColor,
+                                fontWeight: sectionproperties.generaltext_fontWeight,
+                            }}
+                            dangerouslySetInnerHTML={{ __html: langdetect == 'en' ? sectionproperties.textstylesen_editor : sectionproperties.textstylesar_editor }}
+                        ></p>
+                    </div>
+                )}
+                {!issignupsuccess && (
+                    <>
+                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+                            <p
+                                className="text-md-center"
+                                style={{
+                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                    color: sectionproperties.sectionTitleColor,
+                                    marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                                    marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                                    fontWeight: sectionproperties.sectionTitleFontWeight,
+                                }}
+                            >
+                                {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                            </p>
+                        </div>
+
+                        <div className={sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-12 p-sm-0' : 'col-lg-6 p-sm-0 mx-auto'}>
+                            <div class="row m-0 w-100">
+                                <div class="col-lg-12 p-0">
+                                    <form class="row m-0 w-100 d-flex p-2 pl-sm-3 pr-sm-3">
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                            <label className={`${loginstyles2.logininputLabel}` + ' text-transform-none d-flex justify-content-start '}>{lang.name}</label>
+                                            <input
+                                                type="text"
+                                                className={`${loginstyles2.form_control}`}
+                                                value={affsignuppayload.name}
+                                                onChange={(event) => {
+                                                    setaffsignuppayload({ ...affsignuppayload, name: event.target.value });
+                                                }}
+                                                style={{
+                                                    background: 'transparent',
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                            <label className={`${loginstyles2.logininputLabel}` + ' text-transform-none d-flex justify-content-start '}>{lang.email}</label>
+                                            <input
+                                                type="email"
+                                                className={`${loginstyles2.form_control}`}
+                                                value={affsignuppayload.email}
+                                                onChange={(event) => {
+                                                    setaffsignuppayload({ ...affsignuppayload, email: event.target.value });
+                                                }}
+                                                style={{
+                                                    background: 'transparent',
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                            <label className={`${loginstyles2.logininputLabel}` + ' text-transform-none d-flex justify-content-start '}>{lang.phonenumber}</label>
+                                            {/* <input
+                                                type="number"
+                                                className={`${loginstyles2.form_control}`}
+                                                value={affsignuppayload.phonenumber}
+                                                onChange={(event) => {
+                                                    setaffsignuppayload({ ...affsignuppayload, phonenumber: event.target.value });
+                                                }}
+                                                style={{
+                                                    background: 'transparent',
+                                                }}
+                                            /> */}
+                                            <PhoneInput
+                                                className={`${loginstyles2.form_control}`}
+                                                country={'eg'}
+                                                enableSearch={true}
+                                                autoFormat={true}
+                                                value={affsignuppayload.phonenumber}
+                                                onChange={(event, country) => {
+                                                    var temp = { ...affsignuppayload };
+                                                    temp.phonenumber = event;
+                                                    temp.countrydialcode = country.dialCode;
+                                                    setaffsignuppayload({ ...temp });
+                                                    // setaffsignuppayload({ ...affsignuppayload, phonenumber: event.target.value });
+                                                }}
+                                                style={{ direction: 'ltr' }}
+                                            />
+                                        </div>
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                            <label className={`${loginstyles2.logininputLabel}` + ' text-transform-none d-flex justify-content-start '}>
+                                                {langdetect == 'en' ? 'SSN' : 'الرقم القومى'}
+                                            </label>
+                                            <input
+                                                type="number"
+                                                className={`${loginstyles2.form_control}`}
+                                                value={affsignuppayload.ssn}
+                                                onChange={(event) => {
+                                                    setaffsignuppayload({ ...affsignuppayload, ssn: event.target.value });
+                                                }}
+                                                style={{
+                                                    background: 'transparent',
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                            <label className={`${loginstyles2.logininputLabel}` + ' text-transform-none d-flex justify-content-start '}>{lang.password}</label>
+                                            <input
+                                                type="password"
+                                                className={`${loginstyles2.form_control}`}
+                                                value={affsignuppayload.password}
+                                                onChange={(event) => {
+                                                    setaffsignuppayload({ ...affsignuppayload, password: event.target.value });
+                                                }}
+                                                style={{
+                                                    background: 'transparent',
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                            <label className={`${loginstyles2.logininputLabel}` + ' text-transform-none d-flex justify-content-start '}>{lang.confirmpassword}</label>
+                                            <input
+                                                type="password"
+                                                className={`${loginstyles2.form_control}`}
+                                                value={affsignuppayload.confirmpassword}
+                                                onChange={(event) => {
+                                                    setaffsignuppayload({ ...affsignuppayload, confirmpassword: event.target.value });
+                                                }}
+                                                style={{
+                                                    background: 'transparent',
+                                                }}
+                                            />
+                                        </div>
+                                    </form>
+                                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-4">
+                                        <button
+                                            className={` ${loginstyles2.signupbtn}` + ' d-flex align-items-center justify-content-center '}
+                                            onClick={() => {
+                                                var tempreviewpayloadobj = affsignuppayload;
+                                                tempreviewpayloadobj.endpointurl = '/affsignup';
+                                                if (
+                                                    tempreviewpayloadobj.name.length >= 3 &&
+                                                    tempreviewpayloadobj.email.length >= 5 &&
+                                                    tempreviewpayloadobj.phonenumber.length >= 5 &&
+                                                    tempreviewpayloadobj.ssn.length >= 5 &&
+                                                    tempreviewpayloadobj.password.length >= 5
+                                                ) {
+                                                    if (tempreviewpayloadobj.password == tempreviewpayloadobj.confirmpassword) {
+                                                        GeneralAPIMutationContext.mutate({
+                                                            endpointurl: '/affsignup',
+                                                            email: tempreviewpayloadobj.email,
+                                                            name: tempreviewpayloadobj.name,
+                                                            phonenumber: tempreviewpayloadobj.phonenumber,
+                                                            ssn: tempreviewpayloadobj.ssn,
+                                                            password: tempreviewpayloadobj.password,
+                                                            confirmpassword: tempreviewpayloadobj.confirmpassword,
+                                                            mutateSuccesscallback: (data, variables) => {
+                                                                if (data.data.status) {
+                                                                    NotificationManager.success('', 'Success');
+                                                                    setissignupsuccess(true);
+                                                                } else {
+                                                                    NotificationManager.warning('', data.data.reason);
+                                                                }
+                                                            },
+                                                        });
+                                                    } else {
+                                                        NotificationManager.warning('', lang.passwordsdontmatch);
+                                                    }
+                                                } else {
+                                                    NotificationManager.warning('', langdetect == 'en' ? 'Please complete the missing fields' : 'من فضلك اكمل باقى البيانات');
+
+                                                    // alert('Please fill the missing fields');
+                                                }
+                                            }}
+                                            type={'button'}
+                                            disabled={GeneralAPIMutationContext.isLoading == true ? true : false}
+                                        >
+                                            {GeneralAPIMutationContext.isLoading && <CircularProgress color={sectionproperties.signup_btn_color} width="20px" height="20px" duration="1s" />}
+
+                                            {!GeneralAPIMutationContext.isLoading && <span>{langdetect == 'en' ? sectionproperties.signupbtn_contenten : sectionproperties.signupbtn_contentar}</span>}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+export default Afiiliatesignup;