initial

apps/pay/components/invoice-form/step/expired.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="cn.m('expired')">
+    <div class="p-16">
+      <img
+        src="/expired.svg"
+        alt="Expired"
+        class="mb-16"
+        data-status-illustration
+      >
+
+      <h2 class="text-clr-grey-600">
+        Payment has expired
+      </h2>
+
+      <h4 class="text-clr-grey-400 mt-16">
+        Your invoice has expired. If you want to make a payment, <br> please return to the site and create the invoice again.
+      </h4>
+    </div>
+
+    <InvoiceFormSeparator />
+
+    <InvoiceFormAmount />
+
+    <UiButton
+      :class="cn.e('back-to-store')"
+      size="large"
+      :href="invoice.redirectUrl"
+    >
+      Back to store
+    </UiButton>
+  </div>
+</template>
+
+<script setup>
+const { invoice } = inject('public-invoice')
+
+const cn = useClassname('invoice-form')
+</script>
+
+<style lang="scss">
+.invoice-form {
+  $self: &;
+
+  &--expired {
+    #{$self}__back-to-store {
+      width: 100%;
+      margin-top: 32px;
+    }
+  }
+}
+</style>