allaw-ui 1.0.31 → 1.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/billingCount/BillingCount.css +20 -0
- package/dist/components/molecules/billingCount/BillingCount.d.ts +8 -0
- package/dist/components/molecules/billingCount/BillingCount.js +72 -0
- package/dist/components/molecules/billingCount/index.d.ts +2 -0
- package/dist/components/molecules/billingCount/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.billing-button-wrapper {
|
|
2
|
+
padding: 0.5rem 1rem;
|
|
3
|
+
background-color: #F4F7FB;
|
|
4
|
+
border: 1px solid var(--primary-venom-grey, #E6EDF5);
|
|
5
|
+
border-radius: 5px;
|
|
6
|
+
font-family: Inter;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: row;
|
|
9
|
+
gap: 0.5rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
color: black;
|
|
12
|
+
align-items: center;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.billing-button-wrapper > i {
|
|
17
|
+
color: #25BEEB;
|
|
18
|
+
font-weight: 500;
|
|
19
|
+
font-size: 16px;
|
|
20
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./BillingCount.css";
|
|
3
|
+
export type BillingCountProps = {
|
|
4
|
+
onEnd: (time: number) => void;
|
|
5
|
+
setIsStarted?: (value: boolean) => void;
|
|
6
|
+
};
|
|
7
|
+
declare function BillingCount({ onEnd, setIsStarted }: BillingCountProps): React.JSX.Element;
|
|
8
|
+
export default BillingCount;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import { differenceInSeconds } from "date-fns";
|
|
3
|
+
import "./BillingCount.css";
|
|
4
|
+
function BillingCount(_a) {
|
|
5
|
+
var onEnd = _a.onEnd, setIsStarted = _a.setIsStarted;
|
|
6
|
+
var _b = useState(false), started = _b[0], setStarted = _b[1];
|
|
7
|
+
var _c = useState(0), time = _c[0], setTime = _c[1];
|
|
8
|
+
// Load saved start time and elapsed time from localStorage on component mount
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
var savedStartTime = localStorage.getItem("startTimeBilling");
|
|
11
|
+
var savedElapsedTime = parseInt(localStorage.getItem("elapsedTime") || "0", 10);
|
|
12
|
+
if (savedStartTime) {
|
|
13
|
+
var elapsed = differenceInSeconds(new Date(), new Date(savedStartTime)) + savedElapsedTime;
|
|
14
|
+
setTime(elapsed);
|
|
15
|
+
setStarted(true);
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
setTime(savedElapsedTime);
|
|
19
|
+
}
|
|
20
|
+
}, []);
|
|
21
|
+
// Update the timer every second if started
|
|
22
|
+
useEffect(function () {
|
|
23
|
+
var interval;
|
|
24
|
+
if (started) {
|
|
25
|
+
interval = setInterval(function () {
|
|
26
|
+
var savedStartTime = localStorage.getItem("startTimeBilling");
|
|
27
|
+
if (savedStartTime) {
|
|
28
|
+
var elapsed = differenceInSeconds(new Date(), new Date(savedStartTime)) + parseInt(localStorage.getItem("elapsedTime") || "0", 10);
|
|
29
|
+
setTime(elapsed);
|
|
30
|
+
}
|
|
31
|
+
}, 1000); // Update every second
|
|
32
|
+
}
|
|
33
|
+
return function () { return clearInterval(interval); };
|
|
34
|
+
}, [started]);
|
|
35
|
+
var handleButtonClick = function () {
|
|
36
|
+
if (started) {
|
|
37
|
+
// Stop timer and reset
|
|
38
|
+
setIsStarted && setIsStarted(false);
|
|
39
|
+
var savedStartTime = localStorage.getItem("startTimeBilling");
|
|
40
|
+
if (savedStartTime) {
|
|
41
|
+
var finalElapsedTime = differenceInSeconds(new Date(), new Date(savedStartTime)) + parseInt(localStorage.getItem("elapsedTime") || "0", 10);
|
|
42
|
+
onEnd(finalElapsedTime); // Callback with final time
|
|
43
|
+
}
|
|
44
|
+
localStorage.removeItem("startTimeBilling");
|
|
45
|
+
localStorage.removeItem("elapsedTime");
|
|
46
|
+
setTime(0);
|
|
47
|
+
setStarted(false);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
// Start timer from 0
|
|
51
|
+
setIsStarted && setIsStarted(true);
|
|
52
|
+
localStorage.setItem("startTimeBilling", new Date().toISOString());
|
|
53
|
+
setStarted(true);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
// Format the time in hours, minutes, and seconds
|
|
57
|
+
var formatTime = function (seconds) {
|
|
58
|
+
var hrs = Math.floor(seconds / 3600);
|
|
59
|
+
var mins = Math.floor((seconds % 3600) / 60);
|
|
60
|
+
var secs = seconds % 60;
|
|
61
|
+
return "".concat(hrs.toString().padStart(2, "0"), ":").concat(mins.toString().padStart(2, "0"), ":").concat(secs.toString().padStart(2, "0"));
|
|
62
|
+
};
|
|
63
|
+
return React.createElement("button", { onClick: handleButtonClick, className: "billing-button-wrapper" },
|
|
64
|
+
React.createElement("i", { className: "allaw-icon-clock" }),
|
|
65
|
+
formatTime(time),
|
|
66
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 43 48" },
|
|
67
|
+
React.createElement("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" })));
|
|
68
|
+
}
|
|
69
|
+
export default BillingCount;
|
|
70
|
+
/*
|
|
71
|
+
|
|
72
|
+
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as BillingCount } from "./BillingCount";
|
package/dist/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export { default as BorderRadius } from "./components/atoms/uiVariables/BorderRa
|
|
|
39
39
|
export { default as Shadows } from "./components/atoms/uiVariables/Shadows";
|
|
40
40
|
export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
|
|
41
41
|
export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
|
|
42
|
+
export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
|
|
42
43
|
export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
|
|
43
44
|
export { default as ContactCard } from "./components/molecules/contactCard/ContactCard";
|
|
44
45
|
export { default as CaseCardLink } from "./components/molecules/caseLinkCard/CaseLinkCard";
|
package/dist/index.js
CHANGED
|
@@ -48,6 +48,7 @@ export { default as Strokes } from "./components/atoms/uiVariables/Strokes";
|
|
|
48
48
|
// Molecules
|
|
49
49
|
// Appointment Slot
|
|
50
50
|
export { default as AppointmentSlot } from "./components/molecules/appointmentSlot/AppointmentSlot";
|
|
51
|
+
export { default as BillingCount } from "./components/molecules/billingCount/BillingCount";
|
|
51
52
|
// Case Card
|
|
52
53
|
export { default as CaseCard } from "./components/molecules/caseCard/CaseCard";
|
|
53
54
|
// Contact Card
|