@sikka/hawa 0.14.10-next → 0.14.12-next

package/dist/index.d.mts

@@ -1360,18 +1360,20 @@ type TConfirmation = {
         weSentCode?: string;
         didntGetCode?: string;
         resendCode?: string;
-        codeLabel?: string;
-        codePlaceholder?: string;
+        resendCodeTimer?: string;
         codeRequiredText?: string;
         codeTooShort?: string;
         confirm?: string;
         cancel?: string;
+        seconds?: string;
     };
     showError?: any;
     errorTitle?: any;
     errorText?: any;
     phoneNumber?: string;
+    confirmLoading?: boolean;
     handleConfirm?: any;
+    handleResend?: any;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
 

package/dist/index.d.ts

@@ -1360,18 +1360,20 @@ type TConfirmation = {
         weSentCode?: string;
         didntGetCode?: string;
         resendCode?: string;
-        codeLabel?: string;
-        codePlaceholder?: string;
+        resendCodeTimer?: string;
         codeRequiredText?: string;
         codeTooShort?: string;
         confirm?: string;
         cancel?: string;
+        seconds?: string;
     };
     showError?: any;
     errorTitle?: any;
     errorText?: any;
     phoneNumber?: string;
+    confirmLoading?: boolean;
     handleConfirm?: any;
+    handleResend?: any;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
 

package/dist/index.js

