allaw-ui 1.0.30 → 1.0.32

package/dist/components/molecules/appointmentSlot/AppointmentSlot.css

@@ -15,16 +15,16 @@
   cursor: pointer;
   transition:
     background-color 0.05s ease,
-    transform 0.2s ease;
+    transform 0.1s ease;
   user-select: none;
 }
 
 .appointment-slot:hover {
-  transform: scale(1.008);
+  transform: scale(1.015);
 }
 
 .appointment-slot.active {
-  background: var(--active-grey, #e9eef5);
+  background: var(--grey-light-2);
 }
 
 /* Status-specific styles */

package/dist/components/molecules/billingCount/BillingCount.css

@@ -0,0 +1,20 @@
+.billing-button-wrapper {
+    padding: 0.5rem 1rem;
+    background-color: #F4F7FB;
+    border: 1px solid var(--primary-venom-grey, #E6EDF5);
+    border-radius: 5px;
+    font-family: Inter;
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 0.5rem;
+    font-weight: 600;
+    color: black;
+    align-items: center;
+    cursor: pointer;
+}
+
+.billing-button-wrapper > i {
+    color: #25BEEB;
+    font-weight: 500;
+    font-size: 16px;
+}

package/dist/components/molecules/billingCount/BillingCount.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./BillingCount.css";
+export type BillingCountProps = {
+    onEnd: (time: number) => void;
+    setIsStarted?: (value: boolean) => void;
+};
+declare function BillingCount({ onEnd, setIsStarted }: BillingCountProps): React.JSX.Element;
+export default BillingCount;

package/dist/components/molecules/billingCount/BillingCount.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { differenceInSeconds } from "date-fns";
+import "./BillingCount.css";
+function BillingCount(_a) {
+    var onEnd = _a.onEnd, setIsStarted = _a.setIsStarted;
+    var _b = useState(false), started = _b[0], setStarted = _b[1];
+    var _c = useState(0), time = _c[0], setTime = _c[1];
+    // Load saved start time and elapsed time from localStorage on component mount
+    useEffect(function () {
+        var savedStartTime = localStorage.getItem("startTimeBilling");
+        var savedElapsedTime = parseInt(localStorage.getItem("elapsedTime") || "0", 10);
+        if (savedStartTime) {
+            var elapsed = differenceInSeconds(new Date(), new Date(savedStartTime)) + savedElapsedTime;
+            setTime(elapsed);
+            setStarted(true);
+        }
+        else {
+            setTime(savedElapsedTime);
+        }
+    }, []);
+    // Update the timer every second if started
+    useEffect(function () {
+        var interval;
+        if (started) {
+            interval = setInterval(function () {
+                var savedStartTime = localStorage.getItem("startTimeBilling");
+                if (savedStartTime) {
+                    var elapsed = differenceInSeconds(new Date(), new Date(savedStartTime)) + parseInt(localStorage.getItem("elapsedTime") || "0", 10);
+                    setTime(elapsed);
+                }
+            }, 1000); // Update every second
+        }
+        return function () { return clearInterval(interval); };
+    }, [started]);
+    var handleButtonClick = function () {
+        if (started) {
+            // Stop timer and reset
+            setIsStarted && setIsStarted(false);
+            var savedStartTime = localStorage.getItem("startTimeBilling");
+            if (savedStartTime) {
+                var finalElapsedTime = differenceInSeconds(new Date(), new Date(savedStartTime)) + parseInt(localStorage.getItem("elapsedTime") || "0", 10);
+                onEnd(finalElapsedTime); // Callback with final time
+            }
+            localStorage.removeItem("startTimeBilling");
+            localStorage.removeItem("elapsedTime");
+            setTime(0);
+            setStarted(false);
+        }
+        else {
+            // Start timer from 0
+            setIsStarted && setIsStarted(true);
+            localStorage.setItem("startTimeBilling", new Date().toISOString());
+            setStarted(true);
+        }
+    };
+    // Format the time in hours, minutes, and seconds
+    var formatTime = function (seconds) {
+        var hrs = Math.floor(seconds / 3600);
+        var mins = Math.floor((seconds % 3600) / 60);
+        var secs = seconds % 60;
+        return "".concat(hrs.toString().padStart(2, "0"), ":").concat(mins.toString().padStart(2, "0"), ":").concat(secs.toString().padStart(2, "0"));
+    };
+    return React.createElement("button", { onClick: handleButtonClick, className: "billing-button-wrapper" },
+        React.createElement("i", { className: "allaw-icon-clock" }),
+        formatTime(time));
+}
+export default BillingCount;
+/*
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 48 48">
+    <path fill="#25BEEB" d="M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z"/>
+  </svg>
+*/ 

package/dist/components/molecules/billingCount/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BillingCount } from "./BillingCount";
+export type { BillingCountProps } from "./BillingCount";

package/dist/components/molecules/billingCount/index.js

@@ -0,0 +1 @@
+export { default as BillingCount } from "./BillingCount";

package/dist/components/molecules/stepper/Stepper.d.ts

@@ -25,6 +25,7 @@ export interface StepperProps {
         startIconName?: string;
         endIconName?: string;
         onPrimaryButtonClick?: (step: number) => void;
+        disabled?: boolean;
     }[];
     showProgressBar?: boolean[];
     onClose?: () => void;

package/dist/components/molecules/stepper/Stepper.js

@@ -115,7 +115,7 @@ var Stepper = function (_a) {
                 (currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
                     React.createElement(SecondaryButton, { fullWidth: true, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, step); } }))),
                 (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
-                    React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, onClick: handleNext })))))));
+                    React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))))));
     return portalContainerRef.current && isVisible
         ? ReactDOM.createPortal(stepperContent, portalContainerRef.current)
         : null;

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export { default as BorderRadius } from "./components/atoms/uiVariables/BorderRa
 export { default as Shadows } from "./components/atoms/uiVariables/Shadows";
 export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
 export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
+export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
 export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";

package/dist/index.js

@@ -48,6 +48,7 @@ export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
 // Molecules
 // Appointment Slot
 export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
+export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
 // Case Card
 export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
 // Contact Card

package/dist/styles/colors.css

@@ -10,6 +10,7 @@
   --grey-venom: #e6edf5;
   --venom-grey-dark: #d1dce8;
   --grey-light: #f6fcfe;
+  --grey-light-2: #f2f8fc;
   --active-grey: #e9eef5;
   --blue-lightning: #f6fcfe;
   --fond-de-selection: #f6fcfe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",