@wix/ditto-codegen-public 1.0.49 → 1.0.51

package/dist/examples-apps/contact-created-logger/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "my-custom-app",
+  "type": "module",
+  "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": {
+    "@wix/astro": "0.0.4-experimental-react-component",
+    "@wix/crm": "^1.0.1071",
+    "@wix/dashboard": "^1.3.36",
+    "@wix/data": "^1.0.290",
+    "@wix/design-system": "^1.111.0",
+    "@wix/ecom": "^1.0.1354",
+    "@wix/essentials": "^0.1.23",
+    "@wix/sdk": "^1.15.23",
+    "@wix/stores": "^1.0.533",
+    "astro": "^5.8.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/contact-created-logger/src/backend/events/contact-created-logger/event.ts

@@ -0,0 +1,51 @@
+/**
+This file contains:
+
+- The relevant import statement for the event.
+- An event function where you can implement your custom logic. Wix calls this function when the given event occurs, passing the event object and its metadata.
+
+This file implements a Contact Creation Logger that logs whenever a new contact is created in the Wix CRM.
+To run this example please add the relevant permission (https://wix.to/APN0tpK) and install the `@wix/crm` dependency
+SDK modules and their available events are documented here: https://dev.wix.com/docs/sdk
+*/
+
+import { contacts } from '@wix/crm';
+
+contacts.onContactCreated(async (event) => {
+  try {
+    console.log('🎉 New contact created event received!');
+    
+    // Log the entire event for debugging purposes
+    console.log('Event data:', JSON.stringify(event, null, 2));
+    
+    // Access contact information from the event
+    const contactData = event.entity;
+    const eventMetadata = event.metadata;
+    
+    if (contactData) {
+      console.log(`📝 Contact Creation Details:`);
+      console.log(`- Contact ID: ${contactData._id || 'N/A'}`);
+      console.log(`- Email: ${contactData.info?.emails?.items?.[0]?.email || 'N/A'}`);
+      console.log(`- First Name: ${contactData.info?.name?.first || 'N/A'}`);
+      console.log(`- Last Name: ${contactData.info?.name?.last || 'N/A'}`);
+      console.log(`- Phone: ${contactData.info?.phones?.items?.[0]?.phone || 'N/A'}`);
+      console.log(`- Created Date: ${contactData._createdDate || 'N/A'}`);
+    }
+    
+    if (eventMetadata) {
+      console.log(`📊 Event Metadata:`);
+      console.log(`- Event ID: ${eventMetadata.entityId || 'N/A'}`);
+      console.log(`- Event Time: ${eventMetadata.eventTime || 'N/A'}`);
+      console.log(`- Triggered By: ${eventMetadata.triggeredByAnonymizeRequest ? 'Anonymize Request' : 'Normal Creation'}`);
+    }
+    
+    console.log('✅ Contact creation logging completed successfully');
+    
+  } catch (error) {
+    console.error('❌ Error processing contact creation event:', error);
+    console.error('Error details:', {
+      message: error instanceof Error ? error.message : 'Unknown error',
+      stack: error instanceof Error ? error.stack : undefined
+    });
+  }
+});

package/dist/examples-apps/contact-created-logger/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/dist/examples-apps/contact-created-logger/wix.config.json

@@ -0,0 +1,4 @@
+{
+  "appId": "54ed7c99-07c1-4992-b961-f5b4a9bd6d7f",
+  "siteId": "6e13b6b4-0b79-4c81-b430-d9b6a0c8e4f9"
+}

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"
+})