tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/Sections/BackgroundImages/DynamicForm/DynamicForm copy 2.jsx

@@ -0,0 +1,583 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import TextareaAutosize from 'react-textarea-autosize';
+import formstyles from '../../../../styles/general/form.module.css';
+import { CircularProgress } from 'react-cssfx-loading';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
+import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
+// 49
+import { Modal } from 'react-bootstrap';
+
+const DynamicForm = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const dynamicformid = props.actions.dynamicformid;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const fetchdynamicformfeildsQueryContext = props.actions.fetchdynamicformfeildsQueryContext;
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [dynamicform, setdynamicform] = useState({});
+    const [formtitleen, setformtitleen] = useState('');
+    const [formtitlear, setformtitlear] = useState('');
+    const [confirmationtext, setconfirmationtext] = useState('');
+    const [percentage, setpercentage] = useState(25);
+    const [numberoffields, setnumberoffields] = useState('');
+    const [numberofslides, setnumberofslides] = useState(0);
+    const [numberoffieldsinslides, setnumberoffieldsinslides] = useState(0);
+    const [currentindex, setcurrentindex] = useState(0);
+    const [numberoffiledinslide, setnumberoffiledinslide] = useState(0);
+    const [showsuccuessmodal, setshowsuccuessmodal] = useState(false);
+
+    useEffect(() => {
+        var secpropobj = {};
+        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+            if (sectionitem.sectionid == props.sectionidprops) {
+                sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                    secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+                });
+            }
+        });
+        setsectionproperties({ ...secpropobj });
+    }, [StatePagePropertiesContext]);
+    useEffect(() => {
+        if (fetchdynamicformfeildsQueryContext.isSuccess) {
+            fetchdynamicformfeildsQueryContext?.data?.data?.dynamicforms?.forEach(function (item, index) {
+                if (item.id == dynamicformid) {
+                    var tempitem = item;
+                    tempitem?.fields?.forEach(function (fielditem) {
+                        fielditem.value = '';
+                    });
+                    setdynamicform(tempitem);
+                    var temptitleen = tempitem.title_en;
+                    var temptitlear = tempitem.title_ar;
+                    var tempnumberoffields = tempitem?.fields?.length; //12
+                    var tempnumberoffiledinslide = sectionproperties.numberofslides; //4
+                    var tempnumberofslides = Math.ceil(tempnumberoffields / tempnumberoffiledinslide); //3
+
+                    setformtitleen(temptitleen);
+                    setformtitlear(temptitlear);
+                    setnumberoffields(tempnumberoffields);
+                    setnumberoffiledinslide(tempnumberoffiledinslide);
+                    setnumberofslides(tempnumberofslides);
+                }
+            });
+        }
+    }, [fetchdynamicformfeildsQueryContext.isSuccess]);
+    const updateformfield = (value, index) => {
+        var tempynamicform = { ...dynamicform };
+        tempynamicform.fields[index].value = value;
+        setdynamicform({ ...dynamicform });
+    };
+    const submitform = () => {
+        var tempynamicform = { ...dynamicform };
+        var fields = tempynamicform.fields;
+        var validationpassed = true;
+        var reason = '';
+        fields?.forEach(function (item, index) {
+            if (item.isrequired == 1) {
+                if (item.value != undefined && item.value != null) {
+                    if (item.value.length == 0) {
+                        validationpassed = false;
+                        reason = item.title_en + ' ' + 'Is Missing';
+                    }
+                }
+            }
+        });
+        if (validationpassed) {
+            GeneralAPIMutationContext.mutate({
+                endpointurl: '/submitdynamicforms',
+                data: tempynamicform,
+                mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
+                    //   setslots(data.data.slots);
+                    // alert('done');
+                    clearform();
+                    setconfirmationtext(langdetect == 'en' ? 'We have recieved your message' : 'تم استقبال رسالتك');
+                    setshowsuccuessmodal(true);
+                },
+            });
+        } else {
+            NotificationManager.warning('', reason);
+        }
+    };
+
+    const clearform = () => {
+        var tempitem = { ...dynamicform };
+        tempitem?.fields?.forEach(function (fielditem) {
+            fielditem.value = '';
+        });
+        setdynamicform(tempitem);
+    };
+    const today = new Date();
+    const year = today.getFullYear();
+
+    const month = (today.getMonth() + 1).toString().padStart(2, '0'); // Adding leading zero if necessary
+    const day = today.getDate().toString().padStart(2, '0'); // Adding leading zero if necessary
+
+    const currentDate = year + '-' + month + '-' + day;
+    const inputitem = (item, index) => {
+        var type = 'input';
+        if (item.type == 'date') {
+            type = 'date';
+        } else if (item.type == 'number') {
+            type = 'number';
+        } else if (item.type == 'text') {
+            type = 'text';
+        }
+        if (item.type == 'date') {
+            return (
+                <div class="row m-0 w-100 mb-3">
+                    <div class="col-lg-12 text-start mb-2">
+                        <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                            {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                        </p>
+                    </div>
+                    <div class="col-lg-12 text-start">
+                        <input
+                            type={type}
+                            value={item.value}
+                            onChange={(event) => {
+                                updateformfield(event.target.value, index);
+                            }}
+                            min={currentDate}
+                            className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                        />
+                    </div>
+                </div>
+            );
+        } else {
+            return (
+                <div class="row m-0 w-100 mb-3">
+                    <div class="col-lg-12 text-start mb-2">
+                        <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                            {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                        </p>
+                    </div>
+                    <div class="col-lg-12 text-start">
+                        <input
+                            type={type}
+                            value={item.value}
+                            onChange={(event) => {
+                                updateformfield(event.target.value, index);
+                            }}
+                            className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                        />
+                    </div>
+                </div>
+            );
+        }
+    };
+    const textareaitem = (item, index) => {
+        return (
+            <div class="row m-0 w-100 mb-3">
+                <div class="col-lg-12 text-start mb-2">
+                    <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                        {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                    </p>
+                </div>
+                <div class="col-lg-12 text-start">
+                    <TextareaAutosize
+                        value={item.value}
+                        onChange={(event) => {
+                            updateformfield(event.target.value, index);
+                        }}
+                        className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                    />
+                </div>
+            </div>
+        );
+    };
+    const selectboxitem = (item, index) => {
+        var itemsarr = item.selectboxvalues;
+        if (itemsarr != undefined) {
+            var decoditems = JSON.parse(itemsarr);
+            if (decoditems != undefined && Array.isArray(decoditems)) {
+                return (
+                    <div class="row m-0 w-100 mb-3">
+                        <div class="col-lg-12 text-start mb-2">
+                            <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                                {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                            </p>
+                        </div>
+                        <div class="col-lg-12 text-start">
+                            <select
+                                value={item.value}
+                                onChange={(event) => {
+                                    updateformfield(event.target.value, index);
+                                }}
+                                className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                            >
+                                <option value="">{langdetect == 'en' ? 'Choose' : 'إختر'}</option>
+                                {decoditems?.map(function (sitem) {
+                                    return <option value={sitem.optionname_en}>{langdetect == 'en' ? sitem.optionname_en : sitem.optionname_ar}</option>;
+                                })}
+                            </select>
+                        </div>
+                    </div>
+                );
+            }
+        }
+    };
+    const form_cssstyles = {
+        formlabel: css({
+            color: sectionproperties.form_labelcolor,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            fontWeight: sectionproperties.form_labelfontweight,
+        }),
+        form_control: css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            padding: '0 30px',
+            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: 'transparent',
+            color: sectionproperties.inputfieldcolor,
+            fontSize: sectionproperties.inputfieldfontsize + 'px',
+            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 20 : 0,
+            ':focus': {
+                borderColor: sectionproperties.inputfeildbordercoloronfocus,
+                boxShadow: 'none',
+                transition: '.3s',
+            },
+        }),
+        generalbtn: css({
+            width: sectionproperties.generalbtn_width + '%',
+            height: sectionproperties.generalbtn_height + 'px',
+            backgroundColor: sectionproperties.generalbtn_bgColor,
+            borderRadius: sectionproperties.generalbtn_bgColor,
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize,
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            ':hover': {
+                transition: '.3s',
+                color: sectionproperties.generalbtn_textColoronhover,
+                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
+            },
+        }),
+        btnLeft: css({
+            width: 40,
+            height: 40,
+            // borderRadius: 20,
+            borderRight: langdetect == 'en' ? '1px solid #ccc' : 0,
+            backgroundColor: '#000',
+            cursor: 'pointer',
+            borderTopLeftRadius: langdetect == 'en' ? 5 : 0,
+            borderBottomLeftRadius: langdetect == 'en' ? 5 : 0,
+            borderTopRightRadius: langdetect == 'ar' ? 5 : 0,
+            borderBottomRightRadius: langdetect == 'ar' ? 5 : 0,
+            ':hover': {
+                transition: '.3s',
+                backgroundColor: '#044da6',
+            },
+        }),
+        btnRight: css({
+            width: 40,
+            height: 40,
+            borderLeft: langdetect == 'en' ? '1px solid #ccc' : 0,
+            backgroundColor: '#000',
+            cursor: 'pointer',
+            borderTopRightRadius: langdetect == 'en' ? 5 : 0,
+            borderBottomRightRadius: langdetect == 'en' ? 5 : 0,
+            borderTopLeftRadius: langdetect == 'ar' ? 5 : 0,
+            borderBottomLeftRadius: langdetect == 'ar' ? 5 : 0,
+            ':hover': {
+                transition: '.3s',
+                backgroundColor: '#044da6',
+            },
+        }),
+    };
+    return (
+        <div
+            class={'row m-0 w-100 h-100 px-md-2 allcentered'}
+            style={{
+                background: sectionproperties.backgroundColor,
+                paddingLeft: sectionproperties.cardpaddinghorizontal + 'px',
+                paddingRight: sectionproperties.cardpaddinghorizontal + 'px',
+                paddingTop: sectionproperties.cardpaddingvertical + 'px',
+                paddingBottom: sectionproperties.cardpaddingvertical + 'px',
+            }}
+        >
+            {/* */}
+
+            {dynamicformid == '49' && (
+                <div class="col-lg-10 m-0 w-100 allcentered">
+                    <div
+                        class="row m-0 w-100"
+                        style={{
+                            border: '1px solid #ccc',
+                            borderRadius: 20,
+                            overflow: 'hidden',
+                        }}
+                    >
+                        <div style={{ width: '100%', height: '5.5px' }}>
+                            <div
+                                class={'ratingbar'}
+                                style={{
+                                    backgroundColor: 'rgb(226, 226, 226)',
+                                }}
+                            >
+                                <div
+                                    class={'ratingbar'}
+                                    style={{
+                                        backgroundColor: '#044da6',
+                                        width: percentage + '%',
+                                    }}
+                                ></div>
+                            </div>
+                        </div>
+                        <div
+                            class="col-lg-12 text-start mt-5 px-4"
+                            style={{
+                                marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                                marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                            }}
+                        >
+                            <p
+                                class="m-0 p-0"
+                                style={{
+                                    color: sectionproperties.sectionTitleColor,
+                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                    fontWeight: sectionproperties.sectionTitleFontWeight,
+                                }}
+                            >
+                                {langdetect == 'en' ? formtitleen : formtitlear}
+                            </p>
+                        </div>
+                        {dynamicform?.id != undefined && (
+                            <div class={'row m-0 w-100 p-3 mt-3'}>
+                                <div class="col-lg-12 text-start">
+                                    {currentindex == 0 && (
+                                        <div class={'row m-0 w-100 '}>
+                                            {dynamicform?.fields?.map(function (item, index) {
+                                                if (index <= 2) {
+                                                    if (item.type == 'text' || item.type == 'date' || item.type == 'number') {
+                                                        return inputitem(item, index);
+                                                    } else if (item.type == 'textarea') {
+                                                        return textareaitem(item, index);
+                                                    } else if (item.type == 'selectbox') {
+                                                        return selectboxitem(item, index);
+                                                    }
+                                                }
+                                            })}
+                                        </div>
+                                    )}
+                                    {currentindex == 1 && (
+                                        <div class={'row m-0 w-100 '}>
+                                            {dynamicform?.fields?.map(function (item, index) {
+                                                if (index > 2 && index <= 5) {
+                                                    if (item.type == 'text' || item.type == 'date' || item.type == 'number') {
+                                                        return inputitem(item, index);
+                                                    } else if (item.type == 'textarea') {
+                                                        return textareaitem(item, index);
+                                                    } else if (item.type == 'selectbox') {
+                                                        return selectboxitem(item, index);
+                                                    }
+                                                }
+                                            })}
+                                        </div>
+                                    )}
+                                    {currentindex == 2 && (
+                                        <div class={'row m-0 w-100 '}>
+                                            {dynamicform?.fields?.map(function (item, index) {
+                                                if (index > 5 && index <= 8) {
+                                                    if (item.type == 'text' || item.type == 'date' || item.type == 'number') {
+                                                        return inputitem(item, index);
+                                                    } else if (item.type == 'textarea') {
+                                                        return textareaitem(item, index);
+                                                    } else if (item.type == 'selectbox') {
+                                                        return selectboxitem(item, index);
+                                                    }
+                                                }
+                                            })}
+                                        </div>
+                                    )}
+                                    {currentindex == 3 && (
+                                        <div class={'row m-0 w-100 '}>
+                                            {dynamicform?.fields?.map(function (item, index) {
+                                                if (index > 8 && index <= 11) {
+                                                    if (item.type == 'text' || item.type == 'date' || item.type == 'number') {
+                                                        return inputitem(item, index);
+                                                    } else if (item.type == 'textarea') {
+                                                        return textareaitem(item, index);
+                                                    } else if (item.type == 'selectbox') {
+                                                        return selectboxitem(item, index);
+                                                    }
+                                                }
+                                            })}
+                                        </div>
+                                    )}
+                                </div>
+                                <div class="col-lg-12 text-end flex-row px-4 mt-4">
+                                    <div
+                                        class={form_cssstyles.btnLeft + ' allcentered '}
+                                        style={{}}
+                                        onClick={() => {
+                                            if (currentindex == 1) {
+                                                setcurrentindex(0);
+                                                setpercentage(25);
+                                            } else if (currentindex == 2) {
+                                                setcurrentindex(1);
+                                                setpercentage(50);
+                                            } else if (currentindex == 3) {
+                                                setcurrentindex(2);
+                                                setpercentage(75);
+                                            } else {
+                                            }
+                                        }}
+                                    >
+                                        {langdetect == 'en' && <BsChevronLeft color={'#fff'} size={18} />}
+                                        {langdetect == 'ar' && <BsChevronRight color={'#fff'} size={18} />}
+                                    </div>
+                                    <div
+                                        class={form_cssstyles.btnRight + ' allcentered '}
+                                        onClick={() => {
+                                            if (currentindex == 0) {
+                                                setcurrentindex(1);
+                                                setpercentage(50);
+                                            } else if (currentindex == 1) {
+                                                setcurrentindex(2);
+                                                setpercentage(75);
+                                            } else if (currentindex == 2) {
+                                                setcurrentindex(3);
+                                                setpercentage(100);
+                                            } else {
+                                            }
+                                        }}
+                                    >
+                                        {langdetect == 'en' && <BsChevronRight color={'#fff'} size={18} />}
+                                        {langdetect == 'ar' && <BsChevronLeft color={'#fff'} size={18} />}
+                                    </div>
+                                </div>
+                                {/* { && ( */}
+                                <div
+                                    class="col-lg-12 allcentered my-4"
+                                    style={{
+                                        visibility: currentindex == 3 ? 'visible' : 'hidden',
+                                    }}
+                                >
+                                    <button
+                                        onClick={() => {
+                                            submitform();
+                                        }}
+                                        disabled={GeneralAPIMutationContext.isLoading}
+                                        class={form_cssstyles.generalbtn + ' allcentered '}
+                                    >
+                                        {GeneralAPIMutationContext.isLoading ? (
+                                            <CircularProgress color={sectionproperties.generalbtn_textColor} width="20px" height="20px" duration="1s" />
+                                        ) : langdetect == 'en' ? (
+                                            sectionproperties.generalbtn_content
+                                        ) : (
+                                            sectionproperties.slideshow_btn_text_ar
+                                        )}
+                                    </button>
+                                </div>
+                                {/* )} */}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+            {dynamicformid != '49' && (
+                <div class="row m-0 w-100">
+                    <div
+                        class="col-lg-12 text-start"
+                        style={{
+                            marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                            marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                        }}
+                    >
+                        <p
+                            class="m-0 p-0"
+                            style={{
+                                color: sectionproperties.sectionTitleColor,
+                                fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                fontWeight: sectionproperties.sectionTitleFontWeight,
+                            }}
+                        >
+                            {langdetect == 'en' ? formtitleen : formtitlear}
+                        </p>
+                    </div>
+                    {dynamicform?.id != undefined && (
+                        <div class={'row m-0 w-100 '}>
+                            <div class="col-lg-12 text-start">
+                                <div class={'row m-0 w-100 '}>
+                                    {dynamicform?.fields?.map(function (item, index) {
+                                        if (item.type == 'text' || item.type == 'date' || item.type == 'number') {
+                                            return inputitem(item, index);
+                                        } else if (item.type == 'textarea') {
+                                            return textareaitem(item, index);
+                                        } else if (item.type == 'selectbox') {
+                                            return selectboxitem(item, index);
+                                        }
+                                    })}
+                                </div>
+                            </div>
+                            <div class="col-lg-12 allcentered my-4">
+                                <button
+                                    onClick={() => {
+                                        submitform();
+                                    }}
+                                    disabled={GeneralAPIMutationContext.isLoading}
+                                    class={form_cssstyles.generalbtn + ' allcentered '}
+                                >
+                                    {GeneralAPIMutationContext.isLoading ? (
+                                        <CircularProgress color={sectionproperties.generalbtn_textColor} width="20px" height="20px" duration="1s" />
+                                    ) : langdetect == 'en' ? (
+                                        sectionproperties.generalbtn_content
+                                    ) : (
+                                        sectionproperties.slideshow_btn_text_ar
+                                    )}
+                                </button>
+                            </div>
+                            <div class="col-lg-12 allcentered my-4">
+                                <p
+                                    class="m-0 p-0"
+                                    style={{
+                                        fontSize: 20,
+                                        color: '#000',
+                                    }}
+                                >
+                                    {confirmationtext}
+                                </p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+            <Modal show={showsuccuessmodal} onHide={() => setshowsuccuessmodal(false)} centered size={'md'}>
+                <Modal.Body>
+                    <Modal.Body>
+                        <div
+                            class="d-flex align-items-center justify-content-center bgdanger-hover"
+                            style={{ position: 'absolute', right: -15, top: -15, width: '4vh', height: '4vh', background: '#000', borderRadius: '50%' }}
+                            onClick={() => setshowsuccuessmodal(false)}
+                        >
+                            <IoMdClose size={15} color="white" />
+                        </div>
+                        <div class="col-lg-12 allcentered my-4">
+                            <p
+                                class="m-0 p-0"
+                                style={{
+                                    fontSize: 20,
+                                    color: '#000',
+                                }}
+                            >
+                                {confirmationtext}
+                            </p>
+                        </div>
+                    </Modal.Body>
+                </Modal.Body>
+                <Modal.Footer></Modal.Footer>
+            </Modal>
+        </div>
+    );
+};
+export default DynamicForm;