@wix/ditto-codegen-public 1.0.48 → 1.0.50

package/dist/examples-apps/event-countdown/src/site/embedded-scripts/countdown-timer/embedded.html

@@ -0,0 +1,328 @@
+<div
+  id="countdown-config"
+  data-event-title="{{eventTitle}}"
+  data-event-description="{{eventDescription}}"
+  data-target-datetime="{{targetDateTime}}"
+  data-completion-message="{{completionMessage}}"
+  data-background-color="{{backgroundColor}}"
+  data-text-color="{{textColor}}"
+  data-position="{{position}}"
+  data-auto-hide="{{autoHide}}"
+  data-timer-size="{{timerSize}}"
+></div>
+<div id="countdown-timer-container"></div>
+
+<style>
+  .countdown-timer {
+    position: fixed;
+    z-index: 1000;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
+  }
+
+  .countdown-timer.top-left {
+    top: 20px;
+    left: 20px;
+  }
+
+  .countdown-timer.top-right {
+    top: 20px;
+    right: 20px;
+  }
+
+  .countdown-timer.bottom-left {
+    bottom: 20px;
+    left: 20px;
+  }
+
+  .countdown-timer.bottom-right {
+    bottom: 20px;
+    right: 20px;
+  }
+
+  .countdown-timer.center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .countdown-timer.small {
+    padding: 12px;
+    font-size: 14px;
+  }
+
+  .countdown-timer.medium {
+    padding: 16px;
+    font-size: 16px;
+  }
+
+  .countdown-timer.large {
+    padding: 24px;
+    font-size: 20px;
+  }
+
+  .countdown-title {
+    margin: 0 0 8px 0;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .countdown-description {
+    margin: 0 0 12px 0;
+    font-size: 0.9em;
+    opacity: 0.8;
+    text-align: center;
+  }
+
+  .countdown-display {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .countdown-unit {
+    text-align: center;
+    min-width: 40px;
+  }
+
+  .countdown-number {
+    display: block;
+    font-weight: 700;
+    font-size: 1.5em;
+    line-height: 1;
+  }
+
+  .countdown-label {
+    display: block;
+    font-size: 0.7em;
+    opacity: 0.7;
+    margin-top: 2px;
+  }
+
+  .countdown-separator {
+    font-weight: 700;
+    font-size: 1.2em;
+    opacity: 0.6;
+  }
+
+  .countdown-completion {
+    text-align: center;
+    font-weight: 600;
+    padding: 8px 0;
+  }
+
+  .countdown-timer.hidden {
+    display: none;
+  }
+
+  @media (max-width: 480px) {
+    .countdown-timer {
+      max-width: calc(100vw - 40px);
+    }
+    
+    .countdown-display {
+      gap: 8px;
+    }
+    
+    .countdown-unit {
+      min-width: 35px;
+    }
+    
+    .countdown-number {
+      font-size: 1.3em;
+    }
+  }
+</style>
+
+<script>
+  (function() {
+    'use strict';
+    
+    const config = document.getElementById('countdown-config');
+    if (!config) return;
+    
+    const {
+      eventTitle,
+      eventDescription,
+      targetDatetime,
+      completionMessage,
+      backgroundColor,
+      textColor,
+      position,
+      autoHide,
+      timerSize
+    } = config.dataset;
+    
+    if (!targetDatetime) {
+      console.warn('Countdown Timer: No target date specified');
+      return;
+    }
+    
+    const targetDate = new Date(targetDatetime);
+    if (isNaN(targetDate.getTime())) {
+      console.warn('Countdown Timer: Invalid target date format');
+      return;
+    }
+    
+    const container = document.getElementById('countdown-timer-container');
+    if (!container) return;
+    
+    let countdownElement = null;
+    let intervalId = null;
+    let isCompleted = false;
+    
+    function createCountdownElement() {
+      const timer = document.createElement('div');
+      timer.className = `countdown-timer ${position || 'bottom-right'} ${timerSize || 'medium'}`;
+      timer.style.backgroundColor = backgroundColor || '#FFFFFF';
+      timer.style.color = textColor || '#000000';
+      
+      const titleElement = eventTitle ? `<div class="countdown-title">${escapeHtml(eventTitle)}</div>` : '';
+      const descriptionElement = eventDescription ? `<div class="countdown-description">${escapeHtml(eventDescription)}</div>` : '';
+      
+      timer.innerHTML = `
+        ${titleElement}
+        ${descriptionElement}
+        <div class="countdown-display" id="countdown-display">
+          <div class="countdown-unit">
+            <span class="countdown-number" id="days">00</span>
+            <span class="countdown-label">Days</span>
+          </div>
+          <span class="countdown-separator">:</span>
+          <div class="countdown-unit">
+            <span class="countdown-number" id="hours">00</span>
+            <span class="countdown-label">Hours</span>
+          </div>
+          <span class="countdown-separator">:</span>
+          <div class="countdown-unit">
+            <span class="countdown-number" id="minutes">00</span>
+            <span class="countdown-label">Minutes</span>
+          </div>
+          <span class="countdown-separator">:</span>
+          <div class="countdown-unit">
+            <span class="countdown-number" id="seconds">00</span>
+            <span class="countdown-label">Seconds</span>
+          </div>
+        </div>
+      `;
+      
+      return timer;
+    }
+    
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    
+    function updateCountdown() {
+      const now = new Date().getTime();
+      const distance = targetDate.getTime() - now;
+      
+      if (distance < 0) {
+        handleCountdownComplete();
+        return;
+      }
+      
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+      
+      if (countdownElement) {
+        const daysEl = countdownElement.querySelector('#days');
+        const hoursEl = countdownElement.querySelector('#hours');
+        const minutesEl = countdownElement.querySelector('#minutes');
+        const secondsEl = countdownElement.querySelector('#seconds');
+        
+        if (daysEl) daysEl.textContent = String(days).padStart(2, '0');
+        if (hoursEl) hoursEl.textContent = String(hours).padStart(2, '0');
+        if (minutesEl) minutesEl.textContent = String(minutes).padStart(2, '0');
+        if (secondsEl) secondsEl.textContent = String(seconds).padStart(2, '0');
+      }
+    }
+    
+    function handleCountdownComplete() {
+      if (isCompleted) return;
+      isCompleted = true;
+      
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+      
+      if (autoHide === 'true') {
+        hideCountdown();
+      } else {
+        showCompletionMessage();
+      }
+    }
+    
+    function showCompletionMessage() {
+      if (!countdownElement) return;
+      
+      const displayElement = countdownElement.querySelector('#countdown-display');
+      if (displayElement) {
+        displayElement.innerHTML = `
+          <div class="countdown-completion">
+            ${escapeHtml(completionMessage || 'Event has started!')}
+          </div>
+        `;
+      }
+    }
+    
+    function hideCountdown() {
+      if (countdownElement) {
+        countdownElement.classList.add('hidden');
+      }
+    }
+    
+    function showCountdown() {
+      if (countdownElement) {
+        countdownElement.classList.remove('hidden');
+      }
+    }
+    
+    function initializeCountdown() {
+      // Check if countdown is already completed
+      const now = new Date().getTime();
+      if (targetDate.getTime() <= now) {
+        isCompleted = true;
+        if (autoHide === 'true') {
+          return; // Don't show anything
+        }
+      }
+      
+      countdownElement = createCountdownElement();
+      container.appendChild(countdownElement);
+      
+      if (isCompleted) {
+        showCompletionMessage();
+      } else {
+        updateCountdown();
+        intervalId = setInterval(updateCountdown, 1000);
+      }
+    }
+    
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initializeCountdown);
+    } else {
+      initializeCountdown();
+    }
+    
+    // Cleanup on page unload
+    window.addEventListener('beforeunload', function() {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    });
+    
+  })();
+</script>