@@ -8545,7 +8545,7 @@ var import_react_hook_form5 = require("react-hook-form");
 var import_zod5 = require("@hookform/resolvers/zod");
 var z5 = __toESM(require("zod"));
 var CodeConfirmation = function(props) {
-    var _props_texts, _props_texts1, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7;
+    var _props_texts, _props_texts1, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7, _props_texts8, _props_texts9;
     var formSchema = z5.object({
         otp_code: z5.string({
             required_error: (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.codeRequiredText
@@ -8556,7 +8556,38 @@ var CodeConfirmation = function(props) {
     var _ref = (0, import_react_hook_form5.useForm)({
         resolver: (0, import_zod5.zodResolver)(formSchema)
     }), handleSubmit = _ref.handleSubmit, control = _ref.control, formState = _ref.formState, setValue = _ref.setValue;
-    var _props_texts_checkYourPhone, _props_texts_weSentCode, _props_texts_didntGetCode, _props_texts_resendCode, _props_texts_cancel, _props_texts_confirm;
+    var _ref1 = _sliced_to_array((0, import_react50.useState)(null), 2), resendTimer = _ref1[0], setResendTimer = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react50.useState)(0), 2), remainingTime = _ref2[0], setRemainingTime = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react50.useState)(false), 2), showResendTimer = _ref3[0], setShowResendTimer = _ref3[1];
+    var startResendTimer = function() {
+        if (resendTimer !== null) {
+            clearInterval(resendTimer);
+            setResendTimer(null);
+        }
+        var timerDuration = 60;
+        setRemainingTime(timerDuration);
+        setShowResendTimer(true);
+        var newTimer = window.setInterval(function() {
+            setRemainingTime(function(prevTime) {
+                if (prevTime > 0) {
+                    return prevTime - 1;
+                } else {
+                    clearInterval(newTimer);
+                    setShowResendTimer(false);
+                    return 0;
+                }
+            });
+        }, 1e3);
+        setResendTimer(newTimer);
+    };
+    (0, import_react50.useEffect)(function() {
+        return function() {
+            if (resendTimer !== null) {
+                clearInterval(resendTimer);
+            }
+        };
+    }, []);
+    var _props_texts_didntGetCode;
     return /* @__PURE__ */ import_react50.default.createElement(Card, null, /* @__PURE__ */ import_react50.default.createElement(CardContent, {
         headless: true
     }, props.showError && /* @__PURE__ */ import_react50.default.createElement(Alert, {
@@ -8567,9 +8598,9 @@ var CodeConfirmation = function(props) {
         className: "hawa-mb-4 dark:hawa-text-white"
     }, /* @__PURE__ */ import_react50.default.createElement("div", {
         className: "hawa-text-lg hawa-font-bold"
-    }, (_props_texts_checkYourPhone = (_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.checkYourPhone) !== null && _props_texts_checkYourPhone !== void 0 ? _props_texts_checkYourPhone : "Please check your phone"), /* @__PURE__ */ import_react50.default.createElement("div", {
+    }, ((_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.checkYourPhone) || "Please check your phone"), /* @__PURE__ */ import_react50.default.createElement("div", {
         className: "hawa-text-muted-foreground"
-    }, /* @__PURE__ */ import_react50.default.createElement("span", null, (_props_texts_weSentCode = (_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.weSentCode) !== null && _props_texts_weSentCode !== void 0 ? _props_texts_weSentCode : "We've sent a code to "), /* @__PURE__ */ import_react50.default.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ import_react50.default.createElement("form", {
+    }, /* @__PURE__ */ import_react50.default.createElement("span", null, ((_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.weSentCode) || "We've sent a code to "), /* @__PURE__ */ import_react50.default.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ import_react50.default.createElement("form", {
         noValidate: true,
         onSubmit: handleSubmit(function(e) {
             if (props.handleConfirm) {
@@ -8593,15 +8624,23 @@ var CodeConfirmation = function(props) {
                 helperText: (_formState_errors_otp_code = formState.errors.otp_code) === null || _formState_errors_otp_code === void 0 ? void 0 : _formState_errors_otp_code.message
             });
         }
-    }), /* @__PURE__ */ import_react50.default.createElement("div", {
+    }), showResendTimer ? /* @__PURE__ */ import_react50.default.createElement("div", {
         className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground"
-    }, /* @__PURE__ */ import_react50.default.createElement("span", null, (_props_texts_didntGetCode = (_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.didntGetCode) !== null && _props_texts_didntGetCode !== void 0 ? _props_texts_didntGetCode : "Didn't get the code?"), " ", /* @__PURE__ */ import_react50.default.createElement("span", {
-        className: "clickable-link"
-    }, (_props_texts_resendCode = (_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.resendCode) !== null && _props_texts_resendCode !== void 0 ? _props_texts_resendCode : "Click to resend")), /* @__PURE__ */ import_react50.default.createElement("div", {
+    }, (_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.resendCodeTimer, " ", /* @__PURE__ */ import_react50.default.createElement("strong", null, remainingTime), " ", (_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.seconds) : /* @__PURE__ */ import_react50.default.createElement("div", {
+        className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground"
+    }, /* @__PURE__ */ import_react50.default.createElement("span", null, (_props_texts_didntGetCode = (_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.didntGetCode) !== null && _props_texts_didntGetCode !== void 0 ? _props_texts_didntGetCode : "Didn't get the code?"), " ", /* @__PURE__ */ import_react50.default.createElement("span", {
+        className: "clickable-link",
+        onClick: function() {
+            startResendTimer();
+            props.handleResend();
+        }
+    }, ((_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.resendCode) || "Click to resend")), /* @__PURE__ */ import_react50.default.createElement("div", {
         className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2"
     }, /* @__PURE__ */ import_react50.default.createElement(Button, {
         variant: "secondary"
-    }, (_props_texts_cancel = (_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.cancel) !== null && _props_texts_cancel !== void 0 ? _props_texts_cancel : "Cancel"), /* @__PURE__ */ import_react50.default.createElement(Button, null, (_props_texts_confirm = (_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.confirm) !== null && _props_texts_confirm !== void 0 ? _props_texts_confirm : "Confirm")))));
+    }, ((_props_texts8 = props.texts) === null || _props_texts8 === void 0 ? void 0 : _props_texts8.cancel) || "Cancel"), /* @__PURE__ */ import_react50.default.createElement(Button, {
+        isLoading: props.confirmLoading
+    }, ((_props_texts9 = props.texts) === null || _props_texts9 === void 0 ? void 0 : _props_texts9.confirm) || "Confirm")))));
 };
 // components/blocks/feedback/UserReferralSource.tsx
 var import_react51 = __toESM(require("react"));

package/dist/index.mjs

@@ -8621,7 +8621,7 @@ var ResetPasswordForm = (props) => {
 };
 
 // components/blocks/auth/CodeConfirmation.tsx
-import React75 from "react";
+import React75, { useEffect as useEffect20, useState as useState30 } from "react";
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
@@ -8632,6 +8632,37 @@ var CodeConfirmation = (props) => {
   const { handleSubmit, control, formState, setValue } = useForm5({
     resolver: zodResolver5(formSchema)
   });
+  const [resendTimer, setResendTimer] = useState30(null);
+  const [remainingTime, setRemainingTime] = useState30(0);
+  const [showResendTimer, setShowResendTimer] = useState30(false);
+  const startResendTimer = () => {
+    if (resendTimer !== null) {
+      clearInterval(resendTimer);
+      setResendTimer(null);
+    }
+    const timerDuration = 60;
+    setRemainingTime(timerDuration);
+    setShowResendTimer(true);
+    const newTimer = window.setInterval(() => {
+      setRemainingTime((prevTime) => {
+        if (prevTime > 0) {
+          return prevTime - 1;
+        } else {
+          clearInterval(newTimer);
+          setShowResendTimer(false);
+          return 0;
+        }
+      });
+    }, 1e3);
+    setResendTimer(newTimer);
+  };
+  useEffect20(() => {
+    return () => {
+      if (resendTimer !== null) {
+        clearInterval(resendTimer);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ React75.createElement(Card, null, /* @__PURE__ */ React75.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React75.createElement(
     Alert,
     {
@@ -8639,7 +8670,7 @@ var CodeConfirmation = (props) => {
       text: props.errorText,
       severity: "error"
     }
-  ), /* @__PURE__ */ React75.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ React75.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, props.texts?.checkYourPhone ?? "Please check your phone"), /* @__PURE__ */ React75.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ React75.createElement("span", null, props.texts?.weSentCode ?? "We've sent a code to "), /* @__PURE__ */ React75.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ React75.createElement(
+  ), /* @__PURE__ */ React75.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ React75.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, props.texts?.checkYourPhone || "Please check your phone"), /* @__PURE__ */ React75.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ React75.createElement("span", null, props.texts?.weSentCode || "We've sent a code to "), /* @__PURE__ */ React75.createElement("span", null, props.phoneNumber)), " "), /* @__PURE__ */ React75.createElement(
     "form",
     {
       noValidate: true,
@@ -8669,13 +8700,23 @@ var CodeConfirmation = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ React75.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, /* @__PURE__ */ React75.createElement("span", null, props.texts?.didntGetCode ?? "Didn't get the code?"), " ", /* @__PURE__ */ React75.createElement("span", { className: "clickable-link" }, props.texts?.resendCode ?? "Click to resend")),
-    /* @__PURE__ */ React75.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ React75.createElement(Button, { variant: "secondary" }, props.texts?.cancel ?? "Cancel"), /* @__PURE__ */ React75.createElement(Button, null, props.texts?.confirm ?? "Confirm"))
+    showResendTimer ? /* @__PURE__ */ React75.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, props.texts?.resendCodeTimer, " ", /* @__PURE__ */ React75.createElement("strong", null, remainingTime), " ", props.texts?.seconds) : /* @__PURE__ */ React75.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, /* @__PURE__ */ React75.createElement("span", null, props.texts?.didntGetCode ?? "Didn't get the code?"), " ", /* @__PURE__ */ React75.createElement(
+      "span",
+      {
+        className: "clickable-link",
+        onClick: () => {
+          startResendTimer();
+          props.handleResend();
+        }
+      },
+      props.texts?.resendCode || "Click to resend"
+    )),
+    /* @__PURE__ */ React75.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ React75.createElement(Button, { variant: "secondary" }, props.texts?.cancel || "Cancel"), /* @__PURE__ */ React75.createElement(Button, { isLoading: props.confirmLoading }, props.texts?.confirm || "Confirm"))
   )));
 };
 
 // components/blocks/feedback/UserReferralSource.tsx
-import React76, { useRef as useRef11, useState as useState30 } from "react";
+import React76, { useRef as useRef11, useState as useState31 } from "react";
 import { Controller as Controller6, useForm as useForm6 } from "react-hook-form";
 import { zodResolver as zodResolver6 } from "@hookform/resolvers/zod";
 import * as z6 from "zod";
@@ -8684,7 +8725,7 @@ var UserReferralSource = ({
   options = [],
   ...props
 }) => {
-  const [closed, setClosed] = useState30(false);
+  const [closed, setClosed] = useState31(false);
   const popUpRef = useRef11(null);
   const formSchema = z6.object({
     source: z6.string({ required_error: props.texts?.pleaseSelectOption }),
@@ -8812,22 +8853,22 @@ var UserReferralSource = ({
 };
 
 // components/blocks/feedback/FeedbackRating.tsx
-import React77, { useEffect as useEffect21, useRef as useRef12, useState as useState31 } from "react";
+import React77, { useEffect as useEffect22, useRef as useRef12, useState as useState32 } from "react";
 import clsx11 from "clsx";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
 }) => {
-  const [closed, setClosed] = useState31(false);
-  const [answered, setAnswered] = useState31(false);
-  const [clickedOption, setClickedOption] = useState31(null);
-  const [closingTimer, setClosingTimer] = useState31(5);
+  const [closed, setClosed] = useState32(false);
+  const [answered, setAnswered] = useState32(false);
+  const [clickedOption, setClickedOption] = useState32(null);
+  const [closingTimer, setClosingTimer] = useState32(5);
   const popUpRef = useRef12(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect21(() => {
+  useEffect22(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -8926,12 +8967,12 @@ var FeedbackRating = ({
 };
 
 // components/blocks/feedback/FeedbackEmoji.tsx
-import React78, { useState as useState32 } from "react";
+import React78, { useState as useState33 } from "react";
 var FeedbackEmoji = (props) => {
-  const [selectedEmoji, setSelectedEmoji] = useState32(null);
-  const [loadingSubmit, setLoadingSubmit] = useState32(false);
-  const [feedbackText, setFeedbackText] = useState32("");
-  const [helperText, setHelperText] = useState32(false);
+  const [selectedEmoji, setSelectedEmoji] = useState33(null);
+  const [loadingSubmit, setLoadingSubmit] = useState33(false);
+  const [feedbackText, setFeedbackText] = useState33("");
+  const [helperText, setHelperText] = useState33(false);
   let emojis = [
     { icon: /* @__PURE__ */ React78.createElement(VeryGoodEmoji, null), value: "very-good" },
     { icon: /* @__PURE__ */ React78.createElement(GoodEmoji, null), value: "good" },
@@ -9392,7 +9433,7 @@ var PricingPlans = (props) => {
 };
 
 // components/blocks/pricing/ComparingPlans.tsx
-import React88, { useState as useState33 } from "react";
+import React88, { useState as useState34 } from "react";
 var CheckMark = () => /* @__PURE__ */ React88.createElement(
   "svg",
   {
@@ -9428,8 +9469,8 @@ var UncheckMark = () => /* @__PURE__ */ React88.createElement(
   )
 );
 var ComparingPlans = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState33("sar");
-  const [currentCycle, setCurrentCycle] = useState33("month");
+  const [currentCurrency, setCurrentCurrency] = useState34("sar");
+  const [currentCycle, setCurrentCycle] = useState34("month");
   return /* @__PURE__ */ React88.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React88.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React88.createElement(
     Radio,
     {
@@ -9487,10 +9528,10 @@ var ComparingPlans = (props) => {
 };
 
 // components/blocks/pricing/HorizontalPricing.tsx
-import React89, { useState as useState34 } from "react";
+import React89, { useState as useState35 } from "react";
 import clsx12 from "clsx";
 var HorizontalPricing = (props) => {
-  const [selectedCard, setSelectedCard] = useState34("");
+  const [selectedCard, setSelectedCard] = useState35("");
   let data = [
     { title: "basic", price: "$49", cycle: "/mo" },
     { title: "business", price: "$99", cycle: "/mo" },
@@ -9601,22 +9642,22 @@ var Usage = (props) => {
 };
 
 // components/hooks/useDiscloser.ts
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 
 // components/hooks/useHover.ts
-import { useEffect as useEffect22, useRef as useRef13, useState as useState36 } from "react";
+import { useEffect as useEffect23, useRef as useRef13, useState as useState37 } from "react";
 
 // components/hooks/useCarousel.ts
-import { useState as useState37, useRef as useRef14 } from "react";
+import { useState as useState38, useRef as useRef14 } from "react";
 
 // components/hooks/useWindowSize.ts
-import { useEffect as useEffect23, useState as useState38 } from "react";
+import { useEffect as useEffect24, useState as useState39 } from "react";
 var useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState38({
+  const [windowSize, setWindowSize] = useState39({
     width: void 0,
     height: void 0
   });
-  useEffect23(() => {
+  useEffect24(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -9631,7 +9672,7 @@ var useWindowSize = () => {
 };
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef15, useState as useState39, useEffect as useEffect24 } from "react";
+import { useRef as useRef15, useState as useState40, useEffect as useEffect25 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -9643,7 +9684,7 @@ function useFocusWithin({
   onFocus
 } = {}) {
   const ref = useRef15(null);
-  const [focused, _setFocused] = useState39(false);
+  const [focused, _setFocused] = useState40(false);
   const focusedRef = useRef15(false);
   const setFocused = (value) => {
     _setFocused(value);
@@ -9661,7 +9702,7 @@ function useFocusWithin({
       onBlur?.(event);
     }
   };
-  useEffect24(() => {
+  useEffect25(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -9676,7 +9717,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState40, useEffect as useEffect25, useRef as useRef16 } from "react";
+import { useState as useState41, useEffect as useEffect26, useRef as useRef16 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -9698,11 +9739,11 @@ function getInitialValue(query, initialValue) {
 function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
   getInitialValueInEffect: true
 }) {
-  const [matches, setMatches] = useState40(
+  const [matches, setMatches] = useState41(
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef16();
-  useEffect25(() => {
+  useEffect26(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -9717,16 +9758,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState41, useEffect as useEffect26 } from "react";
+import { useState as useState42, useEffect as useEffect27 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState42, useEffect as useEffect27 } from "react";
+import { useState as useState43, useEffect as useEffect28 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect28, useState as useState43 } from "react";
+import { useEffect as useEffect29, useState as useState44 } from "react";
 function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState43(initialTab);
-  useEffect28(() => {
+  const [activeTab, setActiveTab] = useState44(initialTab);
+  useEffect29(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.14.10-next",
+  "version": "0.14.12-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {