chore(web): change license wording and other things (#11309)

This commit is contained in:
Alex 2024-07-26 10:34:35 -05:00 committed by GitHub
parent bc20710c6d
commit ef7a6bb246
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
40 changed files with 1045 additions and 518 deletions

View File

@ -366,6 +366,8 @@ Class | Method | HTTP request | Description
- [PersonUpdateDto](doc//PersonUpdateDto.md)
- [PersonWithFacesResponseDto](doc//PersonWithFacesResponseDto.md)
- [PlacesResponseDto](doc//PlacesResponseDto.md)
- [PurchaseResponse](doc//PurchaseResponse.md)
- [PurchaseUpdate](doc//PurchaseUpdate.md)
- [QueueStatusDto](doc//QueueStatusDto.md)
- [ReactionLevel](doc//ReactionLevel.md)
- [ReactionType](doc//ReactionType.md)

View File

@ -179,6 +179,8 @@ part 'model/person_statistics_response_dto.dart';
part 'model/person_update_dto.dart';
part 'model/person_with_faces_response_dto.dart';
part 'model/places_response_dto.dart';
part 'model/purchase_response.dart';
part 'model/purchase_update.dart';
part 'model/queue_status_dto.dart';
part 'model/reaction_level.dart';
part 'model/reaction_type.dart';

View File

@ -416,6 +416,10 @@ class ApiClient {
return PersonWithFacesResponseDto.fromJson(value);
case 'PlacesResponseDto':
return PlacesResponseDto.fromJson(value);
case 'PurchaseResponse':
return PurchaseResponse.fromJson(value);
case 'PurchaseUpdate':
return PurchaseUpdate.fromJson(value);
case 'QueueStatusDto':
return QueueStatusDto.fromJson(value);
case 'ReactionLevel':

View File

@ -0,0 +1,106 @@
//
// AUTO-GENERATED FILE, DO NOT MODIFY!
//
// @dart=2.18
// ignore_for_file: unused_element, unused_import
// ignore_for_file: always_put_required_named_parameters_first
// ignore_for_file: constant_identifier_names
// ignore_for_file: lines_longer_than_80_chars
part of openapi.api;
class PurchaseResponse {
/// Returns a new [PurchaseResponse] instance.
PurchaseResponse({
required this.hideBuyButtonUntil,
required this.showSupportBadge,
});
String hideBuyButtonUntil;
bool showSupportBadge;
@override
bool operator ==(Object other) => identical(this, other) || other is PurchaseResponse &&
other.hideBuyButtonUntil == hideBuyButtonUntil &&
other.showSupportBadge == showSupportBadge;
@override
int get hashCode =>
// ignore: unnecessary_parenthesis
(hideBuyButtonUntil.hashCode) +
(showSupportBadge.hashCode);
@override
String toString() => 'PurchaseResponse[hideBuyButtonUntil=$hideBuyButtonUntil, showSupportBadge=$showSupportBadge]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
json[r'hideBuyButtonUntil'] = this.hideBuyButtonUntil;
json[r'showSupportBadge'] = this.showSupportBadge;
return json;
}
/// Returns a new [PurchaseResponse] instance and imports its values from
/// [value] if it's a [Map], null otherwise.
// ignore: prefer_constructors_over_static_methods
static PurchaseResponse? fromJson(dynamic value) {
if (value is Map) {
final json = value.cast<String, dynamic>();
return PurchaseResponse(
hideBuyButtonUntil: mapValueOfType<String>(json, r'hideBuyButtonUntil')!,
showSupportBadge: mapValueOfType<bool>(json, r'showSupportBadge')!,
);
}
return null;
}
static List<PurchaseResponse> listFromJson(dynamic json, {bool growable = false,}) {
final result = <PurchaseResponse>[];
if (json is List && json.isNotEmpty) {
for (final row in json) {
final value = PurchaseResponse.fromJson(row);
if (value != null) {
result.add(value);
}
}
}
return result.toList(growable: growable);
}
static Map<String, PurchaseResponse> mapFromJson(dynamic json) {
final map = <String, PurchaseResponse>{};
if (json is Map && json.isNotEmpty) {
json = json.cast<String, dynamic>(); // ignore: parameter_assignments
for (final entry in json.entries) {
final value = PurchaseResponse.fromJson(entry.value);
if (value != null) {
map[entry.key] = value;
}
}
}
return map;
}
// maps a json object with a list of PurchaseResponse-objects as value to a dart map
static Map<String, List<PurchaseResponse>> mapListFromJson(dynamic json, {bool growable = false,}) {
final map = <String, List<PurchaseResponse>>{};
if (json is Map && json.isNotEmpty) {
// ignore: parameter_assignments
json = json.cast<String, dynamic>();
for (final entry in json.entries) {
map[entry.key] = PurchaseResponse.listFromJson(entry.value, growable: growable,);
}
}
return map;
}
/// The list of required keys that must be present in a JSON.
static const requiredKeys = <String>{
'hideBuyButtonUntil',
'showSupportBadge',
};
}

View File

@ -0,0 +1,124 @@
//
// AUTO-GENERATED FILE, DO NOT MODIFY!
//
// @dart=2.18
// ignore_for_file: unused_element, unused_import
// ignore_for_file: always_put_required_named_parameters_first
// ignore_for_file: constant_identifier_names
// ignore_for_file: lines_longer_than_80_chars
part of openapi.api;
class PurchaseUpdate {
/// Returns a new [PurchaseUpdate] instance.
PurchaseUpdate({
this.hideBuyButtonUntil,
this.showSupportBadge,
});
///
/// Please note: This property should have been non-nullable! Since the specification file
/// does not include a default value (using the "default:" property), however, the generated
/// source code must fall back to having a nullable type.
/// Consider adding a "default:" property in the specification file to hide this note.
///
String? hideBuyButtonUntil;
///
/// Please note: This property should have been non-nullable! Since the specification file
/// does not include a default value (using the "default:" property), however, the generated
/// source code must fall back to having a nullable type.
/// Consider adding a "default:" property in the specification file to hide this note.
///
bool? showSupportBadge;
@override
bool operator ==(Object other) => identical(this, other) || other is PurchaseUpdate &&
other.hideBuyButtonUntil == hideBuyButtonUntil &&
other.showSupportBadge == showSupportBadge;
@override
int get hashCode =>
// ignore: unnecessary_parenthesis
(hideBuyButtonUntil == null ? 0 : hideBuyButtonUntil!.hashCode) +
(showSupportBadge == null ? 0 : showSupportBadge!.hashCode);
@override
String toString() => 'PurchaseUpdate[hideBuyButtonUntil=$hideBuyButtonUntil, showSupportBadge=$showSupportBadge]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
if (this.hideBuyButtonUntil != null) {
json[r'hideBuyButtonUntil'] = this.hideBuyButtonUntil;
} else {
// json[r'hideBuyButtonUntil'] = null;
}
if (this.showSupportBadge != null) {
json[r'showSupportBadge'] = this.showSupportBadge;
} else {
// json[r'showSupportBadge'] = null;
}
return json;
}
/// Returns a new [PurchaseUpdate] instance and imports its values from
/// [value] if it's a [Map], null otherwise.
// ignore: prefer_constructors_over_static_methods
static PurchaseUpdate? fromJson(dynamic value) {
if (value is Map) {
final json = value.cast<String, dynamic>();
return PurchaseUpdate(
hideBuyButtonUntil: mapValueOfType<String>(json, r'hideBuyButtonUntil'),
showSupportBadge: mapValueOfType<bool>(json, r'showSupportBadge'),
);
}
return null;
}
static List<PurchaseUpdate> listFromJson(dynamic json, {bool growable = false,}) {
final result = <PurchaseUpdate>[];
if (json is List && json.isNotEmpty) {
for (final row in json) {
final value = PurchaseUpdate.fromJson(row);
if (value != null) {
result.add(value);
}
}
}
return result.toList(growable: growable);
}
static Map<String, PurchaseUpdate> mapFromJson(dynamic json) {
final map = <String, PurchaseUpdate>{};
if (json is Map && json.isNotEmpty) {
json = json.cast<String, dynamic>(); // ignore: parameter_assignments
for (final entry in json.entries) {
final value = PurchaseUpdate.fromJson(entry.value);
if (value != null) {
map[entry.key] = value;
}
}
}
return map;
}
// maps a json object with a list of PurchaseUpdate-objects as value to a dart map
static Map<String, List<PurchaseUpdate>> mapListFromJson(dynamic json, {bool growable = false,}) {
final map = <String, List<PurchaseUpdate>>{};
if (json is Map && json.isNotEmpty) {
// ignore: parameter_assignments
json = json.cast<String, dynamic>();
for (final entry in json.entries) {
map[entry.key] = PurchaseUpdate.listFromJson(entry.value, growable: growable,);
}
}
return map;
}
/// The list of required keys that must be present in a JSON.
static const requiredKeys = <String>{
};
}

View File

@ -17,6 +17,7 @@ class UserPreferencesResponseDto {
required this.download,
required this.emailNotifications,
required this.memories,
required this.purchase,
});
AvatarResponse avatar;
@ -27,12 +28,15 @@ class UserPreferencesResponseDto {
MemoryResponse memories;
PurchaseResponse purchase;
@override
bool operator ==(Object other) => identical(this, other) || other is UserPreferencesResponseDto &&
other.avatar == avatar &&
other.download == download &&
other.emailNotifications == emailNotifications &&
other.memories == memories;
other.memories == memories &&
other.purchase == purchase;
@override
int get hashCode =>
@ -40,10 +44,11 @@ class UserPreferencesResponseDto {
(avatar.hashCode) +
(download.hashCode) +
(emailNotifications.hashCode) +
(memories.hashCode);
(memories.hashCode) +
(purchase.hashCode);
@override
String toString() => 'UserPreferencesResponseDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, memories=$memories]';
String toString() => 'UserPreferencesResponseDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, memories=$memories, purchase=$purchase]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
@ -51,6 +56,7 @@ class UserPreferencesResponseDto {
json[r'download'] = this.download;
json[r'emailNotifications'] = this.emailNotifications;
json[r'memories'] = this.memories;
json[r'purchase'] = this.purchase;
return json;
}
@ -66,6 +72,7 @@ class UserPreferencesResponseDto {
download: DownloadResponse.fromJson(json[r'download'])!,
emailNotifications: EmailNotificationsResponse.fromJson(json[r'emailNotifications'])!,
memories: MemoryResponse.fromJson(json[r'memories'])!,
purchase: PurchaseResponse.fromJson(json[r'purchase'])!,
);
}
return null;
@ -117,6 +124,7 @@ class UserPreferencesResponseDto {
'download',
'emailNotifications',
'memories',
'purchase',
};
}

View File

@ -17,6 +17,7 @@ class UserPreferencesUpdateDto {
this.download,
this.emailNotifications,
this.memories,
this.purchase,
});
///
@ -51,12 +52,21 @@ class UserPreferencesUpdateDto {
///
MemoryUpdate? memories;
///
/// Please note: This property should have been non-nullable! Since the specification file
/// does not include a default value (using the "default:" property), however, the generated
/// source code must fall back to having a nullable type.
/// Consider adding a "default:" property in the specification file to hide this note.
///
PurchaseUpdate? purchase;
@override
bool operator ==(Object other) => identical(this, other) || other is UserPreferencesUpdateDto &&
other.avatar == avatar &&
other.download == download &&
other.emailNotifications == emailNotifications &&
other.memories == memories;
other.memories == memories &&
other.purchase == purchase;
@override
int get hashCode =>
@ -64,10 +74,11 @@ class UserPreferencesUpdateDto {
(avatar == null ? 0 : avatar!.hashCode) +
(download == null ? 0 : download!.hashCode) +
(emailNotifications == null ? 0 : emailNotifications!.hashCode) +
(memories == null ? 0 : memories!.hashCode);
(memories == null ? 0 : memories!.hashCode) +
(purchase == null ? 0 : purchase!.hashCode);
@override
String toString() => 'UserPreferencesUpdateDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, memories=$memories]';
String toString() => 'UserPreferencesUpdateDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, memories=$memories, purchase=$purchase]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
@ -91,6 +102,11 @@ class UserPreferencesUpdateDto {
} else {
// json[r'memories'] = null;
}
if (this.purchase != null) {
json[r'purchase'] = this.purchase;
} else {
// json[r'purchase'] = null;
}
return json;
}
@ -106,6 +122,7 @@ class UserPreferencesUpdateDto {
download: DownloadUpdate.fromJson(json[r'download']),
emailNotifications: EmailNotificationsUpdate.fromJson(json[r'emailNotifications']),
memories: MemoryUpdate.fromJson(json[r'memories']),
purchase: PurchaseUpdate.fromJson(json[r'purchase']),
);
}
return null;

View File

@ -9775,6 +9775,32 @@
],
"type": "object"
},
"PurchaseResponse": {
"properties": {
"hideBuyButtonUntil": {
"type": "string"
},
"showSupportBadge": {
"type": "boolean"
}
},
"required": [
"hideBuyButtonUntil",
"showSupportBadge"
],
"type": "object"
},
"PurchaseUpdate": {
"properties": {
"hideBuyButtonUntil": {
"type": "string"
},
"showSupportBadge": {
"type": "boolean"
}
},
"type": "object"
},
"QueueStatusDto": {
"properties": {
"isActive": {
@ -11742,13 +11768,17 @@
},
"memories": {
"$ref": "#/components/schemas/MemoryResponse"
},
"purchase": {
"$ref": "#/components/schemas/PurchaseResponse"
}
},
"required": [
"avatar",
"download",
"emailNotifications",
"memories"
"memories",
"purchase"
],
"type": "object"
},
@ -11765,6 +11795,9 @@
},
"memories": {
"$ref": "#/components/schemas/MemoryUpdate"
},
"purchase": {
"$ref": "#/components/schemas/PurchaseUpdate"
}
},
"type": "object"

View File

@ -95,11 +95,16 @@ export type EmailNotificationsResponse = {
export type MemoryResponse = {
enabled: boolean;
};
export type PurchaseResponse = {
hideBuyButtonUntil: string;
showSupportBadge: boolean;
};
export type UserPreferencesResponseDto = {
avatar: AvatarResponse;
download: DownloadResponse;
emailNotifications: EmailNotificationsResponse;
memories: MemoryResponse;
purchase: PurchaseResponse;
};
export type AvatarUpdate = {
color?: UserAvatarColor;
@ -115,11 +120,16 @@ export type EmailNotificationsUpdate = {
export type MemoryUpdate = {
enabled?: boolean;
};
export type PurchaseUpdate = {
hideBuyButtonUntil?: string;
showSupportBadge?: boolean;
};
export type UserPreferencesUpdateDto = {
avatar?: AvatarUpdate;
download?: DownloadUpdate;
emailNotifications?: EmailNotificationsUpdate;
memories?: MemoryUpdate;
purchase?: PurchaseUpdate;
};
export type AlbumUserResponseDto = {
role: AlbumUserRole;

View File

@ -1,6 +1,6 @@
import { ApiProperty } from '@nestjs/swagger';
import { Type } from 'class-transformer';
import { IsEnum, IsInt, IsPositive, ValidateNested } from 'class-validator';
import { IsDateString, IsEnum, IsInt, IsPositive, ValidateNested } from 'class-validator';
import { UserAvatarColor, UserPreferences } from 'src/entities/user-metadata.entity';
import { Optional, ValidateBoolean } from 'src/validation';
@ -35,6 +35,15 @@ class DownloadUpdate {
archiveSize?: number;
}
class PurchaseUpdate {
@ValidateBoolean({ optional: true })
showSupportBadge?: boolean;
@IsDateString()
@Optional()
hideBuyButtonUntil?: string;
}
export class UserPreferencesUpdateDto {
@Optional()
@ValidateNested()
@ -55,6 +64,11 @@ export class UserPreferencesUpdateDto {
@ValidateNested()
@Type(() => DownloadUpdate)
download?: DownloadUpdate;
@Optional()
@ValidateNested()
@Type(() => PurchaseUpdate)
purchase?: PurchaseUpdate;
}
class AvatarResponse {
@ -77,11 +91,17 @@ class DownloadResponse {
archiveSize!: number;
}
class PurchaseResponse {
showSupportBadge!: boolean;
hideBuyButtonUntil!: string;
}
export class UserPreferencesResponseDto implements UserPreferences {
memories!: MemoryResponse;
avatar!: AvatarResponse;
emailNotifications!: EmailNotificationsResponse;
download!: DownloadResponse;
purchase!: PurchaseResponse;
}
export const mapPreferences = (preferences: UserPreferences): UserPreferencesResponseDto => {

View File

@ -45,6 +45,10 @@ export interface UserPreferences {
download: {
archiveSize: number;
};
purchase: {
showSupportBadge: boolean;
hideBuyButtonUntil: string;
};
}
export const getDefaultPreferences = (user: { email: string }): UserPreferences => {
@ -68,6 +72,10 @@ export const getDefaultPreferences = (user: { email: string }): UserPreferences
download: {
archiveSize: HumanReadableSize.GiB * 4,
},
purchase: {
showSupportBadge: true,
hideBuyButtonUntil: new Date(2022, 1, 12).toISOString(),
},
};
};

View File

@ -12,8 +12,9 @@ describe('getKeysDeep', () => {
foo: 'bar',
flag: true,
count: 42,
date: new Date(),
}),
).toEqual(['foo', 'flag', 'count']);
).toEqual(['foo', 'flag', 'count', 'date']);
});
it('should skip undefined properties', () => {

View File

@ -33,7 +33,7 @@ export const getKeysDeep = (target: unknown, path: string[] = []) => {
continue;
}
if (_.isObject(value) && !_.isArray(value)) {
if (_.isObject(value) && !_.isArray(value) && !_.isDate(value)) {
properties.push(...getKeysDeep(value, [...path, key]));
continue;
}

View File

@ -142,4 +142,46 @@ input:focus-visible {
.scrollbar-stable {
scrollbar-gutter: stable both-edges;
}
/* Supporter Effect */
.supporter-effect {
position: relative;
border: 0px solid transparent;
background-clip: padding-box;
animation: gradient 10s ease infinite;
z-index: 1;
}
.supporter-effect:hover:after {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: linear-gradient(
to right,
rgba(16, 132, 254, 0.25),
rgba(229, 125, 175, 0.25),
rgba(254, 36, 29, 0.25),
rgba(255, 183, 0, 0.25),
rgba(22, 193, 68, 0.25)
);
content: '';
border-radius: 8px;
animation: gradient 10s ease infinite;
background-size: 400% 400%;
z-index: -1;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}

View File

@ -2,6 +2,7 @@
export type Type = 'button' | 'submit' | 'reset';
export type Color =
| 'primary'
| 'primary-inversed'
| 'secondary'
| 'transparent-primary'
| 'text-primary'
@ -50,6 +51,8 @@
'dark-gray':
'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white',
'overlay-primary': 'text-gray-500 enabled:hover:bg-gray-100',
'primary-inversed':
'bg-immich-dark-primary dark:bg-immich-primary text-black dark:text-white enabled:hover:bg-immich-dark-primary/80 enabled:dark:hover:bg-immich-primary/90',
};
const sizeClasses: Record<Size, string> = {

View File

@ -1,18 +0,0 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { t } from 'svelte-i18n';
import { mdiPartyPopper } from '@mdi/js';
export let onDone: () => void;
</script>
<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center mb-6 dark:text-white">
<Icon path={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
<p class="text-4xl mt-8 font-bold">{$t('license_activated_title')}</p>
<p class="text-lg mt-6">{$t('license_activated_subtitle')}</p>
<div class="mt-10 w-full">
<Button fullwidth on:click={onDone}>OK</Button>
</div>
</div>

View File

@ -1,70 +0,0 @@
<script lang="ts">
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import ServerLicenseCard from './server-license-card.svelte';
import UserLicenseCard from './user-license-card.svelte';
import { activateLicense, getActivationKey } from '$lib/utils/license-utils';
import Button from '$lib/components/elements/buttons/button.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { licenseStore } from '$lib/stores/license.store';
import { t } from 'svelte-i18n';
export let onActivate: () => void;
let licenseKey = '';
let isLoading = false;
const activate = async () => {
try {
licenseKey = licenseKey.trim();
isLoading = true;
const activationKey = await getActivationKey(licenseKey);
await activateLicense(licenseKey, activationKey);
onActivate();
licenseStore.setLicenseStatus(true);
} catch (error) {
handleError(error, $t('license_failed_activation'));
} finally {
isLoading = false;
}
};
</script>
<section class="p-4">
<div>
<h1 class="text-4xl font-bold text-immich-primary dark:text-immich-dark-primary tracking-wider">
{$t('license_license_title')}
</h1>
<p class="text-lg mt-2 dark:text-immich-gray">{$t('license_license_subtitle')}</p>
</div>
<div class="flex gap-6 mt-4 justify-between">
{#if $user.isAdmin}
<ServerLicenseCard />
{/if}
<UserLicenseCard />
</div>
<div class="mt-6">
<p class="dark:text-immich-gray">{$t('license_input_suggestion')}</p>
<form class="mt-2 flex gap-2" on:submit={activate}>
<input
class="immich-form-input w-full"
id="licensekey"
type="text"
bind:value={licenseKey}
required
placeholder="IMCL-0KEY-0CAN-00BE-FOUD-FROM-YOUR-EMAIL-INBX"
disabled={isLoading}
/>
<Button type="submit" rounded="lg"
>{#if isLoading}
<LoadingSpinner />
{:else}
{$t('license_button_activate')}
{/if}</Button
>
</form>
</div>
</section>

View File

@ -1,25 +0,0 @@
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import LicenseActivationSuccess from '$lib/components/shared-components/license/license-activation-success.svelte';
import LicenseContent from '$lib/components/shared-components/license/license-content.svelte';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
export let onClose: () => void;
let showLicenseActivated = false;
</script>
<Portal>
<FullScreenModal showLogo title={''} {onClose} width="wide">
{#if showLicenseActivated}
<LicenseActivationSuccess onDone={onClose} />
{:else}
<LicenseContent
onActivate={() => {
showLicenseActivated = true;
}}
/>
{/if}
</FullScreenModal>
</Portal>

View File

@ -1,39 +1,44 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { ImmichLicense } from '$lib/constants';
import { getLicenseLink } from '$lib/utils/license-utils';
import { ImmichProduct } from '$lib/constants';
import { getLicenseLink as getProductLink } from '$lib/utils/license-utils';
import { mdiAccount, mdiCheckCircleOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
</script>
<!-- USER LICENSE -->
<!-- Inidvidual Purchase Option -->
<div class="border border-gray-300 dark:border-gray-800 w-[375px] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900">
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiAccount} size="56" />
<p class="font-semibold text-lg mt-1">{$t('license_individual_title')}</p>
<p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
</div>
<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$24<span class="text-2xl font-medium">.99</span></p>
<p>{$t('license_per_user')}</p>
<p class="text-6xl font-bold">$25</p>
<p>{$t('purchase_per_user')}</p>
</div>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('license_individual_description_1')}</p>
<p class="self-center">{$t('purchase_individual_description_1')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('license_lifetime_description')}</p>
<p class="self-center">{$t('purchase_lifetime_description')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_individual_description_2')}</p>
</div>
</div>
<a href={getLicenseLink(ImmichLicense.Client)}>
<Button fullwidth>{$t('license_button_select')}</Button>
<a href={getProductLink(ImmichProduct.Client)}>
<Button fullwidth>{$t('purchase_button_select')}</Button>
</a>
</div>
</div>

View File

@ -0,0 +1,30 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { t } from 'svelte-i18n';
import { mdiPartyPopper } from '@mdi/js';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
export let onDone: () => void;
</script>
<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center dark:text-white my-6">
<Icon path={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
<p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
<p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>
<div class="mb-4 w-full mt-6 border rounded-xl p-4 bg-gray-50 dark:bg-gray-900 dark:border-gray-600">
<SettingSwitch
title={$t('show_supporter_badge')}
subtitle={$t('show_supporter_badge_description')}
bind:checked={$preferences.purchase.showSupportBadge}
on:toggle={({ detail }) => setSupportBadgeVisibility(detail)}
/>
</div>
<div class="mt-6 w-full">
<Button fullwidth on:click={onDone}>OK</Button>
</div>
</div>

View File

@ -0,0 +1,84 @@
<script lang="ts">
import { handleError } from '$lib/utils/handle-error';
import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
import Button from '$lib/components/elements/buttons/button.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { purchaseStore } from '$lib/stores/purchase.store';
import { t } from 'svelte-i18n';
export let onActivate: () => void;
export let showTitle = true;
export let showMessage = true;
let productKey = '';
let isLoading = false;
const activate = async () => {
try {
productKey = productKey.trim();
isLoading = true;
const activationKey = await getActivationKey(productKey);
await activateProduct(productKey, activationKey);
onActivate();
purchaseStore.setPurchaseStatus(true);
} catch (error) {
handleError(error, $t('purchase_failed_activation'));
} finally {
isLoading = false;
}
};
</script>
<section class="p-4">
<div>
{#if showTitle}
<h1 class="text-4xl font-bold text-immich-primary dark:text-immich-dark-primary tracking-wider">
{$t('purchase_option_title')}
</h1>
{/if}
{#if showMessage}
<div class="mt-2 dark:text-immich-gray">
<p>
{$t('purchase_panel_info_1')}
</p>
<br />
<p>
{$t('purchase_panel_info_2')}
</p>
<div />
</div>
{/if}
<div class="flex 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" on:submit={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>
</section>

View File

@ -0,0 +1,26 @@
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import PurchaseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
export let onClose: () => void;
let showProductActivated = false;
</script>
<Portal>
<FullScreenModal showLogo title={''} {onClose} width="wide">
{#if showProductActivated}
<PurchaseActivationSuccess onDone={onClose} />
{:else}
<PurchaseContent
onActivate={() => {
showProductActivated = true;
}}
showMessage={false}
/>
{/if}
</FullScreenModal>
</Portal>

View File

@ -1,44 +1,44 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { ImmichLicense } from '$lib/constants';
import { ImmichProduct } from '$lib/constants';
import { getLicenseLink } from '$lib/utils/license-utils';
import { mdiCheckCircleOutline, mdiServer } from '@mdi/js';
import { t } from 'svelte-i18n';
</script>
<!-- SERVER LICENSE -->
<!-- SERVER Purchase Options -->
<div class="border border-gray-300 dark:border-gray-800 w-[375px] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900">
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiServer} size="56" />
<p class="font-semibold text-lg mt-1">{$t('license_server_title')}</p>
<p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
</div>
<div class="mt-4 dark:text-immich-gray">
<p class="text-6xl font-bold">$99<span class="text-2xl font-medium">.99</span></p>
<p>{$t('license_per_server')}</p>
<p class="text-6xl font-bold">$100</p>
<p>{$t('purchase_per_server')}</p>
</div>
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('license_server_description_1')}</p>
<p class="self-center">{$t('purchase_server_description_1')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('license_lifetime_description')}</p>
<p class="self-center">{$t('purchase_lifetime_description')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('license_server_description_2')}</p>
<p class="self-center">{$t('purchase_server_description_2')}</p>
</div>
</div>
<a href={getLicenseLink(ImmichLicense.Server)}>
<Button fullwidth>{$t('license_button_select')}</Button>
<a href={getLicenseLink(ImmichProduct.Server)}>
<Button fullwidth>{$t('purchase_button_select')}</Button>
</a>
</div>
</div>

View File

@ -10,11 +10,20 @@
export let key: string;
export let isOpen = $accordionState.has(key);
let accordionElement: HTMLDivElement;
$: setIsOpen(isOpen);
const setIsOpen = (isOpen: boolean) => {
if (isOpen) {
$accordionState = $accordionState.add(key);
setTimeout(() => {
accordionElement.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
}, 200);
} else {
$accordionState.delete(key);
$accordionState = $accordionState;
@ -26,7 +35,7 @@
});
</script>
<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700" bind:this={accordionElement}>
<button
type="button"
aria-expanded={isOpen}

View File

@ -1,5 +1,5 @@
<script lang="ts">
import LicenseInfo from './license-info.svelte';
import PurchaseInfo from './purchase-info.svelte';
import ServerStatus from './server-status.svelte';
import StorageSpace from './storage-space.svelte';
</script>
@ -8,10 +8,8 @@
<StorageSpace />
</div>
<div class="mb-2">
<LicenseInfo />
</div>
<PurchaseInfo />
<div class="mb-6">
<div class="mb-6 mt-2">
<ServerStatus />
</div>

View File

@ -1,117 +0,0 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { mdiClose, mdiInformationOutline, mdiLicense } from '@mdi/js';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import LicenseModal from '$lib/components/shared-components/license/license-modal.svelte';
import { licenseStore } from '$lib/stores/license.store';
import { t } from 'svelte-i18n';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { getAccountAge } from '$lib/utils/auth';
import { fade } from 'svelte/transition';
let showMessage = false;
let isOpen = false;
let hoverMessage = false;
let hoverButton = false;
const { isLicenseActivated } = licenseStore;
const openLicenseModal = () => {
isOpen = true;
showMessage = false;
};
const onButtonHover = () => {
showMessage = true;
hoverButton = true;
};
$: if (showMessage && !hoverMessage && !hoverButton) {
setTimeout(() => {
if (!hoverMessage && !hoverButton) {
showMessage = false;
}
}, 300);
}
</script>
{#if isOpen}
<LicenseModal onClose={() => (isOpen = false)} />
{/if}
<div class="hidden md:block license-status pl-4 text-sm">
{#if $isLicenseActivated}
<button
on:click={() => goto(`${AppRoute.USER_SETTINGS}?isOpen=user-license-settings`)}
class="w-full"
type="button"
>
<div class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-100 py-3 px-2 rounded-lg">
<Icon path={mdiLicense} size="18" class="text-immich-primary dark:text-immich-dark-primary" />
<p class="dark:text-gray-100">{$t('license_info_licensed')}</p>
</div>
</button>
{:else}
<button
type="button"
on:click={openLicenseModal}
on:mouseover={onButtonHover}
on:mouseleave={() => (hoverButton = false)}
on:focus={onButtonHover}
on:blur={() => (hoverButton = false)}
class="py-3 px-2 flex justify-between place-items-center place-content-center border border-gray-300 dark:border-immich-dark-primary/50 mt-2 rounded-lg shadow-sm dark:bg-immich-dark-primary/10 w-full"
>
<div class="flex place-items-center place-content-center gap-1">
<Icon path={mdiLicense} size="18" class="text-immich-dark-gray/75 dark:text-immich-gray/85" />
<p class="text-immich-dark-gray/75 dark:text-immich-gray">{$t('license_info_unlicensed')}</p>
</div>
<div class="text-immich-primary dark:text-immich-dark-primary flex place-items-center gap-[2px] font-medium">
{$t('license_button_buy')}
<span role="contentinfo">
<Icon path={mdiInformationOutline}></Icon>
</span>
</div>
</button>
{/if}
</div>
<Portal target="body">
{#if showMessage && getAccountAge() > 14}
<div
class="w-64 absolute bottom-[75px] left-[255px] bg-white dark:bg-gray-800 dark:text-white text-black rounded-xl z-10 shadow-2xl px-4 py-5"
transition:fade={{ duration: 150 }}
on:mouseover={() => (hoverMessage = true)}
on:mouseleave={() => (hoverMessage = false)}
on:focus={() => (hoverMessage = true)}
on:blur={() => (hoverMessage = false)}
role="dialog"
>
<div class="flex justify-between place-items-center">
<Icon path={mdiLicense} size="44" class="text-immich-dark-gray/75 dark:text-immich-gray" />
<CircleIconButton
icon={mdiClose}
on:click={() => {
showMessage = false;
}}
title={$t('close')}
size="18"
class="text-immich-dark-gray/85 dark:text-immich-gray"
/>
</div>
<h1 class="text-lg font-medium my-3">{$t('license_trial_info_1')}</h1>
<p class="text-immich-dark-gray/80 dark:text-immich-gray text-balance">
{$t('license_trial_info_2')}
<span class="text-immich-primary dark:text-immich-dark-primary font-semibold">
{$t('license_trial_info_3', { values: { accountAge: getAccountAge() } })}</span
>. {$t('license_trial_info_4')}
</p>
<div class="mt-3">
<Button size="sm" fullwidth on:click={openLicenseModal}>{$t('license_button_buy_license')}</Button>
</div>
</div>
{/if}
</Portal>

View File

@ -0,0 +1,179 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { mdiClose, mdiInformationOutline } from '@mdi/js';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
import { purchaseStore } from '$lib/stores/purchase.store';
import { t } from 'svelte-i18n';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { getAccountAge } from '$lib/utils/auth';
import { fade } from 'svelte/transition';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { updateMyPreferences } from '@immich/sdk';
import { handleError } from '$lib/utils/handle-error';
import { preferences } from '$lib/stores/user.store';
import { getButtonVisibility } from '$lib/utils/purchase-utils';
let showMessage = false;
let isOpen = false;
let hoverMessage = false;
let hoverButton = false;
let showBuyButton = getButtonVisibility();
const { isPurchased } = purchaseStore;
const openPurchaseModal = () => {
isOpen = true;
showMessage = false;
};
const onButtonHover = () => {
showMessage = true;
hoverButton = true;
};
const hideButton = async (always: boolean) => {
const hideBuyButtonUntil = new Date();
if (always) {
hideBuyButtonUntil.setFullYear(2124); // see ya in 100 years
} else {
hideBuyButtonUntil.setDate(hideBuyButtonUntil.getDate() + 30);
}
try {
const response = await updateMyPreferences({
userPreferencesUpdateDto: {
purchase: {
hideBuyButtonUntil: hideBuyButtonUntil.toISOString(),
},
},
});
preferences.set(response);
showBuyButton = getButtonVisibility();
showMessage = false;
} catch (error) {
handleError(error, 'Error hiding buy button');
}
};
$: if (showMessage && !hoverMessage && !hoverButton) {
setTimeout(() => {
if (!hoverMessage && !hoverButton) {
showMessage = false;
}
}, 300);
}
</script>
{#if isOpen}
<LicenseModal onClose={() => (isOpen = false)} />
{/if}
{#if getAccountAge() > 14}
<div class="hidden md:block license-status pl-4 text-sm">
{#if $isPurchased && $preferences.purchase.showSupportBadge}
<button
on:click={() => goto(`${AppRoute.USER_SETTINGS}?isOpen=user-purchase-settings`)}
class="w-full"
type="button"
>
<div
class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border supporter-effect rounded-lg transition-all"
>
<div class="h-6 w-6">
<ImmichLogo noText />
</div>
<p class="dark:text-gray-100">Supporter</p>
</div>
</button>
{:else if !$isPurchased && showBuyButton}
<button
type="button"
on:click={openPurchaseModal}
on:mouseover={onButtonHover}
on:mouseleave={() => (hoverButton = false)}
on:focus={onButtonHover}
on:blur={() => (hoverButton = false)}
class="p-2 flex justify-between place-items-center place-content-center border border-immich-primary/20 dark:border-immich-dark-primary/10 mt-2 rounded-lg shadow-md dark:bg-immich-dark-primary/10 w-full"
>
<div class="flex justify-between w-full place-items-center place-content-center">
<div class="flex place-items-center place-content-center gap-1">
<div class="h-6 w-6">
<ImmichLogo noText />
</div>
<p class="flex text-immich-primary dark:text-immich-dark-primary font-medium">
{$t('purchase_button_buy_immich')}
</p>
</div>
<div>
<Icon
path={mdiInformationOutline}
class="flex text-immich-primary dark:text-immich-dark-primary font-medium"
size="18"
/>
</div>
</div>
</button>
{/if}
</div>
{/if}
<Portal target="body">
{#if showMessage}
<div
class="w-[500px] absolute bottom-[75px] left-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl z-10 shadow-2xl px-8 py-6"
transition:fade={{ duration: 150 }}
on:mouseover={() => (hoverMessage = true)}
on:mouseleave={() => (hoverMessage = false)}
on:focus={() => (hoverMessage = true)}
on:blur={() => (hoverMessage = false)}
role="dialog"
>
<div class="flex justify-between place-items-center">
<div class="h-10 w-10">
<ImmichLogo noText />
</div>
<CircleIconButton
icon={mdiClose}
on:click={() => {
showMessage = false;
}}
title={$t('close')}
size="18"
class="text-immich-dark-gray/85 dark:text-immich-gray"
/>
</div>
<h1 class="text-lg font-medium my-3 dark:text-immich-dark-primary text-immich-primary">
{$t('purchase_panel_title')}
</h1>
<div class="text-gray-800 dark:text-white my-4">
<p>
{$t('purchase_panel_info_1')}
</p>
<br />
<p>
{$t('purchase_panel_info_2')}
</p>
</div>
<Button class="mt-2" fullwidth on:click={openPurchaseModal}>{$t('purchase_button_buy_immich')}</Button>
<div class="mt-3 flex gap-4">
<Button size="sm" fullwidth shadow={false} color="transparent-gray" on:click={() => hideButton(true)}>
{$t('purchase_button_never_show_again')}
</Button>
<Button size="sm" fullwidth shadow={false} color="transparent-gray" on:click={() => hideButton(false)}>
{$t('purchase_button_reminder')}
</Button>
</div>
</div>
{/if}
</Portal>

View File

@ -1,172 +0,0 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { onMount } from 'svelte';
import { licenseStore } from '$lib/stores/license.store';
import { user } from '$lib/stores/user.store';
import {
deleteServerLicense,
deleteUserLicense,
getAboutInfo,
getMyUser,
getServerLicense,
isHttpError,
type LicenseResponseDto,
} from '@immich/sdk';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiLicense } from '@mdi/js';
import Button from '$lib/components/elements/buttons/button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { handleError } from '$lib/utils/handle-error';
import LicenseContent from '$lib/components/shared-components/license/license-content.svelte';
import { t } from 'svelte-i18n';
import { getAccountAge } from '$lib/utils/auth';
const { isLicenseActivated } = licenseStore;
let isServerLicense = false;
let serverLicenseInfo: LicenseResponseDto | null = null;
const accountAge = getAccountAge();
const checkLicenseInfo = async () => {
const serverInfo = await getAboutInfo();
isServerLicense = serverInfo.licensed;
const userInfo = await getMyUser();
if (userInfo.license) {
$user = { ...$user, license: userInfo.license };
}
if (isServerLicense && $user.isAdmin) {
serverLicenseInfo = await getServerLicenseInfo();
}
};
const getServerLicenseInfo = async () => {
try {
return await getServerLicense();
} catch (error) {
if (isHttpError(error) && error.status === 404) {
return null;
}
throw error;
}
};
onMount(async () => {
if (!$isLicenseActivated) {
return;
}
await checkLicenseInfo();
});
const removeUserLicense = async () => {
try {
const isConfirmed = await dialogController.show({
title: 'Remove License',
prompt: 'Are you sure you want to remove the license?',
confirmText: 'Remove',
cancelText: 'Cancel',
});
if (!isConfirmed) {
return;
}
await deleteUserLicense();
licenseStore.setLicenseStatus(false);
} catch (error) {
handleError(error, 'Failed to remove license');
}
};
const removeServerLicense = async () => {
try {
const isConfirmed = await dialogController.show({
title: 'Remove License',
prompt: 'Are you sure you want to remove the Server license?',
confirmText: 'Remove',
cancelText: 'Cancel',
});
if (!isConfirmed) {
return;
}
await deleteServerLicense();
licenseStore.setLicenseStatus(false);
} catch (error) {
handleError(error, 'Failed to remove license');
}
};
const onLicenseActivated = async () => {
licenseStore.setLicenseStatus(true);
await checkLicenseInfo();
};
</script>
<section class="my-4">
<div in:fade={{ duration: 500 }}>
{#if $isLicenseActivated}
{#if isServerLicense}
<div
class="bg-gray-50 border border-immich-dark-primary/50 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
>
<Icon path={mdiLicense} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
<div>
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">Server License</p>
{#if $user.isAdmin && serverLicenseInfo?.activatedAt}
<p class="dark:text-white text-sm mt-1 col-start-2">
Activated on {new Date(serverLicenseInfo?.activatedAt).toLocaleDateString()}
</p>
{:else}
<p class="dark:text-white">Your license is managed by the admin</p>
{/if}
</div>
</div>
{#if $user.isAdmin}
<div class="text-right mt-4">
<Button size="sm" color="red" on:click={removeServerLicense}>Remove license</Button>
</div>
{/if}
{:else}
<div
class="bg-gray-50 border border-immich-dark-primary/50 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
>
<Icon path={mdiLicense} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
<div>
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">Individual License</p>
{#if $user.license?.activatedAt}
<p class="dark:text-white text-sm mt-1 col-start-2">
Activated on {new Date($user.license?.activatedAt).toLocaleDateString()}
</p>
{/if}
</div>
</div>
<div class="text-right mt-4">
<Button size="sm" color="red" on:click={removeUserLicense}>Remove license</Button>
</div>
{/if}
{:else}
{#if accountAge > 14}
<div
class="text-center bg-gray-100 border border-immich-dark-primary/50 dark:bg-immich-dark-primary/15 p-4 rounded-xl"
>
<p class="text-immich-dark-gray/80 dark:text-immich-gray text-balance">
{$t('license_trial_info_2')}
<span class="text-immich-primary dark:text-immich-dark-primary font-semibold">
{$t('license_trial_info_3', { values: { accountAge } })}</span
>. {$t('license_trial_info_4')}
</p>
</div>
{/if}
<LicenseContent onActivate={onLicenseActivated} />
{/if}
</div>
</section>

View File

@ -0,0 +1,180 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { onMount } from 'svelte';
import { purchaseStore } from '$lib/stores/purchase.store';
import { preferences, user } from '$lib/stores/user.store';
import {
deleteServerLicense as deleteServerProductKey,
deleteUserLicense as deleteIndividualProductKey,
getAboutInfo,
getMyUser,
getServerLicense,
isHttpError,
type LicenseResponseDto,
} from '@immich/sdk';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiKey } from '@mdi/js';
import Button from '$lib/components/elements/buttons/button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { handleError } from '$lib/utils/handle-error';
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
import { t } from 'svelte-i18n';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
const { isPurchased } = purchaseStore;
let isServerProduct = false;
let serverPurchaseInfo: LicenseResponseDto | null = null;
const checkPurchaseInfo = async () => {
const serverInfo = await getAboutInfo();
isServerProduct = serverInfo.licensed;
const userInfo = await getMyUser();
if (userInfo.license) {
$user = { ...$user, license: userInfo.license };
}
if (isServerProduct && $user.isAdmin) {
serverPurchaseInfo = await getServerPurchaseInfo();
}
};
const getServerPurchaseInfo = async () => {
try {
return await getServerLicense();
} catch (error) {
if (isHttpError(error) && error.status === 404) {
return null;
}
throw error;
}
};
onMount(async () => {
if (!$isPurchased) {
return;
}
await checkPurchaseInfo();
});
const removeIndividualProductKey = async () => {
try {
const isConfirmed = await dialogController.show({
title: 'Remove Product Key',
prompt: 'Are you sure you want to remove the product key?',
confirmText: 'Remove',
cancelText: 'Cancel',
});
if (!isConfirmed) {
return;
}
await deleteIndividualProductKey();
purchaseStore.setPurchaseStatus(false);
} catch (error) {
handleError(error, 'Failed to remove product key');
}
};
const removeServerProductKey = async () => {
try {
const isConfirmed = await dialogController.show({
title: 'Remove License',
prompt: 'Are you sure you want to remove the Server product key?',
confirmText: 'Remove',
cancelText: 'Cancel',
});
if (!isConfirmed) {
return;
}
await deleteServerProductKey();
purchaseStore.setPurchaseStatus(false);
} catch (error) {
handleError(error, 'Failed to remove product key');
}
};
const onProductActivated = async () => {
purchaseStore.setPurchaseStatus(true);
await checkPurchaseInfo();
};
</script>
<section class="my-4">
<div in:fade={{ duration: 500 }}>
{#if $isPurchased}
<!-- BADGE TOGGLE -->
<div class="mb-4">
<SettingSwitch
title={$t('show_supporter_badge')}
subtitle={$t('show_supporter_badge_description')}
bind:checked={$preferences.purchase.showSupportBadge}
on:toggle={({ detail }) => setSupportBadgeVisibility(detail)}
/>
</div>
<!-- PRODUCT KEY INFO CARD -->
{#if isServerProduct}
<div
class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
>
<Icon path={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
<div>
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">
{$t('purchase_server_title')}
</p>
{#if $user.isAdmin && serverPurchaseInfo?.activatedAt}
<p class="dark:text-white text-sm mt-1 col-start-2">
{$t('purchase_activated_time', {
values: { date: new Date(serverPurchaseInfo.activatedAt).toLocaleDateString() },
})}
</p>
{:else}
<p class="dark:text-white">{$t('purchase_settings_server_activated')}</p>
{/if}
</div>
</div>
{#if $user.isAdmin}
<div class="text-right mt-4">
<Button size="sm" color="red" on:click={removeServerProductKey}>{$t('purchase_button_remove_key')}</Button>
</div>
{/if}
{:else}
<div
class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
>
<Icon path={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
<div>
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">
{$t('purchase_individual_title')}
</p>
{#if $user.license?.activatedAt}
<p class="dark:text-white text-sm mt-1 col-start-2">
{$t('purchase_activated_time', {
values: { date: new Date($user.license?.activatedAt).toLocaleDateString() },
})}
</p>
{/if}
</div>
</div>
<div class="text-right mt-4">
<Button size="sm" color="red" on:click={removeIndividualProductKey}>{$t('purchase_button_remove_key')}</Button
>
</div>
{/if}
{:else}
<PurchaseContent onActivate={onProductActivated} showTitle={false} />
{/if}
</div>
</section>

View File

@ -18,7 +18,7 @@
import NotificationsSettings from '$lib/components/user-settings-page/notifications-settings.svelte';
import { t } from 'svelte-i18n';
import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
import LicenseSettings from '$lib/components/user-settings-page/license-settings.svelte';
import UserPurchaseSettings from '$lib/components/user-settings-page/user-purchase-settings.svelte';
export let keys: ApiKeyResponseDto[] = [];
export let sessions: SessionResponseDto[] = [];
@ -53,14 +53,6 @@
<DownloadSettings />
</SettingAccordion>
<SettingAccordion
key="user-license-settings"
title={$t('user_license_settings')}
subtitle={$t('user_license_settings_description')}
>
<LicenseSettings />
</SettingAccordion>
<SettingAccordion key="memories" title={$t('memories')} subtitle={$t('memories_setting_description')}>
<MemoriesSettings />
</SettingAccordion>
@ -87,4 +79,12 @@
<SettingAccordion key="partner-sharing" title={$t('partner_sharing')} subtitle={$t('manage_sharing_with_partners')}>
<PartnerSettings user={$user} />
</SettingAccordion>
<SettingAccordion
key="user-purchase-settings"
title={$t('user_purchase_settings')}
subtitle={$t('user_purchase_settings_description')}
>
<UserPurchaseSettings />
</SettingAccordion>
</SettingAccordionState>

View File

@ -311,7 +311,7 @@ export const langs = [
{ name: 'Development (keys only)', code: 'dev', loader: () => Promise.resolve({}) },
];
export enum ImmichLicense {
export enum ImmichProduct {
Client = 'immich-client',
Server = 'immich-server',
}

View File

@ -405,7 +405,7 @@
"bulk_delete_duplicates_confirmation": "Are you sure you want to bulk delete {count, plural, one {# duplicate asset} other {# duplicate assets}}? This will keep the largest asset of each group and permanently delete all other duplicates. You cannot undo this action!",
"bulk_keep_duplicates_confirmation": "Are you sure you want to keep {count, plural, one {# duplicate asset} other {# duplicate assets}}? This will resolve all duplicate groups without deleting anything.",
"bulk_trash_duplicates_confirmation": "Are you sure you want to bulk trash {count, plural, one {# duplicate asset} other {# duplicate assets}}? This will keep the largest asset of each group and trash all other duplicates.",
"buy": "Purchase License",
"buy": "Purchase Immich",
"camera": "Camera",
"camera_brand": "Camera brand",
"camera_model": "Camera model",
@ -747,31 +747,6 @@
"level": "Level",
"library": "Library",
"library_options": "Library options",
"license_account_info": "Your account is licensed",
"license_activated_subtitle": "Thank you for supporting Immich and open-source software",
"license_activated_title": "Your license has been successfully activated",
"license_button_activate": "Activate",
"license_button_buy": "Buy",
"license_button_buy_license": "Buy License",
"license_button_select": "Select",
"license_failed_activation": "Failed to activate license. Please check your email for the correct license key!",
"license_individual_description_1": "1 license per user on any server",
"license_individual_title": "Individual License",
"license_info_licensed": "Licensed",
"license_info_unlicensed": "Unlicensed",
"license_input_suggestion": "Have a license? Enter the key below",
"license_license_subtitle": "Buy a license to support Immich",
"license_license_title": "LICENSE",
"license_lifetime_description": "Lifetime license",
"license_per_server": "Per server",
"license_per_user": "Per user",
"license_server_description_1": "1 license per server",
"license_server_description_2": "License for all users on the server",
"license_server_title": "Server License",
"license_trial_info_1": "You are running an Unlicensed version of Immich",
"license_trial_info_2": "You have been using Immich for approximately",
"license_trial_info_3": "{accountAge, plural, one {# day} other {# days}}",
"license_trial_info_4": "Please consider purchasing a license to support the continued development of the service",
"light": "Light",
"like_deleted": "Like deleted",
"link_options": "Link options",
@ -939,6 +914,34 @@
"profile_picture_set": "Profile picture set.",
"public_album": "Public album",
"public_share": "Public Share",
"purchase_account_info": "Supporter",
"purchase_activated_subtitle": "Thank you for supporting Immich and open-source software",
"purchase_activated_time": "Activated on {date}",
"purchase_activated_title": "Your key has been successfully activated",
"purchase_button_activate": "Activate",
"purchase_button_buy": "Buy",
"purchase_button_buy_immich": "Buy Immich",
"purchase_button_never_show_again": "Never show again",
"purchase_button_reminder": "Remind me in 30 days",
"purchase_button_remove_key": "Remove key",
"purchase_button_select": "Select",
"purchase_failed_activation": "Failed to activate! Please check your email for the the correct product key!",
"purchase_individual_description_1": "For an individual",
"purchase_individual_description_2": "Supporter status",
"purchase_individual_title": "Individual",
"purchase_input_suggestion": "Have a product key? Enter the key below",
"purchase_license_subtitle": "Buy Immich to support the continued development of the service",
"purchase_lifetime_description": "Lifetime purchase",
"purchase_option_title": "PURCHASE OPTIONS",
"purchase_panel_info_1": "Building Immich takes a lot of time and effort, and we have full-time engineers working on it to make it as good as we possibly can. Our mission is for open-source software and ethical business practices to become a sustainable income source for developers and to create a privacy-respecting ecosystem with real alternatives to exploitative cloud services.",
"purchase_panel_info_2": "As were committed not to add paywalls, this purchase will not grant you any additional features in Immich. We rely on users like you to support Immichs ongoing development.",
"purchase_panel_title": "Support the project",
"purchase_per_server": "Per server",
"purchase_per_user": "Per user",
"purchase_server_description_1": "For the whole server",
"purchase_server_description_2": "Supporter status",
"purchase_server_title": "Server",
"purchase_settings_server_activated": "The server product key is managed by the admin",
"reaction_options": "Reaction options",
"read_changelog": "Read Changelog",
"reassign": "Reassign",
@ -1078,6 +1081,8 @@
"show_person_options": "Show person options",
"show_progress_bar": "Show Progress Bar",
"show_search_options": "Show search options",
"show_supporter_badge": "Supporter badge",
"show_supporter_badge_description": "Show a supporter badge",
"shuffle": "Shuffle",
"sign_out": "Sign Out",
"sign_up": "Sign up",
@ -1168,9 +1173,9 @@
"use_custom_date_range": "Use custom date range instead",
"user": "User",
"user_id": "User ID",
"user_license_settings": "License",
"user_license_settings_description": "Manage your license",
"user_liked": "{user} liked {type, select, photo {this photo} video {this video} asset {this asset} other {it}}",
"user_purchase_settings": "Purchase",
"user_purchase_settings_description": "Manage your purchase",
"user_role_set": "Set {user} as {role}",
"user_usage_detail": "User usage detail",
"username": "Username",

View File

@ -1,18 +0,0 @@
import { writable } from 'svelte/store';
function createLicenseStore() {
const isLicenseActivated = writable(false);
function setLicenseStatus(status: boolean) {
isLicenseActivated.set(status);
}
return {
isLicenseActivated: {
subscribe: isLicenseActivated.subscribe,
},
setLicenseStatus,
};
}
export const licenseStore = createLicenseStore();

View File

@ -0,0 +1,18 @@
import { writable } from 'svelte/store';
function createPurchaseStore() {
const isPurcharsed = writable(false);
function setPurchaseStatus(status: boolean) {
isPurcharsed.set(status);
}
return {
isPurchased: {
subscribe: isPurcharsed.subscribe,
},
setPurchaseStatus,
};
}
export const purchaseStore = createPurchaseStore();

View File

@ -1,4 +1,4 @@
import { licenseStore } from '$lib/stores/license.store';
import { purchaseStore } from '$lib/stores/purchase.store';
import { type UserAdminResponseDto, type UserPreferencesResponseDto } from '@immich/sdk';
import { writable } from 'svelte/store';
@ -12,5 +12,5 @@ export const preferences = writable<UserPreferencesResponseDto>();
export const resetSavedUser = () => {
user.set(undefined as unknown as UserAdminResponseDto);
preferences.set(undefined as unknown as UserPreferencesResponseDto);
licenseStore.setLicenseStatus(false);
purchaseStore.setPurchaseStatus(false);
};

View File

@ -1,5 +1,5 @@
import { browser } from '$app/environment';
import { licenseStore } from '$lib/stores/license.store';
import { purchaseStore } from '$lib/stores/purchase.store';
import { serverInfo } from '$lib/stores/server-info.store';
import { preferences as preferences$, user as user$ } from '$lib/stores/user.store';
import { getAboutInfo, getMyPreferences, getMyUser, getStorage } from '@immich/sdk';
@ -26,7 +26,7 @@ export const loadUser = async () => {
// Check for license status
if (serverInfo.licensed || user.license?.activatedAt) {
licenseStore.setLicenseStatus(true);
purchaseStore.setPurchaseStatus(true);
}
}
return user;

View File

@ -1,11 +1,11 @@
import { PUBLIC_IMMICH_BUY_HOST, PUBLIC_IMMICH_PAY_HOST } from '$env/static/public';
import type { ImmichLicense } from '$lib/constants';
import type { ImmichProduct } from '$lib/constants';
import { serverConfig } from '$lib/stores/server-config.store';
import { setServerLicense, setUserLicense, type LicenseResponseDto } from '@immich/sdk';
import { get } from 'svelte/store';
import { loadUser } from './auth';
export const activateLicense = async (licenseKey: string, activationKey: string): Promise<LicenseResponseDto> => {
export const activateProduct = async (licenseKey: string, activationKey: string): Promise<LicenseResponseDto> => {
// Send server key to user activation if user is not admin
const user = await loadUser();
const isServerActivation = user?.isAdmin && licenseKey.search('IMSV') !== -1;
@ -21,7 +21,7 @@ export const getActivationKey = async (licenseKey: string): Promise<string> => {
return response.text();
};
export const getLicenseLink = (license: ImmichLicense) => {
export const getLicenseLink = (license: ImmichProduct) => {
const url = new URL('/', PUBLIC_IMMICH_BUY_HOST);
url.searchParams.append('productId', license);
url.searchParams.append('instanceUrl', get(serverConfig).externalDomain || window.origin);

View File

@ -0,0 +1,32 @@
import { preferences } from '$lib/stores/user.store';
import { updateMyPreferences } from '@immich/sdk';
import { DateTime } from 'luxon';
import { get } from 'svelte/store';
export const getButtonVisibility = (): boolean => {
const myPreferences = get(preferences);
if (!myPreferences) {
return true;
}
const { purchase } = myPreferences;
const now = DateTime.now();
const hideUntilDate = DateTime.fromISO(purchase.hideBuyButtonUntil);
const dayLeft = Number(now.diff(hideUntilDate, 'days').days.toFixed(0));
return dayLeft > 0;
};
export const setSupportBadgeVisibility = async (value: boolean) => {
const response = await updateMyPreferences({
userPreferencesUpdateDto: {
purchase: {
showSupportBadge: value,
},
},
});
preferences.set(response);
};

View File

@ -1,41 +1,42 @@
<script lang="ts">
import { goto } from '$app/navigation';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import LicenseActivationSuccess from '$lib/components/shared-components/license/license-activation-success.svelte';
import LicenseContent from '$lib/components/shared-components/license/license-content.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 { AppRoute } from '$lib/constants';
import { user } from '$lib/stores/user.store';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiAlertCircleOutline, mdiLicense } from '@mdi/js';
import { licenseStore } from '$lib/stores/license.store';
import { mdiAlertCircleOutline } from '@mdi/js';
import { purchaseStore } from '$lib/stores/purchase.store';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
export let data: PageData;
let showLicenseActivated = false;
const { isLicenseActivated } = licenseStore;
const { isPurchased } = purchaseStore;
</script>
<UserPageLayout title={$t('buy')}>
<section class="mx-4 flex place-content-center">
<div class={`w-full ${$user.isAdmin ? 'max-w-3xl' : 'max-w-xl'}`}>
<div class="w-full max-w-3xl">
{#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('license_failed_activation')}</p>
<p>{$t('purchase_failed_activation')}</p>
</div>
{/if}
{#if $isLicenseActivated}
{#if $isPurchased}
<div
class="bg-immich-primary/10 text-immich-primary px-4 py-3 rounded-md flex place-items-center place-content-center gap-2 mb-5 dark:text-black dark:bg-immich-dark-primary"
role="alert"
class="flex gap-1 mt-2 place-items-center place-content-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border rounded-lg dark:text-white supporter-effect"
>
<Icon path={mdiLicense} size="24" />
<p>{$t('license_account_info')}</p>
<div class="h-8 w-8">
<ImmichLogo noText />
</div>
<p>{$t('purchase_account_info')}</p>
</div>
{/if}

View File

@ -1,7 +1,7 @@
import { licenseStore } from '$lib/stores/license.store';
import { purchaseStore } from '$lib/stores/purchase.store';
import { authenticate } from '$lib/utils/auth';
import { getFormatter } from '$lib/utils/i18n';
import { activateLicense, getActivationKey } from '$lib/utils/license-utils';
import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
import type { PageLoad } from './$types';
export const load = (async ({ url }) => {
@ -18,10 +18,10 @@ export const load = (async ({ url }) => {
}
if (licenseKey && activationKey) {
const response = await activateLicense(licenseKey, activationKey);
const response = await activateProduct(licenseKey, activationKey);
if (response.activatedAt !== '') {
isActivated = true;
licenseStore.setLicenseStatus(true);
purchaseStore.setPurchaseStatus(true);
}
}
} catch (error) {