;
+ errors: FieldErrors;
+ useCron: boolean;
+};
+
+export function AdvancedOptions({
+ register,
+ errors,
+ useCron,
+}: AdvancedOptionsProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+
+
+
+
+ {isOpen && (
+ <>
+ {/* Cron Expression Toggle */}
+
+
+
+
+
+ {useCron && (
+
+
+
{
+ if (!value) return "Cron expression is required";
+ const parts = value.split(" ");
+ if (parts.length !== 5) {
+ return "Cron expression must have 5 parts (minute hour day month weekday)";
+ }
+ if (
+ process.env.NEXT_PUBLIC_ALLOW_SHORT_TIMEFRAMES !==
+ "true" &&
+ !/^[0-5]?[0-9] /.test(value)
+ ) {
+ return "Cron expression must repeat only once per hour";
+ }
+ },
+ })}
+ className="zp-input"
+ placeholder="0 10 * * 0 (Every Sunday at 10:00 AM UTC)"
+ />
+ {errors.cronExpression && (
+
+ {errors.cronExpression.message as string}
+
+ )}
+
+
Examples:
+
+ -
+
0 10 * * 0 - Every Sunday at 10:00 AM UTC
+
+ -
+
0 23 * * 0 - Every Sunday at 11:00 PM UTC
+
+ -
+
0 9 * * 1 - Every Monday at 9:00 AM UTC
+
+ -
+
0 12 * * * - Every day at 12:00 PM UTC
+
+ -
+
0 0 1 * * - First day of every month at
+ midnight UTC
+
+ -
+
0 0 * * 1#1 - First Monday of every month at
+ midnight UTC
+
+
+
+
+ 📅 Use crontab.guru for help
+
+
+
+
+ )}
+
+ {/* Max Payments */}
+
+ {
+ if (!value) return undefined;
+ if (!Number.isInteger(Number(value))) {
+ return "Please enter a whole number";
+ }
+ if (Number(value) <= 0) {
+ return "Please enter a positive number";
+ }
+ return undefined;
+ },
+ })}
+ type="number"
+ min="1"
+ className="zp-input"
+ placeholder="e.g., 12 (leave empty for unlimited)"
+ />
+ {errors.maxPayments && (
+
+ {errors.maxPayments.message as string}
+
+ )}
+
+ {/* End DateTime */}
+
+ {
+ if (!value) return undefined;
+ if (new Date(value) <= new Date()) {
+ return "End date must be in the future";
+ }
+ return undefined;
+ },
+ })}
+ type="datetime-local"
+ className="zp-input"
+ min={new Date().toISOString().slice(0, 16)}
+ placeholder="Leave empty for unlimited payments"
+ />
+ {errors.endDateTime && (
+
+ {errors.endDateTime.message as string}
+
+ )}
+ >
+ )}
+ >
+ );
+}
diff --git a/app/create/components/CreateSubscriptionForm.tsx b/app/create/components/CreateSubscriptionForm.tsx
index 6f89f59..409af96 100644
--- a/app/create/components/CreateSubscriptionForm.tsx
+++ b/app/create/components/CreateSubscriptionForm.tsx
@@ -15,6 +15,8 @@ import {
fiat,
} from "@getalby/lightning-tools";
import { SATS_CURRENCY } from "lib/constants";
+import { FrequencySelector } from "./FrequencySelector";
+import { AdvancedOptions } from "./AdvancedOptions";
type CreateSubscriptionFormData = Omit<
CreateSubscriptionRequest,
@@ -258,117 +260,14 @@ export function CreateSubscriptionForm() {
{errors.amount && (
{errors.amount.message}
)}
-
-
-
-
-
-
- {watch("useCron") ? (
-
-
-
{
- if (!value) return "Cron expression is required";
- const parts = value.split(" ");
- if (parts.length !== 5) {
- return "Cron expression must have 5 parts (minute hour day month weekday)";
- }
- if (
- process.env.NEXT_PUBLIC_ALLOW_SHORT_TIMEFRAMES !==
- "true" &&
- !/^[0-5]?[0-9] /.test(value)
- ) {
- return "Cron expression must repeat only once per hour";
- }
- },
- })}
- className="zp-input"
- placeholder="0 10 * * 0 (Every Sunday at 10:00 AM UTC)"
- />
- {errors.cronExpression && (
-
{errors.cronExpression.message}
- )}
-
-
Examples:
-
- -
-
0 10 * * 0 - Every Sunday at 10:00 AM UTC
-
- -
-
0 23 * * 0 - Every Sunday at 11:00 PM UTC
-
- -
-
0 9 * * 1 - Every Monday at 9:00 AM UTC
-
- -
-
0 12 * * * - Every day at 12:00 PM UTC
-
- -
-
0 0 1 * * - First day of every month at
- midnight UTC
-
- -
-
0 0 * * 1#1 - First Monday of every month at
- midnight UTC
-
-
-
-
- 📅 Use crontab.guru for help
-
-
-
-
- ) : (
- <>
-
-
Repeat payment every
-
- !isValidPositiveValue(parseInt(value))
- ? "Please enter a positive value"
- : undefined,
- })}
- className={`zp-input w-full`}
- />
-
-
- {errors.timeframeValue && (
- {errors.timeframeValue.message}
- )}
- >
)}
{lightningAddress &&
@@ -392,48 +291,11 @@ export function CreateSubscriptionForm() {
>
)}
-
- {
- if (value && !Number.isInteger(Number(value))) {
- return "Please enter a whole number";
- }
- if (value && Number(value) <= 0) {
- return "Please enter a positive number";
- }
- return undefined;
- },
- })}
- type="number"
- min="1"
- className="zp-input"
- placeholder="e.g., 12 (leave empty for unlimited)"
- />
- {errors.maxPayments && (
- {errors.maxPayments.message}
- )}
-
-
- {
- if (value && new Date(value) <= new Date()) {
- return "End date must be in the future";
- }
- return undefined;
- },
- })}
- type="datetime-local"
- className="zp-input"
- min={new Date().toISOString().slice(0, 16)}
- placeholder="Leave empty for unlimited payments"
+
- {errors.endDateTime && (
- {errors.endDateTime.message}
- )}