tabexseriescomponents 0.0.695 → 0.0.697

package/dist/index.cjs.js

@@ -18256,6 +18256,7 @@ var CardsSection = function CardsSection(props) {
         cardobj.productendpointurl = arrayItem.productinfo.productendpointurl;
         cardobj.hassale = arrayItem.productinfo.hassale;
         cardobj.productid = arrayItem.productinfo.productid;
+        cardobj.vendorid = arrayItem.productinfo.vendorproviderid;
         cardobj.hasvariants = arrayItem.productinfo.hasvariants;
         cardobj.description_en = arrayItem.productinfo.description_en;
         cardobj.description_ar = arrayItem.productinfo.description_ar;
@@ -70017,7 +70018,8 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       functype: 'add',
       productid: item.productid,
       variantid: '',
-      quantity: item.quantity
+      quantity: item.quantity,
+      vendorid: item.vendorid
     };
     var runfunc = false;
     if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {

package/dist/index.esm.js

@@ -18207,6 +18207,7 @@ var CardsSection = function CardsSection(props) {
         cardobj.productendpointurl = arrayItem.productinfo.productendpointurl;
         cardobj.hassale = arrayItem.productinfo.hassale;
         cardobj.productid = arrayItem.productinfo.productid;
+        cardobj.vendorid = arrayItem.productinfo.vendorproviderid;
         cardobj.hasvariants = arrayItem.productinfo.hasvariants;
         cardobj.description_en = arrayItem.productinfo.description_en;
         cardobj.description_ar = arrayItem.productinfo.description_ar;
@@ -69968,7 +69969,8 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
       functype: 'add',
       productid: item.productid,
       variantid: '',
-      quantity: item.quantity
+      quantity: item.quantity,
+      vendorid: item.vendorid
     };
     var runfunc = false;
     if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {

package/dist/index.umd.js

@@ -18080,6 +18080,7 @@
             cardobj.productendpointurl = arrayItem.productinfo.productendpointurl;
             cardobj.hassale = arrayItem.productinfo.hassale;
             cardobj.productid = arrayItem.productinfo.productid;
+            cardobj.vendorid = arrayItem.productinfo.vendorproviderid;
             cardobj.hasvariants = arrayItem.productinfo.hasvariants;
             cardobj.description_en = arrayItem.productinfo.description_en;
             cardobj.description_ar = arrayItem.productinfo.description_ar;
@@ -69841,7 +69842,8 @@
           functype: 'add',
           productid: item.productid,
           variantid: '',
-          quantity: item.quantity
+          quantity: item.quantity,
+          vendorid: item.vendorid
         };
         var runfunc = false;
         if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabexseriescomponents",
-    "version": "0.0.695",
+    "version": "0.0.697",
     "description": "your description",
     "main": "dist/index.cjs.js",
     "scripts": {

package/srcoman/TabexComponents/Sections/Slideshow/ServicesectionCenteredcards/ServicesectionCenteredcards.jsx

@@ -7,31 +7,42 @@ import { GoStar } from '@react-icons/all-files/go/GoStar';
 import { IoIosStar } from '@react-icons/all-files/io/IoIosStar';
 import { fontSize, width } from '@mui/system';
 import { CountdownCircleTimer } from 'react-countdown-circle-timer';
-const minuteSeconds = 60;
-const hourSeconds = 3600;
-const daySeconds = 86400;
+// const minuteSeconds = 60;
+// const hourSeconds = 3600;
+// const daySeconds = 86400;
 
-const timerProps = {
-    isPlaying: true,
-    size: 120,
-    strokeWidth: 6,
-};
+// const timerProps = {
+//     isPlaying: true,
+//     size: 120,
+//     strokeWidth: 6,
+// };
 
-const renderTime = (dimension, time) => {
-    return (
-        <div className="time-wrapper">
-            <div className="time">{time}</div>
-            <div>{dimension}</div>
-        </div>
-    );
+const formatTime = (time) => {
+    const days = Math.floor(time / (60 * 60 * 24));
+    const hours = Math.floor((time % (60 * 60 * 24)) / (60 * 60));
+    const minutes = Math.floor((time % (60 * 60)) / 60);
+    const seconds = time % 60;
+
+    return { days, hours, minutes, seconds };
 };
+// const renderTime = (dimension, time) => {
+//     return (
+// <div className="time-wrapper">
+//     <div className="time">{time}</div>
+//     <div>{dimension}</div>
+// </div>
+//     );
+// };
 
-const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
-const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
-const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0;
-const getTimeDays = (time) => (time / daySeconds) | 0;
+// const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
+// const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
+// const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0;
+// const getTimeDays = (time) => (time / daySeconds) | 0;
 
 const ServicesectionCenteredcards = (props) => {
+    const targetStartDate = new Date('2024-12-16T12:00:00');
+    const [remainingTimeInSeconds, setRemainingTimeInSeconds] = useState(0);
+
     const [sectionproperties, setsectionproperties] = useState('');
     const [cardsarray, setcardsarray] = useState([]);
     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
@@ -43,9 +54,23 @@ const ServicesectionCenteredcards = (props) => {
     const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
     const endTime = stratTime + 243248; // use UNIX timestamp in seconds
 
-    const remainingTime = endTime - stratTime;
-    const days = Math.ceil(remainingTime / daySeconds);
-    const daysDuration = days * daySeconds;
+    // const remainingTime = endTime - stratTime;
+    // // const days = Math.ceil(remainingTime / daySeconds);
+    // const daysDuration = days * daySeconds;
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const currentTime = new Date();
+            const differenceInSeconds = Math.max(Math.floor((targetStartDate - currentTime) / 1000), 0);
+            setRemainingTimeInSeconds(differenceInSeconds);
+        }, 1000); // Update every second
+
+        return () => clearInterval(interval); // Cleanup interval on unmount
+    }, [targetStartDate]);
+
+    // Format the remaining time into days, hours, minutes, and seconds
+    const { days, hours, minutes, seconds } = formatTime(remainingTimeInSeconds);
+    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
+
     useEffect(() => {
         var secpropobj = {};
         StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
@@ -67,7 +92,6 @@ const ServicesectionCenteredcards = (props) => {
             }
         }
     }, [sectionproperties]);
