@wix/ditto-codegen-public 1.0.48 → 1.0.50

package/dist/examples-apps/event-countdown/README.md

@@ -0,0 +1,13 @@
+# Wix Astro Blank Template
+
+Our Astro templates are still in development and subject to change.
+
+To use a template, follow the [Wix CLI for Headless Quick Start](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/get-started/quick-start), and select the desired template during the setup process.
+
+## Need help?
+
+For documentation and support, check out:
+
+- [Wix Headless Documentation](https://dev.wix.com/docs/go-headless)
+- [Wix SDK Documentation](https://dev.wix.com/docs/sdk)
+- [Community on Discord](https://discord.gg/n6TBrSnYTp)

package/dist/examples-apps/event-countdown/astro.config.mjs

@@ -0,0 +1,31 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import wix from "@wix/astro";
+
+import react from "@astrojs/react";
+import cloudflare from "@astrojs/cloudflare";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [wix(), react()],
+
+  adapter: cloudflare({
+    platformProxy: {
+      enabled: false,
+    },
+  }),
+
+  image: {
+    domains: ["static.wixstatic.com"],
+  },
+  security: {
+    checkOrigin: false
+  },
+  vite: {
+    server: {
+      allowedHosts: ['.wix-code.com']
+    }
+  },
+  devToolbar: { enabled: false },
+  output: "server",
+});

package/dist/examples-apps/event-countdown/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "my-custom-app",
+  "version": "1.0.0",
+  "scripts": {
+    "astro": "astro",
+    "dev": "wix dev",
+    "build": "wix build",
+    "wix": "wix",
+    "preview": "wix preview",
+    "release": "wix release",
+    "generate": "wix generate",
+    "env": "wix env"
+  },
+  "dependencies": {
+    "@astrojs/cloudflare": "^12.5.3",
+    "@astrojs/react": "^4.3.0",
+    "@tanstack/react-query": "^5.90.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@wix/app-management": "^1.0.122",
+    "@wix/astro": "^2.8.0",
+    "@wix/auto-patterns": "^1.40.0",
+    "@wix/cli": "^1.1.92",
+    "@wix/crm": "^1.0.1071",
+    "@wix/dashboard": "^1.3.40",
+    "@wix/data": "^1.0.290",
+    "@wix/design-system": "^1.217.0",
+    "@wix/ecom": "^1.0.1354",
+    "@wix/essentials": "^0.1.23",
+    "@wix/patterns": "^1.290.0",
+    "@wix/sdk": "^1.15.23",
+    "@wix/sdk-types": "^1.0.0",
+    "@wix/site-site": "^1.26.0",
+    "@wix/stores": "^1.0.533",
+    "@wix/wix-ui-icons-common": "^3.90.0",
+    "astro": "^5.8.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.0.0",
+    "typescript": "^5.8.3"
+  },
+  "devDependencies": {
+    "@astrojs/cloudflare": "^12.5.3",
+    "@astrojs/react": "^4.3.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@wix/cli": "^1.1.92",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  }
+}

