ui-soxo-bootstrap-core 2.4.25-dev.41 → 2.4.25-dev.44

package/core/lib/modules/business/slots/slots.js

@@ -1,231 +1,231 @@
-import React, { useState, useEffect, useContext } from "react";
-
-import { Button, Empty, Card, Typography, Skeleton, message } from 'antd';
-
-import { InfoCircleOutlined } from '@ant-design/icons';
-
-import './slots.scss';
-
-// import { Location } from '@soxo/bootstrap-core';
-
-import { Calendar } from 'antd';
-
-import moment from 'moment';
-
-const { Title, Text } = Typography;
-
-/**
- *
- * @returns
- */
-export default function Slots() {
-
-    // var params = Location.search();
-
-    const [item, setItem] = useState();
-
-    const [today, setToday] = useState(moment());
-
-    
-    const [available, setAvailable] = useState([{ as_starttime: '10 AM' }, { as_starttime: '12 AM' }, { as_starttime: '13 AM' }]);
-
-    const [selected, setSelected] = useState({});
-
-    const [loading, setLoading] = useState(false);
-
-    const [appointment, setAppointment] = useState({});
-
-    useEffect(() => {
-        setLoading(false);
-
-    }, []);
-
-    /**
-     *
-     *
-     * @param {*} dt
-     */
-    function getSlots(dt, selected_item, callback) {
-        setLoading(true);
-
-    }
-
-    function onChange(value, mode) {
-        setToday(value);
-        setSelected({});
-        getSlots(value, item);
-    }
-
-    /**
-     *
-     * @param {*} slot
-     */
-    const selectSlot = (slot, key) => {
-        setSelected({ item: slot, key });
-    };
-
-    /**
-     *
-     */
-    const onSlotConfirm = () => {
-
-    };
-
-    return (
-        <>
-            <section className="slots page">
-                <div className="page-content">
-                    {/* <Title level={3}>Select an appointment</Title> */}
-
-                    <div className="calendar-wrapper">
-                        <div className="left">
-
-                            <div className="top-bar">
-
-                                <div className="selected-package-container">
-                                    {/* <SelectedPackage /> */}
-
-                                </div>
-
-                                <div className="notice-card card">
-
-                                    <Title level={5}>
-                                        <InfoCircleOutlined /> Note
-                                    </Title>
-
-                                    <p>
-                                        Choose a convenient date and time to conduct the screening.
-
-                                        {/* You have <h3>
-{days}
-</h3> days remaining to complete this process. */}
-                                    </p>
-
-                                    {/* <Link to="/change-password">
-                                        Learn More
-                                    </Link> */}
-
-                                </div>
-                            </div>
-
-
-
-                            <div className="time-slot-container">
-                                {loading ? (
-                                    <div className="loading-text">
-                                        <p>Loading slots</p>
-
-                                        <Skeleton />
-                                    </div>
-                                ) : (
-                                    <div className="calendar-container">
-                                        <Card className="calendar">
-                                            {/* Calendar */}
-                                            <Calendar
-                                                disabledDate={(current) => {
-                                                    return current.diff(moment(), 'hours') < 0;
-                                                }}
-                                                value={today}
-                                                fullscreen={false}
-                                                onChange={onChange}
-                                            />
-                                            {/* Calendar Ends */}
-                                        </Card>
-
-                                        <div className="calendar-slots">
-                                            <p>When do you want to schedule the appointment ?</p>
-
-                                            <div className="time-slots">
-                                                {available.map((entry, key) => (
-                                                    <div
-                                                        className={`item ${key === selected.key ? 'active' : ''} ${entry.booked ? 'booked' : ''}`}
-                                                        key={key}
-                                                        onClick={() => !entry.booked && selectSlot(entry, key)}
-                                                    >
-                                                        {/* {moment(entry.as_starttime).format('HH:mm A')} */}
-                                                        {entry.as_starttime}
-                                                    </div>
-                                                ))}
-                                            </div>
-                                            {available.length ? (
-                                                <>
-                                                    <Button type="primary" onClick={onSlotConfirm}>
-                                                        Proceed
-                                                    </Button>
-                                                </>
-                                            ) : (
-                                                <>
-                                                    <Empty description={false} />
-                                                    <p className="text-center">No slots available</p>
-                                                </>
-                                            )}
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </>
-    );
-}
-
-/**
- *
- * @returns
- */
-// function SelectedPackage() {
-//     var params = Location.search();
-
-//     const [selected, setSelected] = useState({});
-
-//     const [loading, setLoading] = useState(false);
-
-//     useEffect(() => {
-//         getItems();
-//     }, []);
-
-//     /**
-//      * Get the master data to show options for the user
-//      */
-//     function getItems() {
-//         setLoading(true);
-
-//         Items.getItems(params.da_packagetypevalue).then((result) => {
-
-//             console.log(result);
-
-//             // setSelected(result.filter((record) => record.itm_active === 'Y'));
-
-//             setSelected(result)
-
-//             setLoading(false);
-//         });
-//     }
-
-//     return (
-//         <div className="card card-shadow selected-package">
-//             <Title level={4}>Packages Selected</Title>
-
-//             {loading ? (
-
-//                 <>Loading</>
-//             )
-//                 : (
-//                     <>
-//                         <div className="section-content">
-//                             <div className="section-row">
-//                                 <div className="section-label">
-//                                     <Text type="secondary">{selected.itm_desc}</Text>
-//                                 </div>
-//                                 <div className="section-value">
-//                                     <strong>{selected.ir_rate}</strong>
-//                                 </div>
-//                             </div>
-//                         </div>
-//                     </>
-//                 )}
-//         </div>
-//     );
-// }
+import React, { useState, useEffect, useContext } from "react";
+
+import { Button, Empty, Card, Typography, Skeleton, message } from 'antd';
+
+import { InfoCircleOutlined } from '@ant-design/icons';
+
+import './slots.scss';
+
+// import { Location } from '@soxo/bootstrap-core';
+
+import { Calendar } from 'antd';
+
+import moment from 'moment';
+
+const { Title, Text } = Typography;
+
+/**
+ *
+ * @returns
+ */
+export default function Slots() {
+
+    // var params = Location.search();
+
+    const [item, setItem] = useState();
+
+    const [today, setToday] = useState(moment());
+
+    
+    const [available, setAvailable] = useState([{ as_starttime: '10 AM' }, { as_starttime: '12 AM' }, { as_starttime: '13 AM' }]);
+
+    const [selected, setSelected] = useState({});
+
+    const [loading, setLoading] = useState(false);
+
+    const [appointment, setAppointment] = useState({});
+
+    useEffect(() => {
+        setLoading(false);
+
+    }, []);
+
+    /**
+     *
+     *
+     * @param {*} dt
+     */
+    function getSlots(dt, selected_item, callback) {
+        setLoading(true);
+
+    }
+
+    function onChange(value, mode) {
+        setToday(value);
+        setSelected({});
+        getSlots(value, item);
+    }
+
+    /**
+     *
+     * @param {*} slot
+     */
+    const selectSlot = (slot, key) => {
+        setSelected({ item: slot, key });
+    };
+
+    /**
+     *
+     */
+    const onSlotConfirm = () => {
+
+    };
+
+    return (
+        <>
+            <section className="slots page">
+                <div className="page-content">
+                    {/* <Title level={3}>Select an appointment</Title> */}
+
+                    <div className="calendar-wrapper">
+                        <div className="left">
+
+                            <div className="top-bar">
+
+                                <div className="selected-package-container">
+                                    {/* <SelectedPackage /> */}
+
+                                </div>
+
+                                <div className="notice-card card">
+
+                                    <Title level={5}>
+                                        <InfoCircleOutlined /> Note
+                                    </Title>
+
+                                    <p>
+                                        Choose a convenient date and time to conduct the screening.
+
+                                        {/* You have <h3>
+{days}
+</h3> days remaining to complete this process. */}
+                                    </p>
+
+                                    {/* <Link to="/change-password">
+                                        Learn More
+                                    </Link> */}
+
+                                </div>
+                            </div>
+
+
+
+                            <div className="time-slot-container">
+                                {loading ? (
+                                    <div className="loading-text">
+                                        <p>Loading slots</p>
+
+                                        <Skeleton />
+                                    </div>
+                                ) : (
+                                    <div className="calendar-container">
+                                        <Card className="calendar">
+                                            {/* Calendar */}
+                                            <Calendar
+                                                disabledDate={(current) => {
+                                                    return current.diff(moment(), 'hours') < 0;
+                                                }}
+                                                value={today}
+                                                fullscreen={false}
+                                                onChange={onChange}
+                                            />
+                                            {/* Calendar Ends */}
+                                        </Card>
+
+                                        <div className="calendar-slots">
+                                            <p>When do you want to schedule the appointment ?</p>
+
+                                            <div className="time-slots">
+                                                {available.map((entry, key) => (
+                                                    <div
+                                                        className={`item ${key === selected.key ? 'active' : ''} ${entry.booked ? 'booked' : ''}`}
+                                                        key={key}
+                                                        onClick={() => !entry.booked && selectSlot(entry, key)}
+                                                    >
+                                                        {/* {moment(entry.as_starttime).format('HH:mm A')} */}
+                                                        {entry.as_starttime}
+                                                    </div>
+                                                ))}
+                                            </div>
+                                            {available.length ? (
+                                                <>
+                                                    <Button type="primary" onClick={onSlotConfirm}>
+                                                        Proceed
+                                                    </Button>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <Empty description={false} />
+                                                    <p className="text-center">No slots available</p>
+                                                </>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+/**
+ *
+ * @returns
+ */
+// function SelectedPackage() {
+//     var params = Location.search();
+
+//     const [selected, setSelected] = useState({});
+
+//     const [loading, setLoading] = useState(false);
+
+//     useEffect(() => {
+//         getItems();
+//     }, []);
+
+//     /**
+//      * Get the master data to show options for the user
+//      */
+//     function getItems() {
+//         setLoading(true);
+
+//         Items.getItems(params.da_packagetypevalue).then((result) => {
+
+//             console.log(result);
+
+//             // setSelected(result.filter((record) => record.itm_active === 'Y'));
+
+//             setSelected(result)
+
+//             setLoading(false);
+//         });
+//     }
+
+//     return (
+//         <div className="card card-shadow selected-package">
+//             <Title level={4}>Packages Selected</Title>
+
+//             {loading ? (
+
+//                 <>Loading</>
+//             )
+//                 : (
+//                     <>
+//                         <div className="section-content">
+//                             <div className="section-row">
+//                                 <div className="section-label">
+//                                     <Text type="secondary">{selected.itm_desc}</Text>
+//                                 </div>
+//                                 <div className="section-value">
+//                                     <strong>{selected.ir_rate}</strong>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     </>
+//                 )}
+//         </div>
+//     );
+// }