@redneckz/wildless-cms-uni-blocks 0.14.565 → 0.14.567

package/mobile/lib/ui-kit/VerifyPhoneDialog/submitVerifyPhoneForm.js

@@ -0,0 +1,27 @@
+const SEND_CODE_URL = '/api/v1/sms/checkCode';
+export const submitVerifyPhoneForm = async (code) => {
+    const codeData = {
+        smsText: code,
+        smsCodesSetName: { key: 'AUTHENTICATION' },
+    };
+    const response = await fetch(SEND_CODE_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(codeData),
+    });
+    if (response.ok) {
+        const data = await response.json();
+        return {
+            success: true,
+            expiresIn: data.expires_in,
+        };
+    }
+    else {
+        return {
+            success: false,
+        };
+    }
+};
+//# sourceMappingURL=submitVerifyPhoneForm.js.map

package/mobile/lib/ui-kit/VerifyPhoneDialog/submitVerifyPhoneForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submitVerifyPhoneForm.js","sourceRoot":"","sources":["../../../src/ui-kit/VerifyPhoneDialog/submitVerifyPhoneForm.tsx"],"names":[],"mappings":"AAOA,MAAM,aAAa,GAAG,uBAAuB,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;IAC1D,MAAM,QAAQ,GAAwB;QACpC,OAAO,EAAE,IAAI;QACb,eAAe,EAAE,EAAE,GAAG,EAAE,gBAAgB,EAAE;KAC3C,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,aAAa,EAAE;QAC1C,MAAM,EAAE,MAAM;QACd,OAAO,EAAE;YACP,cAAc,EAAE,kBAAkB;SACnC;QACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;KAC/B,CAAC,CAAC;IAEH,IAAI,QAAQ,CAAC,EAAE,EAAE;QACf,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAEnC,OAAO;YACL,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,UAAU;SAC3B,CAAC;KACH;SAAM;QACL,OAAO;YACL,OAAO,EAAE,KAAK;SACf,CAAC;KACH;AACH,CAAC,CAAC"}

package/mobile/lib/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog.d.ts

@@ -0,0 +1,6 @@
+import { type DialogOptions } from '../DialogManager/useDialogManager';
+import { type VerifyPhoneDialogProps } from './VerifyPhoneDialog';
+export declare const useVerifyPhoneDialog: (props: VerifyPhoneDialogProps) => {
+    open: (options?: DialogOptions) => void;
+    close: () => void;
+};

package/mobile/lib/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { useDialogManager } from '../DialogManager/useDialogManager.js';
+import { VerifyPhoneDialog } from './VerifyPhoneDialog.js';
+export const useVerifyPhoneDialog = (props) => {
+    const { open, close } = useDialogManager();
+    return {
+        open: (options = {}) => open(_jsx(VerifyPhoneDialog, { ...props }), options),
+        close,
+    };
+};
+//# sourceMappingURL=useVerifyPhoneDialog.js.map

package/mobile/lib/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVerifyPhoneDialog.js","sourceRoot":"","sources":["../../../src/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAsB,MAAM,mCAAmC,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAA+B,MAAM,qBAAqB,CAAC;AAErF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAA6B,EAAE,EAAE;IACpE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE3C,OAAO;QACL,IAAI,EAAE,CAAC,UAAyB,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,KAAC,iBAAiB,OAAK,KAAK,GAAI,EAAE,OAAO,CAAC;QACtF,KAAK;KACN,CAAC;AACJ,CAAC,CAAC"}

package/mobile/src/ui-kit/DatePicker/Calendar.tsx