-    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
     useEffect(() => {
         if (sectionproperties.length != 0 && sectionproperties.maincontainerarrayofobjs != undefined) {
             var maincontainerarrayofobjsparsed = JSON.parse(sectionproperties.maincontainerarrayofobjs);
@@ -338,16 +362,69 @@ const ServicesectionCenteredcards = (props) => {
                     {/* innersectionbgcolorhover */}
                     {sectionproperties.showcountdown == 'Yes' && (
                         <div class="row m-0 w-100 allcentered">
+                            {/* <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#4e9af1" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
+                                {() => (
+                                    <div style={{ fontSize: '20px', textAlign: 'center' }}>
+                                        <div>{days}d</div>
+                                        <div>{hours}h</div>
+                                        <div>{minutes}m</div>
+                                        <div>{seconds}s</div>
+                                    </div>
+                                )}
+                            </CountdownCircleTimer> */}
+                            <div className="col-3 col-sm-6 allcentered mb-md-3">
+                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
+                                    {({ elapsedTime, color }) => (
+                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
+                                            {/* {renderTime('يوم', '18')} */}
+                                            <div className="time-wrapper allcentered flex-column">
+                                                <div className="time">{days}</div>
+                                                <div>يوم</div>
+                                            </div>
+                                        </span>
+                                    )}
+                                </CountdownCircleTimer>
+                            </div>
                             <div className="col-3 col-sm-6 allcentered mb-md-3">
-                                <CountdownCircleTimer {...timerProps} colors="#013c48" duration={daysDuration} initialRemainingTime={remainingTime}>
+                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
                                     {({ elapsedTime, color }) => (
                                         <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
-                                            {renderTime('يوم', '18')}
+                                            {/* {renderTime('يوم', '18')} */}
+                                            <div className="time-wrapper allcentered flex-column">
+                                                <div className="time">{hours}</div>
+                                                <div>ساعة</div>
+                                            </div>
                                         </span>
                                     )}
                                 </CountdownCircleTimer>
                             </div>
                             <div className="col-3 col-sm-6 allcentered mb-md-3">
+                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
+                                    {({ elapsedTime, color }) => (
+                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
+                                            {/* {renderTime('يوم', '18')} */}
+                                            <div className="time-wrapper allcentered flex-column">
+                                                <div className="time">{minutes}</div>
+                                                <div>دقيقة</div>
+                                            </div>
+                                        </span>
+                                    )}
+                                </CountdownCircleTimer>
+                            </div>
+                            <div className="col-3 col-sm-6 allcentered mb-md-3">
+                                <CountdownCircleTimer isPlaying duration={remainingTimeInSeconds} colors="#013c48" strokeWidth={8} size={120} initialRemainingTime={remainingTimeInSeconds}>
+                                    {({ elapsedTime, color }) => (
+                                        <span style={{ color: '#bea04b', fontSize: 23, fontWeight: 600 }} class="allcentered">
+                                            {/* {renderTime('يوم', '18')} */}
+                                            <div className="time-wrapper allcentered flex-column">
+                                                <div className="time">{seconds}</div>
+                                                <div>ثانية</div>
+                                            </div>
+                                        </span>
+                                    )}
+                                </CountdownCircleTimer>
+                            </div>
+                            {/* <div className="col-3 col-sm-6 allcentered mb-md-3">
                                 <CountdownCircleTimer
                                     {...timerProps}
                                     colors="#013c48"
@@ -399,7 +476,7 @@ const ServicesectionCenteredcards = (props) => {
                                         </span>
                                     )}
                                 </CountdownCircleTimer>
-                            </div>
+                            </div> */}
                         </div>
                     )}
                     {sectionproperties.flippingcards == 'Yes' && sectionproperties.showcountdown != 'Yes' && (