initial

apps/pay/components/invoice-form/timer.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="[cn.b(), cn.is('expired', isPassed)]">
+    <UiIconClock :class="cn.e('icon')" />
+
+    <ClientOnly>
+      <span :class="cn.e('time')">{{ formattedTime }}</span>
+
+      <template #fallback>
+        <span :class="cn.e('time')">--:--</span>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+const { expirationTime } = inject('public-invoice')
+
+const cn = useClassname('invoice-form-timer')
+
+const { isPassed, remainingTime } = useTimer(expirationTime)
+
+const formattedTime = computed(() => {
+  return new Date(remainingTime.value * 1000).toISOString().slice(14, 19)
+})
+</script>
+
+<style lang="scss">
+.invoice-form-timer {
+  $self: &;
+
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    color: $clr-grey-400;
+    margin-right: 8px;
+
+    #{$self}.is-expired & {
+      color: $clr-red-500;
+    }
+  }
+
+  &__time {
+    @include txt-m-sb;
+
+    color: $clr-grey-600;
+
+    #{$self}.is-expired & {
+      color: $clr-red-500;
+    }
+  }
+}
+</style>