From fac1beb7d830b59a9e7bcf6dc604060d45730185 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 14 May 2025 12:09:10 -0400
Subject: [PATCH] refactor: buy immich (#18289)

* refactor: buy container

* refactor: buy immich
---
 .../purchasing/purchase-content.svelte        | 87 +++++++++----------
 web/src/routes/(user)/buy/+page.svelte        | 24 ++---
 2 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/web/src/lib/components/shared-components/purchasing/purchase-content.svelte b/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
index b46bdcb5e3e..637ed188691 100644
--- a/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
+++ b/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
@@ -4,6 +4,7 @@
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { handleError } from '$lib/utils/handle-error';
   import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
+  import { Heading } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
   import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
@@ -36,52 +37,50 @@
   };
 </script>
 
-<section class="p-4">
-  <div>
-    {#if showTitle}
-      <h1 class="text-4xl font-bold tracking-wider">
-        {$t('purchase_option_title')}
-      </h1>
-    {/if}
+<section>
+  {#if showTitle}
+    <Heading color="primary" tag="h1" class="text-4xl font-bold tracking-wider">
+      {$t('purchase_option_title')}
+    </Heading>
+  {/if}
 
-    {#if showMessage}
-      <div class="mt-2">
-        <p>
-          {$t('purchase_panel_info_1')}
-        </p>
-        <br />
-        <p>
-          {$t('purchase_panel_info_2')}
-        </p>
-        <div></div>
-      </div>
-    {/if}
-
-    <div class="flex flex-col sm:flex-row gap-6 mt-4 justify-between">
-      <ServerPurchaseOptionCard />
-      <UserPurchaseOptionCard />
+  {#if showMessage}
+    <div class="mt-2">
+      <p>
+        {$t('purchase_panel_info_1')}
+      </p>
+      <br />
+      <p>
+        {$t('purchase_panel_info_2')}
+      </p>
+      <div></div>
     </div>
+  {/if}
 
-    <div class="mt-6">
-      <p class="dark:text-immich-gray">{$t('purchase_input_suggestion')}</p>
-      <form class="mt-2 flex gap-2" onsubmit={activate}>
-        <input
-          class="immich-form-input w-full"
-          id="purchaseKey"
-          type="text"
-          bind:value={productKey}
-          required
-          placeholder="IMCL-0KEY-0CAN-00BE-FOUD-FROM-YOUR-EMAIL-INBX"
-          disabled={isLoading}
-        />
-        <Button type="submit" rounded="lg"
-          >{#if isLoading}
-            <LoadingSpinner />
-          {:else}
-            {$t('purchase_button_activate')}
-          {/if}</Button
-        >
-      </form>
-    </div>
+  <div class="flex flex-col sm:flex-row gap-6 mt-4 justify-between">
+    <ServerPurchaseOptionCard />
+    <UserPurchaseOptionCard />
+  </div>
+
+  <div class="mt-6">
+    <p class="dark:text-immich-gray">{$t('purchase_input_suggestion')}</p>
+    <form class="mt-2 flex gap-2" onsubmit={activate}>
+      <input
+        class="immich-form-input w-full"
+        id="purchaseKey"
+        type="text"
+        bind:value={productKey}
+        required
+        placeholder="IMCL-0KEY-0CAN-00BE-FOUD-FROM-YOUR-EMAIL-INBX"
+        disabled={isLoading}
+      />
+      <Button type="submit" rounded="lg"
+        >{#if isLoading}
+          <LoadingSpinner />
+        {:else}
+          {$t('purchase_button_activate')}
+        {/if}</Button
+      >
+    </form>
   </div>
 </section>
diff --git a/web/src/routes/(user)/buy/+page.svelte b/web/src/routes/(user)/buy/+page.svelte
index eb0194c4472..e8bfd5451be 100644
--- a/web/src/routes/(user)/buy/+page.svelte
+++ b/web/src/routes/(user)/buy/+page.svelte
@@ -3,13 +3,13 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import LicenseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
   import LicenseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
+  import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
+  import { purchaseStore } from '$lib/stores/purchase.store';
+  import { Alert, Container, Stack } from '@immich/ui';
+  import { mdiAlertCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiAlertCircleOutline } from '@mdi/js';
-  import { purchaseStore } from '$lib/stores/purchase.store';
-  import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
 
   interface Props {
     data: PageData;
@@ -21,16 +21,10 @@
 </script>
 
 <UserPageLayout title={$t('buy')}>
-  <section class="mx-4 flex place-content-center">
-    <div class="w-full max-w-3xl">
+  <Container size="medium" center>
+    <Stack gap={4} class="mt-4">
       {#if data.isActivated === false}
-        <div
-          class="bg-red-100 text-red-700 px-4 py-3 rounded-md flex place-items-center place-content-center gap-2"
-          role="alert"
-        >
-          <Icon path={mdiAlertCircleOutline} size="18" />
-          <p>{$t('purchase_failed_activation')}</p>
-        </div>
+        <Alert icon={mdiAlertCircleOutline} color="danger" title={$t('purchase_failed_activation')} />
       {/if}
 
       {#if $isPurchased}
@@ -46,6 +40,6 @@
           }}
         />
       {/if}
-    </div>
-  </section>
+    </Stack>
+  </Container>
 </UserPageLayout>