@wix/ditto-codegen-public 1.0.171 → 1.0.172

package/dist/examples-apps/custom-element/src/widgets/custom-elements/countdown-timer/widget.tsx

@@ -1,9 +1,11 @@
-interface CountdownTimerData {
-  title: string;
-  endDateTime: string;
-  targetUrl?: string;
+import { items } from '@wix/data';
+import { window as wixWindow } from '@wix/site-window';
+
+interface CountdownConfig {
+  _id: string;
+  targetDate: Date;
+  title?: string;
   isActive: boolean;
-  description?: string;
 }
 
 interface TimeRemaining {
@@ -15,41 +17,65 @@ interface TimeRemaining {
 
 export default class extends HTMLElement {
   private intervalId: number | null = null;
-  private timerData: CountdownTimerData | null = null;
+  private config: CountdownConfig | null = null;
+  private isEditorMode = false;
 
-  public connectedCallback(): void {
-    this.loadTimerData();
+  public async connectedCallback(): Promise<void> {
+    await this.checkEnvironment();
+    if (this.isEditorMode) {
+      this.renderEditorPlaceholder();
+    } else {
+      await this.loadConfig();
+    }
   }
 
   public disconnectedCallback(): void {
     if (this.intervalId !== null) {
       clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  private async checkEnvironment(): Promise<void> {
+    try {
+      const currentViewMode = await wixWindow.viewMode();
+      this.isEditorMode = currentViewMode === 'Editor';
+    } catch (error) {
+      console.error('Failed to check view mode:', error);
+      this.isEditorMode = false;
     }
   }
 
-  private async loadTimerData(): Promise<void> {
+  private async loadConfig(): Promise<void> {
     try {
-      const timerData: CountdownTimerData = {
-        title: 'Special Offer Ends Soon!',
-        endDateTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
-        targetUrl: undefined,
-        isActive: true,
-        description: undefined
-      };
-
-      this.timerData = timerData;
-      this.render();
-      this.startCountdown();
+      const result = await items.query('countdown-config')
+        .eq('isActive', true)
+        .limit(1)
+        .find();
+
+      if (result.items.length > 0) {
+        const item = result.items[0];
+        this.config = {
+          _id: item._id as string,
+          targetDate: new Date(item.targetDate as string),
+          title: item.title as string | undefined,
+          isActive: item.isActive as boolean
+        };
+        this.render();
+        this.startCountdown();
+      } else {
+        this.renderNoConfig();
+      }
     } catch (error) {
-      console.error('Failed to load timer data:', error);
+      console.error('Failed to load countdown config:', error);
       this.renderError();
     }
   }
 
-  private calculateTimeRemaining(endDate: string): TimeRemaining | null {
+  private calculateTimeRemaining(targetDate: Date): TimeRemaining | null {
     const now = new Date().getTime();
-    const end = new Date(endDate).getTime();
-    const difference = end - now;
+    const target = targetDate.getTime();
+    const difference = target - now;
 
     if (difference <= 0) {
       return null;
@@ -64,7 +90,7 @@ export default class extends HTMLElement {
   }
 
   private startCountdown(): void {
-    if (!this.timerData || !this.timerData.isActive) {
+    if (!this.config || !this.config.isActive) {
       return;
     }
 
@@ -74,12 +100,12 @@ export default class extends HTMLElement {
   }
 
   private updateCountdown(): void {
-    if (!this.timerData) {
+    if (!this.config) {
       return;
     }
 
-    const timeRemaining = this.calculateTimeRemaining(this.timerData.endDateTime);
-    
+    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
+
     if (timeRemaining === null) {
       this.renderExpired();
       if (this.intervalId !== null) {
@@ -93,12 +119,12 @@ export default class extends HTMLElement {
   }
 
   private render(): void {
-    if (!this.timerData) {
+    if (!this.config) {
       return;
     }
 
-    const timeRemaining = this.calculateTimeRemaining(this.timerData.endDateTime);
-    
+    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
+
     if (timeRemaining === null) {
       this.renderExpired();
     } else {
@@ -106,220 +132,355 @@ export default class extends HTMLElement {
     }
   }
 
-  private renderCountdown(timeRemaining: TimeRemaining): void {
-    if (!this.timerData) {
-      return;
-    }
-
-    const containerStyle = `
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 24px;
-      border-radius: 12px;
-      text-align: center;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-      max-width: 500px;
-      margin: 0 auto;
-    `;
+  private getStyles(): string {
+    return `
+      <style>
+        /* Editor Placeholder Styles */
+        .editor-container {
+          font-family: 'Courier New', monospace;
+          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+          color: #00ff88;
+          padding: 48px 24px;
+          border-radius: 16px;
+          text-align: center;
+          box-shadow: 0 8px 32px rgba(0, 255, 136, 0.2);
+          max-width: 600px;
+          margin: 0 auto;
+          border: 2px solid #00ff88;
+        }
 
-    const titleStyle = `
-      font-size: 24px;
-      font-weight: 700;
-      margin: 0 0 8px 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    `;
+        .editor-icon {
+          font-size: 64px;
+          margin-bottom: 16px;
+          animation: pulse 2s ease-in-out infinite;
+        }
 
-    const descriptionStyle = `
-      font-size: 16px;
-      opacity: 0.9;
-      margin: 0 0 24px 0;
-      line-height: 1.4;
-    `;
+        .editor-title {
+          font-size: 28px;
+          font-weight: 700;
+          margin: 0 0 12px 0;
+          text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+          letter-spacing: 2px;
+        }
 
-    const timerGridStyle = `
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 16px;
-      margin: 24px 0;
-    `;
+        .editor-message {
+          font-size: 16px;
+          opacity: 0.85;
+          margin: 0;
+          line-height: 1.6;
+        }
 
-    const timeUnitStyle = `
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 8px;
-      padding: 16px 8px;
-      backdrop-filter: blur(10px);
-    `;
+        /* Countdown Timer Styles */
+        .timer-container {
+          font-family: 'Orbitron', 'Rajdhani', 'Exo 2', monospace, sans-serif;
+          background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+          color: #00d9ff;
+          padding: 40px 24px;
+          border-radius: 20px;
+          text-align: center;
+          box-shadow: 0 20px 60px rgba(0, 217, 255, 0.3), inset 0 0 40px rgba(0, 217, 255, 0.1);
+          max-width: 700px;
+          margin: 0 auto;
+          position: relative;
+          overflow: hidden;
+        }
 
-    const numberStyle = `
-      font-size: 32px;
-      font-weight: 800;
-      margin: 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    `;
+        .timer-glow {
+          content: '';
+          position: absolute;
+          top: -50%;
+          left: -50%;
+          width: 200%;
+          height: 200%;
+          background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
+          animation: rotate 10s linear infinite;
+        }
 
-    const labelStyle = `
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin: 4px 0 0 0;
-      opacity: 0.8;
-    `;
+        .timer-title {
+          font-size: 32px;
+          font-weight: 900;
+          margin: 0 0 12px 0;
+          text-shadow: 0 0 20px rgba(0, 217, 255, 0.8), 0 0 40px rgba(0, 217, 255, 0.4);
+          letter-spacing: 3px;
+          text-transform: uppercase;
+          position: relative;
+          z-index: 1;
+        }
 
-    const buttonStyle = `
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      padding: 12px 24px;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      text-decoration: none;
-      display: inline-block;
-      margin-top: 16px;
-      backdrop-filter: blur(10px);
-    `;
+        .timer-grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 20px;
+          margin: 32px 0;
+          position: relative;
+          z-index: 1;
+        }
 
-    const buttonHoverStyle = `
-      background: rgba(255, 255, 255, 0.3);
-      border-color: rgba(255, 255, 255, 0.5);
-      transform: translateY(-2px);
-    `;
+        .time-unit {
+          background: rgba(0, 217, 255, 0.15);
+          border-radius: 12px;
+          padding: 24px 12px;
+          backdrop-filter: blur(10px);
+          border: 2px solid rgba(0, 217, 255, 0.3);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.1);
+          transition: all 0.3s ease;
+        }
 
-    const responsiveStyle = `
-      @media (max-width: 480px) {
-        .timer-grid {
-          grid-template-columns: repeat(2, 1fr);
-          gap: 12px;
+        .time-unit:hover {
+          transform: translateY(-4px);
+          border-color: rgba(0, 217, 255, 0.6);
+          box-shadow: 0 12px 40px rgba(0, 217, 255, 0.4), inset 0 0 30px rgba(0, 217, 255, 0.2);
         }
+
         .time-number {
+          font-size: 48px;
+          font-weight: 900;
+          margin: 0;
+          text-shadow: 0 0 15px rgba(0, 217, 255, 0.8), 0 0 30px rgba(0, 217, 255, 0.4);
+          font-family: 'Orbitron', monospace;
+          letter-spacing: 2px;
+        }
+
+        .time-label {
+          font-size: 13px;
+          text-transform: uppercase;
+          letter-spacing: 2px;
+          margin: 8px 0 0 0;
+          opacity: 0.9;
+          font-weight: 700;
+        }
+
+        /* Expired State Styles */
+        .expired-container {
+          font-family: 'Bebas Neue', 'Anton', 'Oswald', sans-serif;
+          background: linear-gradient(135deg, #2d1b00 0%, #5c3a1f 50%, #8b4513 100%);
+          color: #ffa500;
+          padding: 48px 24px;
+          border-radius: 20px;
+          text-align: center;
+          box-shadow: 0 20px 60px rgba(255, 165, 0, 0.4), inset 0 0 40px rgba(255, 165, 0, 0.1);
+          max-width: 600px;
+          margin: 0 auto;
+          border: 3px solid #ffa500;
+        }
+
+        .expired-icon {
+          font-size: 80px;
+          margin-bottom: 16px;
+          animation: bounce 1s ease-in-out infinite;
+        }
+
+        .expired-title {
+          font-size: 48px;
+          font-weight: 900;
+          margin: 0 0 16px 0;
+          text-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5);
+          letter-spacing: 4px;
+          text-transform: uppercase;
+        }
+
+        .expired-message {
+          font-size: 20px;
+          margin: 0;
+          opacity: 0.95;
+          font-weight: 600;
+          letter-spacing: 1px;
+        }
+
+        /* No Config State Styles */
+        .no-config-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+          color: #2c3e50;
+          padding: 40px 24px;
+          border-radius: 16px;
+          text-align: center;
+          border: 2px dashed #95a5a6;
+          max-width: 500px;
+          margin: 0 auto;
+        }
+
+        .no-config-icon {
+          font-size: 64px;
+          margin-bottom: 16px;
+        }
+
+        .no-config-title {
           font-size: 24px;
+          font-weight: 700;
+          margin: 0 0 12px 0;
+          color: #34495e;
         }
-        .timer-container {
-          padding: 16px;
+
+        .no-config-message {
+          font-size: 16px;
+          margin: 0;
+          line-height: 1.6;
+          color: #7f8c8d;
         }
-      }
-    `;
 
-    this.innerHTML = `
-      <style>
-        ${responsiveStyle}
-        .timer-button:hover {
-          ${buttonHoverStyle}
+        /* Error State Styles */
+        .error-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #fff5f5;
+          color: #c53030;
+          padding: 32px 24px;
+          border-radius: 12px;
+          text-align: center;
+          border: 2px solid #fc8181;
+          max-width: 500px;
+          margin: 0 auto;
+        }
+
+        .error-icon {
+          font-size: 48px;
+          margin-bottom: 12px;
+        }
+
+        .error-message {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+        }
+
+        /* Animations */
+        @keyframes pulse {
+          0%, 100% { 
+            opacity: 1; 
+            transform: scale(1); 
+          }
+          50% { 
+            opacity: 0.6; 
+            transform: scale(1.1); 
+          }
+        }
+
+        @keyframes rotate {
+          from { 
+            transform: rotate(0deg); 
+          }
+          to { 
+            transform: rotate(360deg); 
+          }
+        }
+
+        @keyframes bounce {
+          0%, 100% { 
+            transform: translateY(0); 
+          }
+          50% { 
+            transform: translateY(-20px); 
+          }
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 600px) {
+          .timer-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+          }
+
+          .time-number {
+            font-size: 36px;
+          }
+
+          .timer-container {
+            padding: 24px 16px;
+          }
+
+          .timer-title {
+            font-size: 24px;
+          }
         }
       </style>
-      <div class="timer-container" style="${containerStyle}" data-testid="countdown-timer">
-        <h2 style="${titleStyle}">${this.escapeHtml(this.timerData.title)}</h2>
-        ${this.timerData.description ? `<p style="${descriptionStyle}">${this.escapeHtml(this.timerData.description)}</p>` : ''}
-        
-        <div class="timer-grid" style="${timerGridStyle}">
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.days.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Days</div>
-          </div>
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.hours.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Hours</div>
-          </div>
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.minutes.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Minutes</div>
-          </div>
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.seconds.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Seconds</div>
-          </div>
-        </div>
-        
-        ${this.timerData.targetUrl ? `
-          <a href="${this.escapeHtml(this.timerData.targetUrl)}" 
-             class="timer-button" 
-             style="${buttonStyle}"
-             role="button"
-             aria-label="Take action before timer expires">
-            Don't Miss Out!
-          </a>
-        ` : ''}
+    `;
+  }
+
+  private renderEditorPlaceholder(): void {
+    this.innerHTML = `
+      ${this.getStyles()}
+      <div class="editor-container" data-testid="countdown-timer-editor">
+        <div class="editor-icon">⏱️</div>
+        <h2 class="editor-title">COUNTDOWN TIMER</h2>
+        <p class="editor-message">
+          This widget will display a live countdown on your published site.<br>
+          Configure the target date in your dashboard to get started.
+        </p>
       </div>
     `;
   }
 
-  private renderExpired(): void {
-    if (!this.timerData) {
+  private renderCountdown(timeRemaining: TimeRemaining): void {
+    if (!this.config) {
       return;
     }
 
-    const containerStyle = `
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-      color: white;
-      padding: 24px;
-      border-radius: 12px;
-      text-align: center;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-      max-width: 500px;
-      margin: 0 auto;
-    `;
+    const timeUnits = [
+      { value: timeRemaining.days, label: 'Days' },
+      { value: timeRemaining.hours, label: 'Hours' },
+      { value: timeRemaining.minutes, label: 'Minutes' },
+      { value: timeRemaining.seconds, label: 'Seconds' }
+    ];
+
+    const timeUnitsHtml = timeUnits
+      .map(unit => `
+        <div class="time-unit">
+          <div class="time-number">${unit.value.toString().padStart(2, '0')}</div>
+          <div class="time-label">${unit.label}</div>
+        </div>
+      `)
+      .join('');
 
-    const titleStyle = `
-      font-size: 24px;
-      font-weight: 700;
-      margin: 0 0 16px 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    `;
+    const titleHtml = this.config.title
+      ? `<h2 class="timer-title">${this.escapeHtml(this.config.title)}</h2>`
+      : '';
 
-    const messageStyle = `
-      font-size: 18px;
-      margin: 0;
-      opacity: 0.9;
+    this.innerHTML = `
+      ${this.getStyles()}
+      <div class="timer-container" data-testid="countdown-timer">
+        <div class="timer-glow"></div>
+        ${titleHtml}
+        <div class="timer-grid">
+          ${timeUnitsHtml}
+        </div>
+      </div>
     `;
+  }
+
+  private renderExpired(): void {
+    const message = this.config && this.config.title
+      ? `${this.escapeHtml(this.config.title)} has ended.`
+      : 'The countdown has ended.';
 
     this.innerHTML = `
-      <div style="${containerStyle}" data-testid="countdown-timer-expired">
-        <h2 style="${titleStyle}">⏰ Time's Up!</h2>
-        <p style="${messageStyle}">${this.escapeHtml(this.timerData.title)} has ended.</p>
-        ${this.timerData.targetUrl ? `
-          <a href="${this.escapeHtml(this.timerData.targetUrl)}" 
-             style="
-               background: rgba(255, 255, 255, 0.2);
-               color: white;
-               border: 2px solid rgba(255, 255, 255, 0.3);
-               padding: 12px 24px;
-               border-radius: 6px;
-               font-size: 16px;
-               font-weight: 600;
-               cursor: pointer;
-               text-decoration: none;
-               display: inline-block;
-               margin-top: 16px;
-               backdrop-filter: blur(10px);
-             "
-             role="button">
-            Learn More
-          </a>
-        ` : ''}
+      ${this.getStyles()}
+      <div class="expired-container" data-testid="countdown-timer-expired">
+        <div class="expired-icon">🎉</div>
+        <h2 class="expired-title">Time's Up!</h2>
+        <p class="expired-message">${message}</p>
       </div>
     `;
   }
 
-  private renderError(): void {
-    const containerStyle = `
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #f8f9fa;
-      color: #6c757d;
-      padding: 24px;
-      border-radius: 12px;
-      text-align: center;
-      border: 2px dashed #dee2e6;
-      max-width: 500px;
-      margin: 0 auto;
+  private renderNoConfig(): void {
+    this.innerHTML = `
+      ${this.getStyles()}
+      <div class="no-config-container" data-testid="countdown-timer-no-config">
+        <div class="no-config-icon">⚙️</div>
+        <h2 class="no-config-title">No Active Countdown</h2>
+        <p class="no-config-message">
+          Please configure a countdown timer in your dashboard to display it here.
+        </p>
+      </div>
     `;
+  }
 
+  private renderError(): void {
     this.innerHTML = `
-      <div style="${containerStyle}" data-testid="countdown-timer-error">
-        <p style="margin: 0; font-size: 16px;">⚠️ Unable to load countdown timer</p>
+      ${this.getStyles()}
+      <div class="error-container" data-testid="countdown-timer-error">
+        <div class="error-icon">⚠️</div>
+        <p class="error-message">Unable to load countdown timer</p>
       </div>
     `;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/ditto-codegen-public",
-  "version": "1.0.171",
+  "version": "1.0.172",
   "description": "AI-powered Wix CLI app generator - standalone executable",
   "scripts": {
     "build": "node build.mjs",
@@ -24,5 +24,5 @@
     "@wix/ditto-codegen": "1.0.0",
     "esbuild": "^0.25.9"
   },
-  "falconPackageHash": "40fa676f6231cebb54833b3bd440ad0d833557d1ccab2e07fe8483c5"
+  "falconPackageHash": "5f55c293e1d9dc44eafdb84800bd1d20129b4fea5bf5eeac1b61c3a5"
 }