tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Signup/CustomerAddressForm.jsx

@@ -0,0 +1,277 @@
+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';
+
+const Select = React.lazy(() => import('react-select'));
+const CustomerAddressForm = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    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 [sectionproperties, setsectionproperties] = useState('');
+
+    useEffect(() => {
+        setsectionproperties({ ...props.sectionproperties });
+    }, [props.sectionproperties]);
+
+    const formstyles = {
+        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,
+            },
+        }),
+    };
+
+    return (
+        <div
+            className="row m-0 w-100"
+            style={{
+                display: sectionproperties.hidecountrystatecity == 'Show' ? 'flex' : sectionproperties.hideaddress == 'Show' ? 'flex' : 'none',
+            }}
+        >
+            {sectionproperties.hidecountrystatecity == 'Show' && (
+                <div
+                    className={
+                        props.srcfrom == 'filter'
+                            ? ' col-lg-4 col-md-12 col-sm-12 mb-sm-3 '
+                            : 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.country}
+                        {props?.customeraddressrequierd == 1 && props.srcfrom != 'filter' && (
+                            <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
+                            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 == props?.payloadobj?.countryid)}
+                            onChange={(option) => {
+                                var tempFetchTabexStatesPayloadobjContext = FetchTabexStatesPayloadobjContext;
+                                tempFetchTabexStatesPayloadobjContext.functype = 'states';
+                                tempFetchTabexStatesPayloadobjContext.country_id = option.id;
+                                setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+                                if (props.srcfrom != 'filter') {
+                                    props.payloadobjchange('countryid', option.id);
+                                } else {
+                                    var temp = props.payloadobj;
+                                    temp.countryid = option.id;
+                                    props.setpayloadobj({ ...temp });
+                                }
+                            }}
+                            styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                            placeholder={''}
+                            isSearchable={true}
+                        />
+                    )}
+                </div>
+            )}
+            {sectionproperties.hidecountrystatecity == 'Show' && (
+                <div
+                    className={
+                        props.srcfrom == 'filter'
+                            ? ' col-lg-4 col-md-12 col-sm-12 mb-sm-3 '
+                            : 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.choosestategov}{' '}
+                        {props?.customeraddressrequierd == 1 && props.srcfrom != 'filter' && (
+                            <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 == props?.payloadobj?.stateid)}
+                            onChange={(option) => {
+                                var tempFetchTabexStatesPayloadobjContext = FetchTabexStatesPayloadobjContext;
+                                tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+                                tempFetchTabexStatesPayloadobjContext.state_id = option.id;
+                                setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+                                if (props.srcfrom != 'filter') {
+                                    props.payloadobjchange('stateid', option.id);
+                                } else {
+                                    var temp = props.payloadobj;
+                                    temp.stateid = option.id;
+                                    props.setpayloadobj({ ...temp });
+                                }
+                            }}
+                            styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                            placeholder={''}
+                            isSearchable={true}
+                        />
+                    )}
+                </div>
+            )}
+            {sectionproperties.hidecountrystatecity == 'Show' && (
+                <div
+                    className={
+                        props.srcfrom == 'filter'
+                            ? ' col-lg-4 col-md-12 col-sm-12 mb-sm-3 '
+                            : 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.city}
+                        {props?.customeraddressrequierd == 1 && props.srcfrom != 'filter' && (
+                            <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 == props?.payloadobj?.cityid)}
+                            onChange={(option) => {
+                                if (props.srcfrom != 'filter') {
+                                    props.payloadobjchange('cityid', option.id);
+                                } else {
+                                    var temp = props.payloadobj;
+                                    temp.cityid = option.id;
+                                    props.setpayloadobj({ ...temp });
+                                }
+                            }}
+                            styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                            placeholder={''}
+                            isSearchable={true}
+                        />
+                    )}
+                </div>
+            )}
+            {sectionproperties.hideaddress == 'Show' && props.srcfrom != 'filter' && (
+                <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}{' '}
+                        {props?.customeraddressrequierd == 1 && props.srcfrom != 'filter' && (
+                            <span class="ml-1 mr-1" style={{ color: 'red' }}>
+                                *
+                            </span>
+                        )}
+                    </label>
+                    <div className={loginstyles.wrap_input100}>
+                        <TextareaAutosize
+                            type="text"
+                            className={`${loginstyles.form_control} ${loginstyles.form_controltextarea} ${formstyles.form_control}`}
+                            value={props?.payloadobj.shippingaddress}
+                            textplaceholder=""
+                            onChange={(event) => {
+                                props.payloadobjchange('shippingaddress', event.target.value);
+                            }}
+                            style={{ resize: 'none', background: 'transparent' }}
+                        />
+                        <span className={loginstyles.login_input_focus}></span>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+export default CustomerAddressForm;