Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: buy immich (#18289)

Browse Source 
* refactor: buy container

* refactor: buy immich
This commit is contained in:
Jason Rasmussen 2025-05-14 12:09:10 -04:00 committed by GitHub
parent 3944f5d73b
commit fac1beb7d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 52 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/lib/components/shared-components/purchasing/purchase-content.svelte
View File

@ -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>

24
web/src/routes/(user)/buy/+page.svelte
View File

@ -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>