CountdownTimer

The CountdownTimer component is used to display the remaining time:

• Until the end of the current period (based on marketing data from the backend)
• Until a specific static date (set as the target parameter of the component)
• Custom periodicity set on the frontend (custom-periodicality + custom-period-start)

Usage Examples:

<div>
  <h3 class="mt-8">Automatically set to the end of the current period</h3>
  <ui-countdown-timer></ui-countdown-timer>

  <h3 class="mt-8">Statically set target in local time (not recommended)</h3>
  <ui-countdown-timer target="2026-02-05T17:00:00"></ui-countdown-timer>

  <h3 class="mt-8">Statically set target in Bangkok / Novosibirsk Time Zone</h3>
  <ui-countdown-timer target="2026-02-05T17:00:00.000+07:00"></ui-countdown-timer>

  <h3 class="mt-8">Statically set target in UTC (hide days/seconds)</h3>
  <ui-countdown-timer target="2026-02-05T00:00:00.000Z" 
  :hide-seconds="true" :hide-days="true"></ui-countdown-timer>

  <h3 class="mt-8">With Text Above</h3>
  <ui-countdown-timer>
    <template #default="params">
      <div v-if="params.currentPeriodLabel">
        {{ params.currentPeriodLabel }}
      </div>
      <div>
        Until the end of the current period
      </div>
    </template>
  </ui-countdown-timer>

  <h3 class="mt-8">With Text Below</h3>
  <ui-countdown-timer>
    <template #below="params">
      <pre>
        currentPeriodLabel: {{ params.currentPeriodLabel }}
        calculatedTargetDate: {{ params.calculatedTargetDate }}
        timeLeft: {{ params.timeLeft }}
      </pre>
    </template>
  </ui-countdown-timer>

  <h3 class="mt-8">Custom period: monthly</h3>
  <ui-countdown-timer custom-periodicality="monthly" 
  custom-period-start="2024-01-01T10:00:00.000+07:00">
    <template #below="params">
      <div>
        currentPeriodLabel: {{ params.currentPeriodLabel }}
      </div>
      <div>
        calculatedTargetDate: {{ params.calculatedTargetDate }}
      </div>
    </template>
  </ui-countdown-timer>

  <h3 class="mt-8">Custom period: weekly</h3>
  <ui-countdown-timer custom-periodicality="weekly" 
  custom-period-start="2025-01-01T10:00:00.000+07:00">
    <template #below="params">
      <div>
        currentPeriodLabel: {{ params.currentPeriodLabel }}
      </div>
      <div>
        calculatedTargetDate: {{ params.calculatedTargetDate }}
      </div>
    </template>
  </ui-countdown-timer>
</div>

Overriding Timer Style/Color:

Individual parts of the timer use the following CSS classes:

To override them, simply add the following code to your theme settings or global CSS:

.countdown-time {
    background-color: green !important;
}

Note: All settings can be customized either from the admin panel by manually 
editing the code or from within the back office by clicking on the cog icon 
in the upper left corner of the page (only accessible when the "Online office
admin" flag is present).