package/dist/examples-apps/event-countdown/src/site/embedded-scripts/countdown-timer/extensions.ts

@@ -0,0 +1,8 @@
+import * as extensions from '@wix/astro/builders';
+export const embeddedscriptcountdowntimer = extensions.embeddedScript({
+  "id": "f065e8bd-5906-49a5-91c6-fbd0d5d8b600",
+  "scriptType": "FUNCTIONAL",
+  "placement": "BODY_END",
+  "source": "./site/embedded-scripts/countdown-timer/embedded.html",
+  "name": "countdown-timer"
+})

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

@@ -0,0 +1,11 @@
+export type CountdownTimerOptions = {
+  eventTitle: string;
+  eventDescription?: string;
+  targetDateTime: string;
+  completionMessage: string;
+  backgroundColor: string;
+  textColor: string;
+  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+  autoHide: boolean;
+  timerSize: 'small' | 'medium' | 'large';
+};

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

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strictest",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

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

@@ -0,0 +1,4 @@
+{
+  "appId": "54230258-14c1-41f8-9e34-75ff8cc7e0a1",
+  "siteId": "84465fce-8df2-4506-8cea-a6a1267cc3ee"
+}

package/dist/examples-apps/site-popup/package.json

@@ -1,34 +1,51 @@
 {
   "name": "site-popup",
   "version": "1.0.0",
-  "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
-    "@wix/app-management": "^1.0.0",
-    "@wix/dashboard": "^1.3.21",
-    "@wix/design-system": "^1.111.0",
-    "@wix/essentials": "^0.1.4",
-    "@wix/site-site": "^1.2.0",
-    "tailwindcss": "^3.4.1"
+  "scripts": {
+    "astro": "astro",
+    "dev": "wix dev",
+    "build": "wix build",
+    "wix": "wix",
+    "preview": "wix preview",
+    "release": "wix release",
+    "generate": "wix generate",
+    "env": "wix env"
   },
-  "devDependencies": {
-    "@types/react": "^16.0.0",
-    "@types/react-dom": "^16.0.0",
-    "@wix/cli": "^1.0.0",
-    "@wix/cli-app": "^1.0.0",
+  "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",
-    "autoprefixer": "^10.4.17",
-    "postcss": "^8.4.35",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "typescript": "^5.3.3"
+    "@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"
   },
-  "scripts": {
-    "build": "wix app build",
-    "release": "wix app release",
-    "dev": "wix app dev",
-    "preview": "wix app preview",
-    "logs": "wix app logs",
-    "generate": "wix app generate",
-    "typecheck": "tsc --noEmit"
+  "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/site-popup/src/components/activation-configuration.tsx

@@ -1,7 +1,7 @@
 import React, { type FC } from 'react';
 import { Box, RadioGroup } from '@wix/design-system';
-import { ActivationMode, ActivationOptions } from '../types.js';
 import { DataRangePicker } from './date-range-picker.js';
+import type { ActivationMode, ActivationOptions } from '../types.js';
 
 interface Props {
   activationOptions: ActivationOptions;

package/dist/examples-apps/site-popup/src/components/close-button.css

@@ -0,0 +1,33 @@
+.close-button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem;
+}
+
+.close-button {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #374151;
+  border-radius: 50%;
+  font-size: 0.875rem;
+  padding: 0.5rem;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.close-button:hover {
+  background-color: rgba(255, 255, 255, 1);
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+

package/dist/examples-apps/site-popup/src/components/close-button.tsx

@@ -1,4 +1,5 @@
 import React, { type FC } from 'react';
+import './close-button.css';
 
 interface Props {
   onClick?: () => void;
@@ -6,14 +7,14 @@ interface Props {
 
 export const CloseButton: FC<Props> = ({ onClick }) => {
   return (
-    <div className="flex justify-end p-2">
+    <div className="close-button-wrapper">
       <button
         onClick={onClick}
         type="button"
-        className="bg-transparent bg-gray-200 text-slate-200 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
+        className="close-button"
       >
         <svg
-          className="w-5 h-5"
+          className="close-icon"
           fill="currentColor"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"

package/dist/examples-apps/site-popup/src/components/popup/index.css

@@ -1,3 +1,133 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+.popup-card {
+  border-radius: 0.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: grid;
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .popup-card {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.close-btn-container {
+  position: absolute;
+  z-index: 1000;
+}
+
+.popup-content {
+  padding: 1rem;
+  text-align: center;
+  background-color: #1f2937;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .popup-content {
+    padding: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .popup-content {
+    grid-column: span 1;
+  }
+}
+
+@media (min-width: 1024px) {
+  .popup-content {
+    padding: 2rem;
+  }
+}
+
+.popup-text-container {
+  position: relative;
+  bottom: 0;
+  isolation: isolate;
+  overflow: hidden;
+  padding: 6rem 1rem;
+}
+
+@media (min-width: 640px) {
+  .popup-text-container {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .popup-text-container {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+}
+
+.popup-headline {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 42rem;
+  text-align: center;
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: white;
+}
+
+@media (min-width: 640px) {
+  .popup-headline {
+    font-size: 2.25rem;
+  }
+}
+
+.popup-text {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.5rem;
+  max-width: 36rem;
+  text-align: center;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  color: #d1d5db;
+}
+
+.popup-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+.popup-dont-show-button {
+  font-size: 0.875rem;
+  color: white;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  transition: opacity 0.2s ease;
+}
+
+.popup-dont-show-button:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.popup-image {
+  height: 16rem;
+  object-fit: cover;
+  width: 100%;
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .popup-image {
+    height: 100%;
+  }
+}
+