@@ -12,11 +12,15 @@ interface CalendarProps {
   min?: Date;
   max?: Date;
   onDateSelect?: (date: Date) => void;
+  setValue?: (value: boolean) => void;
 }
 
 export const Calendar = JSX<CalendarProps>(
-  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
-    const handleDateClick = useCallback((date: Date) => onDateSelect(date), []);
+  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
+    const handleDateClick = useCallback((date: Date) => {
+      onDateSelect(date);
+      setValue(false);
+    }, []);
 
     const { firstDayOfWeek, totalDays } = useMemo(
       () => ({

package/mobile/src/ui-kit/DatePicker/DatePicker.tsx

@@ -71,7 +71,7 @@ export const DatePicker = JSX<DatePickerProps>(
         <div className="relative">
           {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
           {showCalendar ? (
-            <div className="absolute bg-white z-20 select-none">
+            <div className="absolute bg-white z-20 select-none bottom-full">
               <div className="flex gap-s">
                 <div className="my-auto" onClick={handlePrevMonth}>
                   <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />

package/mobile/src/ui-kit/Loader/Loader.tsx

@@ -5,24 +5,26 @@ import { style } from '../../utils/style';
 interface LoaderProps {
   color?: TextColor;
   position?: 'static' | 'absolute';
+  blur?: boolean;
 }
 
-export const Loader = JSX<LoaderProps>(({ color = 'text-primary-main', position = 'absolute' }) => (
-  <div
-    className={style(
-      'flex justify-center items-center h-full w-full backdrop-blur-sm z-50',
-      position,
-    )}
-  >
+export const Loader = JSX<LoaderProps>(
+  ({ color = 'text-primary-main', position = 'absolute', blur = true }) => (
     <div
-      className={style(
-        'inline-block h-28 w-28',
-        'animate-spin rounded-full',
-        'border-8 border-solid border-current',
-        'border-r-transparent',
-        color,
-      )}
-      role="status"
-    />
-  </div>
-));
+      className={style('flex justify-center items-center h-full w-full z-50', position, {
+        'backdrop-blur': blur,
+      })}
+    >
+      <div
+        className={style(
+          'inline-block h-28 w-28',
+          'animate-spin rounded-full',
+          'border-8 border-solid border-current',
+          'border-r-transparent',
+          color,
+        )}
+        role="status"
+      />
+    </div>
+  ),
+);

package/mobile/src/ui-kit/TimerCircle/Timer.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+interface TimerProps {
+  time: number;
+  setTime: React.Dispatch<React.SetStateAction<number>>;
+  interval?: number;
+  className?: string;
+}
+
+export const Timer = JSX<TimerProps>(({ time, setTime, className }) => {
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(time - 1);
+    }, 1000);
+
+    if (time === 0) {
+      clearInterval(timer);
+    }
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [time]);
+
+  return <span className={className}>{secondsToMinSecPadded(time)}</span>;
+});
+
+const secondsToMinSecPadded = (time: number) => {
+  const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
+  const seconds = `${time % 60}`.padStart(2, '0');
+
+  return `${minutes}:${seconds}`;
+};

package/mobile/src/ui-kit/{Timer/Timer.tsx → TimerCircle/TimerCircle.tsx}

@@ -1,31 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline';
 import { RichText } from '../RichText/RichText';
+import { Timer } from './Timer';
 
-interface TimerProps {
+interface TimerCircleProps {
   interval?: number;
   title?: string;
   __html?: string;
 }
 
-export const Timer = JSX<TimerProps>(({ interval = 0, title, __html }) => {
+export const TimerCircle = JSX<TimerCircleProps>(({ interval = 0, title, __html }) => {
   const [time, setTime] = useState(interval);
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTime(time - 1);
-    }, 1000);
-
-    if (time === 0) {
-      clearInterval(timer);
-    }
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [time]);
-
   const gradientPercentage = 100 - ((interval - time) / interval) * 100;
 
   return (
@@ -40,7 +27,7 @@ export const Timer = JSX<TimerProps>(({ interval = 0, title, __html }) => {
             }}
           />
           <div className="z-10 flex items-center justify-center px-4 py-2 rounded-full w-56 h-56 bg-white text-3xl text-primary-text">
-            {secondsToMinSecPadded(time)}
+            <Timer interval={interval} time={time} setTime={setTime} />
           </div>
         </div>
         <RichText __html={__html} />
@@ -48,10 +35,3 @@ export const Timer = JSX<TimerProps>(({ interval = 0, title, __html }) => {
     </div>
   );
 });
-
-const secondsToMinSecPadded = (time: number) => {
-  const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
-  const seconds = `${time % 60}`.padStart(2, '0');
-
-  return `${minutes}:${seconds}`;
-};

package/mobile/src/ui-kit/VerifyPhoneDialog/InputCode.tsx

@@ -0,0 +1,90 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+type InputCodeProps = {
+  values: string[];
+  setValues: React.Dispatch<React.SetStateAction<string[]>>;
+  hasError?: boolean;
+};
+
+export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    inputRefs.current?.[activeIndex]?.focus();
+  }, [activeIndex]);
+
+  const handleChange = useCallback(
+    (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.currentTarget;
+      const isLastIndex = index === values.length - 1;
+      const isMultipleCharacters = value.length > 1;
+      if (isLastIndex && isMultipleCharacters) {
+        return;
+      }
+      setValues(values.map((_, i) => (i === index ? value : _)));
+      setActiveIndex(index + 1);
+    },
+    [values],
+  );
+
+  const handleKeyDown = useCallback(
+    (currentIndex: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const { key } = event;
+      if (key === 'Backspace' && !values[currentIndex]) {
+        const previousIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
+        const updatedValues = values.map((value, index) => (index === previousIndex ? '' : value));
+        setValues(updatedValues);
+        setActiveIndex(previousIndex);
+      }
+    },
+    [values],
+  );
+
+  const handlePaste = useCallback(
+    (event: React.ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const pastedData = event.clipboardData.getData('text');
+      const updatedValues = values.map((_, idx) => (idx < pastedData.length ? pastedData[idx] : _));
+      setValues(updatedValues);
+      setActiveIndex(updatedValues.length - 1);
+    },
+    [values],
+  );
+
+  return (
+    <div className="flex flex-col gap-2 text-center">
+      <div>
+        {values.map((value, index) => (
+          <input
+            key={index}
+            type="number"
+            maxLength={1}
+            value={value}
+            onChange={handleChange(index)}
+            onPaste={handlePaste}
+            ref={(ref) => {
+              if (!inputRefs.current) {
+                inputRefs.current = [];
+              }
+              inputRefs.current[index] = ref as HTMLInputElement;
+            }}
+            onFocus={(event) => event.target.select()}
+            onKeyDown={handleKeyDown(index)}
+            className={getInputStyle(index, values, hasError)}
+          />
+        ))}
+      </div>
+      {hasError ? <div className="text-error">Неверный код</div> : null}
+    </div>
+  );
+});
+
+const getInputStyle = (index: number, values: string[], hasError?: boolean) => {
+  const isInputEmpty = !values[index];
+
+  return `w-16 h-20 text-3xl text-center p-2 m-2 border ${
+    hasError && isInputEmpty ? 'border-error' : 'border-gray'
+  } rounded-md caret-transparent outline-none`;
+};

package/mobile/src/ui-kit/VerifyPhoneDialog/SubmitButton.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+interface SubmitButtonProps {
+  isDisabled: boolean;
+  onClick: () => void;
+  text?: string;
+}
+
+export const SubmitButton = JSX<SubmitButtonProps>(({ isDisabled, onClick, text }) => {
+  return (
+    <Button type="button" onClick={onClick} disabled={isDisabled}>
+      <Text font="font-medium">{text}</Text>
+    </Button>
+  );
+});

package/mobile/src/ui-kit/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -0,0 +1,83 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useMemo } from 'react';
+import { Headline } from '../../components/Headline/Headline';
+import { Dialog } from '../DialogManager/Dialog';
+import { useDialogManager } from '../DialogManager/useDialogManager';
+import { LinkButton } from '../LinkButton/LinkButton';
+import { Loader } from '../Loader/Loader';
+import { RichText } from '../RichText/RichText';
+import { Timer } from '../TimerCircle/Timer';
+import { InputCode } from './InputCode';
+import { SubmitButton } from './SubmitButton';
+import { submitVerifyPhoneForm } from './submitVerifyPhoneForm';
+
+export interface VerifyPhoneDialogProps {
+  title?: string;
+  description?: string;
+  code?: boolean;
+  __html?: string;
+  codeLength?: number;
+  textButton?: string;
+}
+
+export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
+  ({ title, description, __html, code = true, codeLength = 4, textButton = '' }) => {
+    const { close } = useDialogManager();
+
+    const [values, setValues] = useState(Array(codeLength).fill(''));
+    const [hasError, setHasError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [timeNextReq, setTimeNextReq] = useState<number>(0);
+
+    const isValidCode = useMemo(() => values.every(Boolean), [values]);
+
+    const handleSubmit = useCallback(async () => {
+      setIsLoading(true);
+      const { success, expiresIn } = await submitVerifyPhoneForm(values.join(''));
+      setIsLoading(false);
+
+      setTimeNextReq(expiresIn as number);
+
+      if (success) {
+        close();
+      } else {
+        setHasError(true);
+      }
+    }, [values]);
+
+    return (
+      <Dialog className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg">
+        <div className="flex flex-col gap-lg items-center rounded-md">
+          <Headline
+            className="w-full"
+            title={title}
+            description={description}
+            headlineVersion="S"
+            isEmbedded={true}
+          />
+          {code ? <InputCode values={values} setValues={setValues} hasError={hasError} /> : null}
+          {timeNextReq ? (
+            <div className="flex flex-row text-l font-light text-primary-main">
+              Получить новый код можно через
+              <Timer
+                className="text-primary-main ml-1"
+                time={timeNextReq}
+                setTime={setTimeNextReq}
+              />
+            </div>
+          ) : (
+            <LinkButton className="text-primary-main">Получить новый код</LinkButton>
+          )}
+
+          <RichText itemSize="list-s" __html={__html} />
+          {textButton ? (
+            <SubmitButton isDisabled={!isValidCode} onClick={handleSubmit} text={textButton} />
+          ) : null}
+
+          {isLoading ? <Loader blur={false} /> : null}
+        </div>
+      </Dialog>
+    );
+  },
+);

package/mobile/src/ui-kit/VerifyPhoneDialog/submitVerifyPhoneForm.tsx

@@ -0,0 +1,36 @@
+export interface VerifyPhoneFormData {
+  smsText: string;
+  smsCodesSetName: {
+    key: string;
+  };
+}
+
+const SEND_CODE_URL = '/api/v1/sms/checkCode';
+
+export const submitVerifyPhoneForm = async (code: string) => {
+  const codeData: VerifyPhoneFormData = {
+    smsText: code,
+    smsCodesSetName: { key: 'AUTHENTICATION' },
+  };
+
+  const response = await fetch(SEND_CODE_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(codeData),
+  });
+
+  if (response.ok) {
+    const data = await response.json();
+
+    return {
+      success: true,
+      expiresIn: data.expires_in,
+    };
+  } else {
+    return {
+      success: false,
+    };
+  }
+};

package/mobile/src/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog.tsx

@@ -0,0 +1,11 @@
+import { useDialogManager, type DialogOptions } from '../DialogManager/useDialogManager';
+import { VerifyPhoneDialog, type VerifyPhoneDialogProps } from './VerifyPhoneDialog';
+
+export const useVerifyPhoneDialog = (props: VerifyPhoneDialogProps) => {
+  const { open, close } = useDialogManager();
+
+  return {
+    open: (options: DialogOptions = {}) => open(<VerifyPhoneDialog {...props} />, options),
+    close,
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.565",
+  "version": "0.14.567",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/ui-kit/DatePicker/Calendar.tsx

@@ -12,11 +12,15 @@ interface CalendarProps {
   min?: Date;
   max?: Date;
   onDateSelect?: (date: Date) => void;
+  setValue?: (value: boolean) => void;
 }
 
 export const Calendar = JSX<CalendarProps>(
-  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
-    const handleDateClick = useCallback((date: Date) => onDateSelect(date), []);
+  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
+    const handleDateClick = useCallback((date: Date) => {
+      onDateSelect(date);
+      setValue(false);
+    }, []);
 
     const { firstDayOfWeek, totalDays } = useMemo(
       () => ({

package/src/ui-kit/DatePicker/DatePicker.tsx

@@ -71,7 +71,7 @@ export const DatePicker = JSX<DatePickerProps>(
         <div className="relative">
           {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
           {showCalendar ? (
-            <div className="absolute bg-white z-20 select-none">
+            <div className="absolute bg-white z-20 select-none bottom-full">
               <div className="flex gap-s">
                 <div className="my-auto" onClick={handlePrevMonth}>
                   <Icon {...ICON_PROPS} className="-rotate-90 cursor-pointer" />

package/src/ui-kit/Loader/Loader.tsx

@@ -5,24 +5,26 @@ import { style } from '../../utils/style';
 interface LoaderProps {
   color?: TextColor;
   position?: 'static' | 'absolute';
+  blur?: boolean;
 }
 
-export const Loader = JSX<LoaderProps>(({ color = 'text-primary-main', position = 'absolute' }) => (
-  <div
-    className={style(
-      'flex justify-center items-center h-full w-full backdrop-blur-sm z-50',
-      position,
-    )}
-  >
+export const Loader = JSX<LoaderProps>(
+  ({ color = 'text-primary-main', position = 'absolute', blur = true }) => (
     <div
-      className={style(
-        'inline-block h-28 w-28',
-        'animate-spin rounded-full',
-        'border-8 border-solid border-current',
-        'border-r-transparent',
-        color,
-      )}
-      role="status"
-    />
-  </div>
-));
+      className={style('flex justify-center items-center h-full w-full z-50', position, {
+        'backdrop-blur': blur,
+      })}
+    >
+      <div
+        className={style(
+          'inline-block h-28 w-28',
+          'animate-spin rounded-full',
+          'border-8 border-solid border-current',
+          'border-r-transparent',
+          color,
+        )}
+        role="status"
+      />
+    </div>
+  ),
+);

package/src/ui-kit/TimerCircle/Timer.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+interface TimerProps {
+  time: number;
+  setTime: React.Dispatch<React.SetStateAction<number>>;
+  interval?: number;
+  className?: string;
+}
+
+export const Timer = JSX<TimerProps>(({ time, setTime, className }) => {
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(time - 1);
+    }, 1000);
+
+    if (time === 0) {
+      clearInterval(timer);
+    }
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [time]);
+
+  return <span className={className}>{secondsToMinSecPadded(time)}</span>;
+});
+
+const secondsToMinSecPadded = (time: number) => {
+  const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
+  const seconds = `${time % 60}`.padStart(2, '0');
+
+  return `${minutes}:${seconds}`;
+};

package/src/ui-kit/{Timer/Timer.fixture.tsx → TimerCircle/TimerCircle.fixture.tsx}

@@ -1,11 +1,11 @@
 import '../../setup-fixture';
 
-import { Timer } from './Timer';
+import { TimerCircle } from './TimerCircle';
 
 export default {
   default: (
     <div>
-      <Timer
+      <TimerCircle
         interval={100}
         title="Заявка в обработке"
         __html="<p>Нам нужно больше времени для обработки вашей заявки.</p>

package/src/ui-kit/{Timer/Timer.tsx → TimerCircle/TimerCircle.tsx}

@@ -1,31 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline';
 import { RichText } from '../RichText/RichText';
+import { Timer } from './Timer';
 
-interface TimerProps {
+interface TimerCircleProps {
   interval?: number;
   title?: string;
   __html?: string;
 }
 
-export const Timer = JSX<TimerProps>(({ interval = 0, title, __html }) => {
+export const TimerCircle = JSX<TimerCircleProps>(({ interval = 0, title, __html }) => {
   const [time, setTime] = useState(interval);
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTime(time - 1);
-    }, 1000);
-
-    if (time === 0) {
-      clearInterval(timer);
-    }
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [time]);
-
   const gradientPercentage = 100 - ((interval - time) / interval) * 100;
 
   return (
@@ -40,7 +27,7 @@ export const Timer = JSX<TimerProps>(({ interval = 0, title, __html }) => {
             }}
           />
           <div className="z-10 flex items-center justify-center px-4 py-2 rounded-full w-56 h-56 bg-white text-3xl text-primary-text">
-            {secondsToMinSecPadded(time)}
+            <Timer interval={interval} time={time} setTime={setTime} />
           </div>
         </div>
         <RichText __html={__html} />
@@ -48,10 +35,3 @@ export const Timer = JSX<TimerProps>(({ interval = 0, title, __html }) => {
     </div>
   );
 });
-
-const secondsToMinSecPadded = (time: number) => {
-  const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
-  const seconds = `${time % 60}`.padStart(2, '0');
-
-  return `${minutes}:${seconds}`;
-};