@wix/ditto-codegen-public 1.0.39 → 1.0.41

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

@@ -0,0 +1,332 @@
+interface CountdownTimerData {
+  title: string;
+  endDateTime: string;
+  targetUrl?: string;
+  isActive: boolean;
+  description?: string;
+}
+
+interface TimeRemaining {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+export default class extends HTMLElement {
+  private intervalId: number | null = null;
+  private timerData: CountdownTimerData | null = null;
+
+  public connectedCallback(): void {
+    this.loadTimerData();
+  }
+
+  public disconnectedCallback(): void {
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  private async loadTimerData(): 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();
+    } catch (error) {
+      console.error('Failed to load timer data:', error);
+      this.renderError();
+    }
+  }
+
+  private calculateTimeRemaining(endDate: string): TimeRemaining | null {
+    const now = new Date().getTime();
+    const end = new Date(endDate).getTime();
+    const difference = end - now;
+
+    if (difference <= 0) {
+      return null;
+    }
+
+    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+
+    return { days, hours, minutes, seconds };
+  }
+
+  private startCountdown(): void {
+    if (!this.timerData || !this.timerData.isActive) {
+      return;
+    }
+
+    this.intervalId = window.setInterval(() => {
+      this.updateCountdown();
+    }, 1000);
+  }
+
+  private updateCountdown(): void {
+    if (!this.timerData) {
+      return;
+    }
+
+    const timeRemaining = this.calculateTimeRemaining(this.timerData.endDateTime);
+    
+    if (timeRemaining === null) {
+      this.renderExpired();
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+        this.intervalId = null;
+      }
+      return;
+    }
+
+    this.renderCountdown(timeRemaining);
+  }
+
+  private render(): void {
+    if (!this.timerData) {
+      return;
+    }
+
+    const timeRemaining = this.calculateTimeRemaining(this.timerData.endDateTime);
+    
+    if (timeRemaining === null) {
+      this.renderExpired();
+    } else {
+      this.renderCountdown(timeRemaining);
+    }
+  }
+
+  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;
+    `;
+
+    const titleStyle = `
+      font-size: 24px;
+      font-weight: 700;
+      margin: 0 0 8px 0;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    `;
+
+    const descriptionStyle = `
+      font-size: 16px;
+      opacity: 0.9;
+      margin: 0 0 24px 0;
+      line-height: 1.4;
+    `;
+
+    const timerGridStyle = `
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin: 24px 0;
+    `;
+
+    const timeUnitStyle = `
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 8px;
+      padding: 16px 8px;
+      backdrop-filter: blur(10px);
+    `;
+
+    const numberStyle = `
+      font-size: 32px;
+      font-weight: 800;
+      margin: 0;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    `;
+
+    const labelStyle = `
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin: 4px 0 0 0;
+      opacity: 0.8;
+    `;
+
+    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);
+    `;
+
+    const buttonHoverStyle = `
+      background: rgba(255, 255, 255, 0.3);
+      border-color: rgba(255, 255, 255, 0.5);
+      transform: translateY(-2px);
+    `;
+
+    const responsiveStyle = `
+      @media (max-width: 480px) {
+        .timer-grid {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 12px;
+        }
+        .time-number {
+          font-size: 24px;
+        }
+        .timer-container {
+          padding: 16px;
+        }
+      }
+    `;
+
+    this.innerHTML = `
+      <style>
+        ${responsiveStyle}
+        .timer-button:hover {
+          ${buttonHoverStyle}
+        }
+      </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>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private renderExpired(): void {
+    if (!this.timerData) {
+      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 titleStyle = `
+      font-size: 24px;
+      font-weight: 700;
+      margin: 0 0 16px 0;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    `;
+
+    const messageStyle = `
+      font-size: 18px;
+      margin: 0;
+      opacity: 0.9;
+    `;
+
+    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>
+        ` : ''}
+      </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;
+    `;
+
+    this.innerHTML = `
+      <div style="${containerStyle}" data-testid="countdown-timer-error">
+        <p style="margin: 0; font-size: 16px;">⚠️ Unable to load countdown timer</p>
+      </div>
+    `;
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}