386 lines
13 KiB
Svelte
386 lines
13 KiB
Svelte
<script>
|
|
import {
|
|
ArrowLeft,
|
|
ArrowRight,
|
|
CheckCircle2,
|
|
CircleX,
|
|
LockKeyhole,
|
|
RefreshCw,
|
|
TriangleAlert,
|
|
} from "$components/ui/icons.js";
|
|
import { Tooltip } from "$components/ui/primitives.js";
|
|
|
|
import Button from "$components/ui/button.svelte";
|
|
import Dialog from "$components/ui/dialog.svelte";
|
|
import Input from "$components/ui/input.svelte";
|
|
import {
|
|
EmptyCard,
|
|
PaymentMethodGrid,
|
|
StatusMessage,
|
|
} from "$components/patterns/webapp/index.js";
|
|
import {
|
|
planKey as planKeyFn,
|
|
planDisplayTitle as planDisplayTitleFn,
|
|
planSubtitle as planSubtitleFn,
|
|
planUnitHint as planUnitHintFn,
|
|
tariffLimitLabel as tariffLimitLabelFn,
|
|
priceLabel as priceLabelFn,
|
|
} from "../lib/webapp/tariffs.js";
|
|
|
|
export let createPayment = () => {};
|
|
export let deviceConfirmOpen = false;
|
|
export let deviceDisconnectBusy = false;
|
|
export let deviceToDisconnect = null;
|
|
export let disconnectDevice = () => {};
|
|
export let linkEmailBusy = false;
|
|
export let linkEmailCode = "";
|
|
export let linkEmailFieldError = "";
|
|
export let linkEmailIsError = false;
|
|
export let linkEmailOpen = false;
|
|
export let linkEmailPending = "";
|
|
export let linkEmailResendCooldown = 0;
|
|
export let linkEmailStatus = "";
|
|
export let linkEmailValue = "";
|
|
export let hasMultipleTariffs = false;
|
|
export let methods = [];
|
|
export let payBusy = false;
|
|
export let paymentModalOpen = false;
|
|
export let paymentStep = "tariff";
|
|
export let plans = [];
|
|
export let selectedMethod = "";
|
|
export let selectedPlan = null;
|
|
export let selectedTariff = null;
|
|
export let selectedTariffKey = "";
|
|
export let selectedTariffPlans = [];
|
|
export let singleTariffMode = false;
|
|
export let subscription = {};
|
|
export let tariffCatalog = [];
|
|
export let tariffMode = false;
|
|
export let trafficMode = false;
|
|
|
|
function priceLabel(plan) {
|
|
return priceLabelFn(plan, selectedMethod);
|
|
}
|
|
function planKey(plan) {
|
|
return planKeyFn(plan);
|
|
}
|
|
function planDisplayTitle(plan) {
|
|
return planDisplayTitleFn(plan, { trafficMode, t });
|
|
}
|
|
function planSubtitle(plan) {
|
|
return planSubtitleFn(plan, { t, termUnitLabel });
|
|
}
|
|
function planUnitHint(plan) {
|
|
return planUnitHintFn(plan, { trafficMode, selectedMethod, t });
|
|
}
|
|
function tariffLimitLabel(tariff) {
|
|
return tariffLimitLabelFn(tariff, { t });
|
|
}
|
|
|
|
function paymentTitle() {
|
|
if (singleTariffMode) {
|
|
return selectedTariff?.billing_model === "traffic"
|
|
? t("wa_traffic_packages_title")
|
|
: t("wa_subscription_title");
|
|
}
|
|
if (tariffMode) return t("wa_tariffs_title");
|
|
return trafficMode ? t("wa_traffic_packages_title") : t("wa_subscription_title");
|
|
}
|
|
|
|
function paymentDescription() {
|
|
if (tariffMode) {
|
|
if (singleTariffMode) {
|
|
return selectedTariff?.billing_model === "traffic"
|
|
? t("wa_traffic_packages_choose")
|
|
: t("wa_subscription_choose_period");
|
|
}
|
|
return paymentStep === "checkout" && selectedTariff
|
|
? t("wa_tariff_choose_period_payment", { tariff: selectedTariff.title })
|
|
: t("wa_tariffs_choose");
|
|
}
|
|
return trafficMode ? t("wa_traffic_packages_choose") : t("wa_subscription_choose_period");
|
|
}
|
|
|
|
export let closeDeviceDisconnectDialog = () => {};
|
|
export let closeLinkEmailDialog = () => {};
|
|
export let closePaymentModal = () => {};
|
|
export let backToTariffList = () => {};
|
|
export let continueWithSelectedTariff = () => {};
|
|
export let requestLinkEmailCode = () => {};
|
|
export let selectTariff = () => {};
|
|
export let t = (key) => key;
|
|
export let termUnitLabel = () => "";
|
|
export let verifyLinkEmailCode = () => {};
|
|
</script>
|
|
|
|
<Dialog
|
|
open={paymentModalOpen}
|
|
title={paymentTitle()}
|
|
description={paymentDescription()}
|
|
closeLabel={t("wa_close")}
|
|
onclose={closePaymentModal}
|
|
class="payment-dialog-card"
|
|
>
|
|
<div class="payment-dialog-body">
|
|
{#if tariffMode && !singleTariffMode && paymentStep === "tariff"}
|
|
{#if tariffCatalog.length}
|
|
<div class="option-list tariff-list">
|
|
{#each tariffCatalog as tariff}
|
|
<button
|
|
class:active={selectedTariffKey === tariff.key}
|
|
class="option-row tariff-row"
|
|
type="button"
|
|
onclick={() => selectTariff(tariff)}
|
|
>
|
|
<span class="option-row-main">
|
|
<strong>{tariff.title}</strong>
|
|
<small>{tariff.description || t("wa_tariff_no_description")}</small>
|
|
</span>
|
|
<span class="option-row-meta">
|
|
<em>{tariffLimitLabel(tariff)}</em>
|
|
{#if selectedTariffKey === tariff.key}
|
|
<CheckCircle2 size={18} />
|
|
{:else}
|
|
<ArrowRight size={17} />
|
|
{/if}
|
|
</span>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
<Button
|
|
class="wide bottom-action payment-submit-button"
|
|
onclick={continueWithSelectedTariff}
|
|
disabled={!selectedTariffKey}
|
|
>
|
|
{t("wa_next")}
|
|
<ArrowRight size={17} />
|
|
</Button>
|
|
{:else}
|
|
<EmptyCard>{t("wa_no_tariff_change_options")}</EmptyCard>
|
|
{/if}
|
|
{:else if tariffMode}
|
|
{#if !singleTariffMode && !(subscription?.active && subscription?.tariff_key && tariffCatalog.some((t) => t.key === subscription.tariff_key))}
|
|
<button class="back-inline" type="button" onclick={backToTariffList}>
|
|
<ArrowLeft size={16} />
|
|
{t("wa_back_to_tariffs")}
|
|
</button>
|
|
{/if}
|
|
{#if hasMultipleTariffs && selectedTariff}
|
|
<p class="tariff-step-caption">
|
|
{t("wa_selected_tariff", { tariff: selectedTariff.title })}
|
|
</p>
|
|
{/if}
|
|
{#if selectedTariffPlans.length}
|
|
<div class="period-grid period-grid-two-columns">
|
|
{#each selectedTariffPlans as plan}
|
|
<button
|
|
class:active={planKey(selectedPlan) === planKey(plan)}
|
|
class="period-card"
|
|
type="button"
|
|
onclick={() => (selectedPlan = plan)}
|
|
>
|
|
<strong>{planSubtitle(plan) || planDisplayTitle(plan)}</strong>
|
|
<span>{priceLabel(plan)}</span>
|
|
{#if planUnitHint(plan)}
|
|
<small>{planUnitHint(plan)}</small>
|
|
{/if}
|
|
{#if planKey(selectedPlan) === planKey(plan)}
|
|
<CheckCircle2 size={18} />
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
<div class="payment-divider" aria-hidden="true"></div>
|
|
{#if methods.length}
|
|
<PaymentMethodGrid
|
|
{methods}
|
|
{selectedMethod}
|
|
{t}
|
|
onSelect={(id) => (selectedMethod = id)}
|
|
/>
|
|
{:else}
|
|
<EmptyCard>{t("wa_payment_methods_not_configured")}</EmptyCard>
|
|
{/if}
|
|
<Button
|
|
class="wide bottom-action payment-submit-button"
|
|
onclick={createPayment}
|
|
disabled={!selectedPlan || !methods.length || payBusy}
|
|
>
|
|
{t("wa_pay")}
|
|
{selectedPlan ? priceLabel(selectedPlan) : ""}
|
|
<LockKeyhole size={17} />
|
|
</Button>
|
|
{:else}
|
|
<EmptyCard>{t("wa_no_tariff_change_options")}</EmptyCard>
|
|
{/if}
|
|
{:else}
|
|
<!--
|
|
Legacy / non-tariff mode (no JSON tariffs catalog OR traffic-only).
|
|
Previously this block was also reached *in addition* to the tariff
|
|
branch above, so users on legacy mode saw the period grid, payment
|
|
method grid and pay button duplicated.
|
|
-->
|
|
<div class="period-grid period-grid-two-columns">
|
|
{#each plans as plan}
|
|
<button
|
|
class:active={planKey(selectedPlan) === planKey(plan)}
|
|
class="period-card"
|
|
type="button"
|
|
onclick={() => (selectedPlan = plan)}
|
|
>
|
|
<strong>{planDisplayTitle(plan)}</strong>
|
|
{#if planSubtitle(plan)}
|
|
<em>{planSubtitle(plan)}</em>
|
|
{/if}
|
|
<span>{priceLabel(plan)}</span>
|
|
{#if planUnitHint(plan)}
|
|
<small>{planUnitHint(plan)}</small>
|
|
{/if}
|
|
{#if planKey(selectedPlan) === planKey(plan)}
|
|
<CheckCircle2 size={18} />
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
<div class="payment-divider" aria-hidden="true"></div>
|
|
{#if methods.length}
|
|
<PaymentMethodGrid
|
|
{methods}
|
|
{selectedMethod}
|
|
{t}
|
|
onSelect={(id) => (selectedMethod = id)}
|
|
/>
|
|
{:else}
|
|
<EmptyCard>{t("wa_payment_methods_not_configured")}</EmptyCard>
|
|
{/if}
|
|
<Button
|
|
class="wide bottom-action payment-submit-button"
|
|
onclick={createPayment}
|
|
disabled={!selectedPlan || !methods.length || payBusy}
|
|
>
|
|
{t("wa_pay")}
|
|
{selectedPlan ? priceLabel(selectedPlan) : ""}
|
|
<LockKeyhole size={17} />
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={deviceConfirmOpen}
|
|
title={t("wa_devices_disconnect_title")}
|
|
description={t("wa_devices_disconnect_desc", {
|
|
device:
|
|
deviceToDisconnect?.display_name ||
|
|
t("wa_device_fallback_name", { index: deviceToDisconnect?.index || "" }),
|
|
})}
|
|
closeLabel={t("wa_close")}
|
|
onclose={closeDeviceDisconnectDialog}
|
|
class="payment-dialog-card"
|
|
>
|
|
<div class="payment-dialog-body">
|
|
<Button
|
|
variant="outline"
|
|
class="wide device-danger-button"
|
|
onclick={disconnectDevice}
|
|
disabled={deviceDisconnectBusy}
|
|
>
|
|
<CircleX size={17} />
|
|
{t("wa_devices_disconnect_confirm")}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
class="wide"
|
|
onclick={closeDeviceDisconnectDialog}
|
|
disabled={deviceDisconnectBusy}
|
|
>
|
|
{t("wa_cancel")}
|
|
</Button>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={linkEmailOpen}
|
|
title={t("wa_link_email_modal_title")}
|
|
description={linkEmailPending
|
|
? t("wa_email_sent_to", { email: linkEmailPending })
|
|
: t("wa_link_email_modal_desc")}
|
|
closeLabel={t("wa_close")}
|
|
onclose={closeLinkEmailDialog}
|
|
class={`payment-dialog-card${linkEmailPending ? " link-email-dialog-card" : ""}`}
|
|
>
|
|
<div class="payment-dialog-body">
|
|
{#if !linkEmailPending}
|
|
<div class="field-error-wrap">
|
|
<Tooltip.Root open={Boolean(linkEmailFieldError)}>
|
|
<Input
|
|
bind:value={linkEmailValue}
|
|
type="email"
|
|
placeholder={t("wa_email_placeholder")}
|
|
autocomplete="email"
|
|
class={linkEmailFieldError ? "input-error" : ""}
|
|
on:input={() => (linkEmailFieldError = "")}
|
|
/>
|
|
{#if linkEmailFieldError}
|
|
<Tooltip.Trigger class="field-error-trigger" aria-label={linkEmailFieldError}>
|
|
<span class="field-error-icon" aria-hidden="true"><TriangleAlert size={18} /></span>
|
|
</Tooltip.Trigger>
|
|
{/if}
|
|
{#if linkEmailFieldError}
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content class="field-error-tooltip">{linkEmailFieldError}</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
{/if}
|
|
</Tooltip.Root>
|
|
</div>
|
|
<Button
|
|
class="wide bottom-action payment-submit-button"
|
|
onclick={requestLinkEmailCode}
|
|
disabled={linkEmailBusy}
|
|
>
|
|
{t("wa_send_code_email")}
|
|
</Button>
|
|
{:else}
|
|
<div class="link-email-code-layout">
|
|
<div class="otp-wrap link-email-code-center">
|
|
<label class="otp-input-wrap">
|
|
<input
|
|
bind:value={linkEmailCode}
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code"
|
|
maxlength="6"
|
|
aria-label={t("wa_email_code_aria")}
|
|
/>
|
|
<span class="otp-slots" aria-hidden="true">
|
|
{#each Array.from({ length: 6 }) as _, index}
|
|
<span class:filled={linkEmailCode[index]}>{linkEmailCode[index] || ""}</span>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<Button
|
|
class="wide bottom-action payment-submit-button"
|
|
onclick={verifyLinkEmailCode}
|
|
disabled={linkEmailBusy}
|
|
>
|
|
{t("wa_confirm")}
|
|
</Button>
|
|
</div>
|
|
<button
|
|
class="link-button link-email-resend"
|
|
type="button"
|
|
onclick={requestLinkEmailCode}
|
|
disabled={linkEmailBusy || linkEmailResendCooldown > 0}
|
|
>
|
|
<RefreshCw size={15} />
|
|
{linkEmailResendCooldown > 0
|
|
? t("wa_auth_resend_wait", { seconds: linkEmailResendCooldown })
|
|
: t("wa_resend_code")}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
{#if linkEmailStatus}
|
|
<StatusMessage error={linkEmailIsError}>{linkEmailStatus}</StatusMessage>
|
|
{/if}
|
|
</div>
|
|
</Dialog>
|