chore: review

packages/ui/primitives/duration-selector.tsx

@@ -2,20 +2,12 @@
 
 import React from 'react';
 
-import { useLingui } from '@lingui/react';
-import { DateTime } from 'luxon';
+import type { DurationValue } from '@documenso/lib/utils/expiry';
 
 import { cn } from '../lib/utils';
 import { Input } from './input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
 
-export type TimeUnit = 'minutes' | 'hours' | 'days' | 'weeks' | 'months';
-
-export interface DurationValue {
-  amount: number;
-  unit: TimeUnit;
-}
-
 export interface DurationSelectorProps {
   value?: DurationValue;
   onChange?: (value: DurationValue) => void;
@@ -25,7 +17,7 @@ export interface DurationSelectorProps {
   maxAmount?: number;
 }
 
-const TIME_UNITS: Array<{ value: TimeUnit; label: string; labelPlural: string }> = [
+const TIME_UNITS: Array<{ value: string; label: string; labelPlural: string }> = [
   { value: 'minutes', label: 'Minute', labelPlural: 'Minutes' },
   { value: 'hours', label: 'Hour', labelPlural: 'Hours' },
   { value: 'days', label: 'Day', labelPlural: 'Days' },
@@ -41,8 +33,6 @@ export const DurationSelector = ({
   minAmount = 1,
   maxAmount = 365,
 }: DurationSelectorProps) => {
-  const { _ } = useLingui();
-
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const amount = parseInt(event.target.value, 10);
     if (!isNaN(amount) && amount >= minAmount && amount <= maxAmount) {
@@ -50,11 +40,11 @@ export const DurationSelector = ({
     }
   };
 
-  const handleUnitChange = (unit: TimeUnit) => {
+  const handleUnitChange = (unit: string) => {
     onChange?.({ ...value, unit });
   };
 
-  const getUnitLabel = (unit: TimeUnit, amount: number) => {
+  const getUnitLabel = (unit: string, amount: number) => {
     const unitConfig = TIME_UNITS.find((u) => u.value === unit);
     if (!unitConfig) return unit;
 
@@ -87,20 +77,3 @@ export const DurationSelector = ({
     </div>
   );
 };
-
-export const calculateExpiryDate = (duration: DurationValue, fromDate: Date = new Date()): Date => {
-  switch (duration.unit) {
-    case 'minutes':
-      return DateTime.fromJSDate(fromDate).plus({ minutes: duration.amount }).toJSDate();
-    case 'hours':
-      return DateTime.fromJSDate(fromDate).plus({ hours: duration.amount }).toJSDate();
-    case 'days':
-      return DateTime.fromJSDate(fromDate).plus({ days: duration.amount }).toJSDate();
-    case 'weeks':
-      return DateTime.fromJSDate(fromDate).plus({ weeks: duration.amount }).toJSDate();
-    case 'months':
-      return DateTime.fromJSDate(fromDate).plus({ months: duration.amount }).toJSDate();
-    default:
-      return DateTime.fromJSDate(fromDate).plus({ days: duration.amount }).toJSDate();
-  }
-};

packages/ui/primitives/expiry-settings-picker.tsx

@@ -3,11 +3,12 @@
 import React from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { calculateExpiryDate, formatExpiryDate } from '@documenso/lib/utils/expiry';
+
 import { cn } from '../lib/utils';
 import { DurationSelector } from './duration-selector';
 import {
@@ -48,8 +49,6 @@ export const ExpirySettingsPicker = ({
   onValueChange,
   value,
 }: ExpirySettingsPickerProps) => {
-  const { _ } = useLingui();
-
   const form = useForm<ExpirySettings>({
     resolver: zodResolver(ZExpirySettingsSchema),
     defaultValues,
@@ -59,6 +58,13 @@ export const ExpirySettingsPicker = ({
   const { watch, setValue, getValues } = form;
   const expiryDuration = watch('expiryDuration');
 
+  const calculatedExpiryDate = React.useMemo(() => {
+    if (expiryDuration?.amount && expiryDuration?.unit) {
+      return calculateExpiryDate(expiryDuration);
+    }
+    return null;
+  }, [expiryDuration]);
+
   // Call onValueChange when form values change
   React.useEffect(() => {
     const subscription = watch((value) => {
@@ -111,6 +117,11 @@ export const ExpirySettingsPicker = ({
                   maxAmount={365}
                 />
               </FormControl>
+              {calculatedExpiryDate && (
+                <FormDescription>
+                  <Trans>Links will expire on: {formatExpiryDate(calculatedExpiryDate)}</Trans>
+                </FormDescription>
+              )}
               <FormMessage />
             </FormItem>
           )}