package/dist/examples-apps/event-countdown/src/components/countdown-preview.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, type FC } from 'react';
+import { Card } from '@wix/design-system';
+import type { CountdownTimerOptions } from '../types';
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+interface Props extends CountdownTimerOptions {
+  className?: string;
+}
+
+export const CountdownPreview: FC<Props> = ({
+  eventTitle,
+  eventDescription,
+  targetDateTime,
+  completionMessage,
+  backgroundColor,
+  textColor,
+  position,
+  autoHide,
+  timerSize,
+}) => {
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+  const [isComplete, setIsComplete] = useState(false);
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const difference = +new Date(targetDateTime) - +new Date();
+
+      if (difference > 0) {
+        setTimeLeft({
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        });
+        setIsComplete(false);
+      } else {
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+        setIsComplete(true);
+      }
+    };
+
+    calculateTimeLeft();
+    const timer = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDateTime]);
+
+  const getSizeStyles = () => {
+    switch (timerSize) {
+      case 'small':
+        return { fontSize: '14px', padding: '12px' };
+      case 'large':
+        return { fontSize: '24px', padding: '24px' };
+      default:
+        return { fontSize: '18px', padding: '18px' };
+    }
+  };
+
+  if (isComplete && autoHide) {
+    return null;
+  }
+
+  const sizeStyles = getSizeStyles();
+
+  return (
+    <Card>
+      <Card.Header title="Preview" subtitle="How your countdown timer will appear on the site" />
+      <Card.Divider />
+      <Card.Content>
+        <div
+          style={{
+            position: 'relative',
+            minHeight: '400px',
+            backgroundColor: '#e8e8e8',
+            borderRadius: '8px',
+            padding: '20px',
+            display: 'flex',
+            alignItems: position.includes('top') ? 'flex-start' : position.includes('bottom') ? 'flex-end' : 'center',
+            justifyContent: position.includes('left') ? 'flex-start' : position.includes('right') ? 'flex-end' : 'center',
+          }}
+        >
+          <div
+            style={{
+              backgroundColor,
+              color: textColor,
+              padding: sizeStyles.padding,
+              borderRadius: '8px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+              display: 'inline-flex',
+              flexDirection: 'column',
+              gap: '12px',
+              alignItems: 'center',
+            }}
+          >
+            <h3 style={{ color: textColor, margin: 0, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>
+              {eventTitle}
+            </h3>
+
+            {eventDescription && (
+              <p style={{ color: textColor, textAlign: 'center', margin: 0, fontSize: '14px' }}>
+                {eventDescription}
+              </p>
+            )}
+
+            {isComplete ? (
+              <div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
+                {completionMessage}
+              </div>
+            ) : (
+              <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
+                  <div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
+                    {timeLeft.days.toString().padStart(2, '0')}
+                  </div>
+                  <div style={{ color: textColor, fontSize: '12px' }}>
+                    Days
+                  </div>
+                </div>
+                <div style={{ color: textColor, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>:</div>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
+                  <div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
+                    {timeLeft.hours.toString().padStart(2, '0')}
+                  </div>
+                  <div style={{ color: textColor, fontSize: '12px' }}>
+                    Hours
+                  </div>
+                </div>
+                <div style={{ color: textColor, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>:</div>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
+                  <div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
+                    {timeLeft.minutes.toString().padStart(2, '0')}
+                  </div>
+                  <div style={{ color: textColor, fontSize: '12px' }}>
+                    Minutes
+                  </div>
+                </div>
+                <div style={{ color: textColor, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>:</div>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
+                  <div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
+                    {timeLeft.seconds.toString().padStart(2, '0')}
+                  </div>
+                  <div style={{ color: textColor, fontSize: '12px' }}>
+                    Seconds
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+};

package/dist/examples-apps/event-countdown/src/components/countdown-timer-settings.tsx

@@ -0,0 +1,199 @@
+import React, { type FC } from 'react';
+import {
+  Input,
+  InputArea,
+  Card,
+  FormField,
+  ColorInput,
+  Dropdown,
+  Checkbox,
+  Box,
+  type FormFieldProps,
+} from '@wix/design-system';
+import type { CountdownTimerOptions } from '../types';
+
+interface Props {
+  options: CountdownTimerOptions;
+  onChange: (options: CountdownTimerOptions) => void;
+}
+
+export const CountdownTimerSettings: FC<Props> = ({ options, onChange }) => {
+  const getFieldStatus = (
+    field: keyof CountdownTimerOptions,
+    required: boolean = false
+  ): Partial<FormFieldProps> => {
+    return required && !options[field]
+      ? {
+          status: 'error',
+          statusMessage: 'Required.',
+        }
+      : {};
+  };
+
+  const positionOptions = [
+    { id: 'top-left', value: 'Top Left' },
+    { id: 'top-right', value: 'Top Right' },
+    { id: 'bottom-left', value: 'Bottom Left' },
+    { id: 'bottom-right', value: 'Bottom Right' },
+    { id: 'center', value: 'Center' },
+  ];
+
+  const sizeOptions = [
+    { id: 'small', value: 'Small' },
+    { id: 'medium', value: 'Medium' },
+    { id: 'large', value: 'Large' },
+  ];
+
+  return (
+    <Box direction="vertical" gap="24px">
+      <Card>
+        <Card.Header
+          title="Event Details"
+          subtitle="Configure the basic information for your countdown event"
+        />
+        <Card.Divider />
+        <Card.Content>
+          <Box gap="18px" direction="vertical">
+            <FormField
+              label="Event Title"
+              required
+              {...getFieldStatus('eventTitle', true)}
+            >
+              <Input
+                placeholder="Upcoming Event"
+                value={options.eventTitle}
+                onChange={(e) =>
+                  onChange({
+                    ...options,
+                    eventTitle: e.currentTarget.value,
+                  })
+                }
+              />
+            </FormField>
+
+            <FormField label="Event Description">
+              <InputArea
+                placeholder="Additional details about the event"
+                value={options.eventDescription || ''}
+                onChange={(e) =>
+                  onChange({
+                    ...options,
+                    eventDescription: e.currentTarget.value,
+                  })
+                }
+                rows={3}
+              />
+            </FormField>
+
+            <FormField
+              label="Target Date and Time"
+              required
+              {...getFieldStatus('targetDateTime', true)}
+            >
+              <Input
+                type="datetime-local"
+                value={options.targetDateTime}
+                onChange={(e) =>
+                  onChange({
+                    ...options,
+                    targetDateTime: e.currentTarget.value,
+                  })
+                }
+              />
+            </FormField>
+
+            <FormField label="Completion Message">
+              <Input
+                placeholder="Event has started!"
+                value={options.completionMessage}
+                onChange={(e) =>
+                  onChange({
+                    ...options,
+                    completionMessage: e.currentTarget.value,
+                  })
+                }
+              />
+            </FormField>
+          </Box>
+        </Card.Content>
+      </Card>
+
+      <Card>
+        <Card.Header
+          title="Visual Customization"
+          subtitle="Customize the appearance and behavior of your countdown timer"
+        />
+        <Card.Divider />
+        <Card.Content>
+          <Box gap="18px" direction="vertical">
+            <FormField label="Background Color">
+              <ColorInput
+                value={options.backgroundColor}
+                onChange={(color) =>
+                  onChange({
+                    ...options,
+                    backgroundColor: color,
+                  })
+                }
+              />
+            </FormField>
+
+            <FormField label="Text Color">
+              <ColorInput
+                value={options.textColor}
+                onChange={(color) =>
+                  onChange({
+                    ...options,
+                    textColor: color,
+                  })
+                }
+              />
+            </FormField>
+
+            <FormField label="Display Position">
+              <Dropdown
+                placeholder="Select position"
+                options={positionOptions}
+                selectedId={options.position}
+                onSelect={(option) =>
+                  onChange({
+                    ...options,
+                    position: option.id as CountdownTimerOptions['position'],
+                  })
+                }
+              />
+            </FormField>
+
+            <FormField label="Timer Size">
+              <Dropdown
+                placeholder="Select size"
+                options={sizeOptions}
+                selectedId={options.timerSize}
+                onSelect={(option) =>
+                  onChange({
+                    ...options,
+                    timerSize: option.id as CountdownTimerOptions['timerSize'],
+                  })
+                }
+              />
+            </FormField>
+
+            <FormField label="Auto Hide When Complete">
+              <Checkbox
+                checked={options.autoHide}
+                onChange={(e) =>
+                  onChange({
+                    ...options,
+                    autoHide: e.target.checked,
+                  })
+                }
+              >
+                Automatically hide the countdown timer when it reaches zero
+              </Checkbox>
+            </FormField>
+          </Box>
+        </Card.Content>
+      </Card>
+    </Box>
+  );
+};

package/dist/examples-apps/event-countdown/src/dashboard/pages/countdown-timer-settings/extensions.ts

@@ -0,0 +1,7 @@
+import * as extensions from '@wix/astro/builders';
+export const dashboardpagecountdownTimerSettings = extensions.backofficePage({
+  "id": "55494b14-6385-41a3-af6b-c165b0961f5f",
+  "title": "Countdown Timer Settings",
+  "routePath": "countdown-timer-settings",
+  "component": "./dashboard/pages/countdown-timer-settings/page.tsx"
+})

package/dist/examples-apps/event-countdown/src/dashboard/pages/countdown-timer-settings/page.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState, type FC } from 'react';
+import { dashboard } from '@wix/dashboard';
+import { embeddedScripts } from '@wix/app-management';
+import {
+  Button,
+  Page,
+  Layout,
+  Cell,
+  Loader,
+  Box,
+} from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import withProviders from '../../withProviders';
+import { CountdownTimerSettings } from '../../../components/countdown-timer-settings';
+import { CountdownPreview } from '../../../components/countdown-preview';
+import type { CountdownTimerOptions } from '../../../types';
+
+const countdownTimerDefaultOptions: CountdownTimerOptions = {
+  eventTitle: 'Upcoming Event',
+  eventDescription: '',
+  targetDateTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16), // 7 days from now
+  completionMessage: 'Event has started!',
+  backgroundColor: '#FFFFFF',
+  textColor: '#000000',
+  position: 'bottom-right',
+  autoHide: true,
+  timerSize: 'medium',
+};
+
+const CountdownTimerPage: FC = () => {
+  const [options, setOptions] = useState<CountdownTimerOptions>(countdownTimerDefaultOptions);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const embeddedScript = await embeddedScripts.getEmbeddedScript();
+        const data = embeddedScript.parameters as Partial<Record<keyof CountdownTimerOptions, string>> || {};
+
+        setOptions((prev) => ({
+          ...prev,
+          eventTitle: data?.eventTitle || prev.eventTitle,
+          eventDescription: data?.eventDescription || prev.eventDescription || '',
+          targetDateTime: data?.targetDateTime || prev.targetDateTime,
+          completionMessage: data?.completionMessage || prev.completionMessage,
+          backgroundColor: data?.backgroundColor || prev.backgroundColor,
+          textColor: data?.textColor || prev.textColor,
+          position: (data?.position as CountdownTimerOptions['position']) || prev.position,
+          autoHide: data?.autoHide === 'true' ? true : data?.autoHide === 'false' ? false : prev.autoHide,
+          timerSize: (data?.timerSize as CountdownTimerOptions['timerSize']) || prev.timerSize,
+        }));
+      } catch (error) {
+        console.error('Failed to load embedded script settings:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  const handleSave = async () => {
+    if (!options.eventTitle || !options.targetDateTime) {
+      dashboard.showToast({
+        message: 'Please fill in all required fields',
+        type: 'error',
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      // Convert all values to strings for embedded script parameters
+      await embeddedScripts.embedScript({
+        parameters: {
+          eventTitle: options.eventTitle,
+          eventDescription: options.eventDescription || '',
+          targetDateTime: options.targetDateTime,
+          completionMessage: options.completionMessage,
+          backgroundColor: options.backgroundColor,
+          textColor: options.textColor,
+          position: options.position,
+          autoHide: String(options.autoHide),
+          timerSize: options.timerSize,
+        },
+      });
+
+      dashboard.showToast({
+        message: 'Countdown timer settings saved successfully!',
+        type: 'success',
+      });
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      dashboard.showToast({
+        message: 'Failed to save settings. Please try again.',
+        type: 'error',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Page height="100vh">
+      <Page.Header
+        title="Countdown Timer Settings"
+        subtitle="Configure your countdown timer with event details and visual customization options"
+        actionsBar={
+          <Button
+            skin="inverted"
+            disabled={!options.eventTitle || !options.targetDateTime || isSaving}
+            onClick={handleSave}
+          >
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+        }
+      />
+      <Page.Content>
+        {isLoading ? (
+          <Box align="center" verticalAlign="middle" height="50vh">
+            <Loader text="Loading countdown timer settings..." />
+          </Box>
+        ) : (
+          <Layout gap="24px">
+            <Cell span={6}>
+              <CountdownTimerSettings
+                options={options}
+                onChange={setOptions}
+              />
+            </Cell>
+            <Cell span={6}>
+              <CountdownPreview {...options} />
+            </Cell>
+          </Layout>
+        )}
+      </Page.Content>
+    </Page>
+  );
+};
+
+export default withProviders(CountdownTimerPage);

package/dist/examples-apps/event-countdown/src/dashboard/withProviders.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import { i18n } from '@wix/essentials';
+
+const queryClient = new QueryClient();
+
+export default function withProviders<P extends {} = {}>(Component: React.FC<P>) {
+  return function DashboardProviders(props: P) {
+    const locale = i18n.getLocale();
+    return (
+      <WixDesignSystemProvider locale={locale} features={{ newColorsBranding: true }}>
+        <QueryClientProvider client={queryClient}>
+          <Component {...props} />
+        </QueryClientProvider>
+      </WixDesignSystemProvider>
+    );
+  };
+}
+
+// Also export as named export for backwards compatibility
+export { withProviders };

package/dist/examples-apps/event-countdown/src/extensions.ts

@@ -0,0 +1,12 @@
+import { app } from '@wix/astro/builders';
+import * as allExtensions from './index';
+
+// Get all exported extensions
+const extensionList = Object.values(allExtensions);
+
+const appBuilder = app();
+extensionList.forEach(extension => {
+  appBuilder.use(extension);
+});
+
+export default appBuilder;

package/dist/examples-apps/event-countdown/src/index.ts

@@ -0,0 +1,2 @@
+export * from './dashboard/pages/countdown-timer-settings/extensions.ts';
+export * from './site/embedded-scripts/countdown-timer/extensions.ts';