mirror of
https://github.com/whekin/household-bot.git
synced 2026-04-01 05:24:03 +00:00
refactor(miniapp): extract ledger screen
This commit is contained in:
600
apps/miniapp/src/screens/ledger-screen.tsx
Normal file
600
apps/miniapp/src/screens/ledger-screen.tsx
Normal file
@@ -0,0 +1,600 @@
|
||||
import { For, Show } from 'solid-js'
|
||||
|
||||
import { Button, Field, IconButton, Modal } from '../components/ui'
|
||||
import type { MiniAppAdminSettingsPayload, MiniAppDashboard } from '../miniapp-api'
|
||||
|
||||
type PurchaseDraft = {
|
||||
description: string
|
||||
amountMajor: string
|
||||
currency: 'USD' | 'GEL'
|
||||
splitMode: 'equal' | 'custom_amounts'
|
||||
participants: {
|
||||
memberId: string
|
||||
shareAmountMajor: string
|
||||
}[]
|
||||
}
|
||||
|
||||
type PaymentDraft = {
|
||||
memberId: string
|
||||
kind: 'rent' | 'utilities'
|
||||
amountMajor: string
|
||||
currency: 'USD' | 'GEL'
|
||||
}
|
||||
|
||||
type Props = {
|
||||
copy: Record<string, string | undefined>
|
||||
dashboard: MiniAppDashboard | null
|
||||
readyIsAdmin: boolean
|
||||
adminMembers: readonly MiniAppAdminSettingsPayload['members'][number][]
|
||||
purchaseEntries: readonly MiniAppDashboard['ledger'][number][]
|
||||
utilityEntries: readonly MiniAppDashboard['ledger'][number][]
|
||||
paymentEntries: readonly MiniAppDashboard['ledger'][number][]
|
||||
editingPurchaseEntry: MiniAppDashboard['ledger'][number] | null
|
||||
editingPaymentEntry: MiniAppDashboard['ledger'][number] | null
|
||||
purchaseDraftMap: Record<string, PurchaseDraft>
|
||||
paymentDraftMap: Record<string, PaymentDraft>
|
||||
paymentForm: PaymentDraft
|
||||
addingPaymentOpen: boolean
|
||||
savingPurchaseId: string | null
|
||||
deletingPurchaseId: string | null
|
||||
savingPaymentId: string | null
|
||||
deletingPaymentId: string | null
|
||||
addingPayment: boolean
|
||||
ledgerTitle: (entry: MiniAppDashboard['ledger'][number]) => string
|
||||
ledgerPrimaryAmount: (entry: MiniAppDashboard['ledger'][number]) => string
|
||||
ledgerSecondaryAmount: (entry: MiniAppDashboard['ledger'][number]) => string | null
|
||||
purchaseParticipantSummary: (entry: MiniAppDashboard['ledger'][number]) => string
|
||||
purchaseDraftForEntry: (entry: MiniAppDashboard['ledger'][number]) => PurchaseDraft
|
||||
paymentDraftForEntry: (entry: MiniAppDashboard['ledger'][number]) => PaymentDraft
|
||||
purchaseSplitPreview: (purchaseId: string) => { memberId: string; amountMajor: string }[]
|
||||
paymentMemberName: (entry: MiniAppDashboard['ledger'][number]) => string
|
||||
onOpenPurchaseEditor: (purchaseId: string) => void
|
||||
onClosePurchaseEditor: () => void
|
||||
onDeletePurchase: (purchaseId: string) => Promise<void>
|
||||
onSavePurchase: (purchaseId: string) => Promise<void>
|
||||
onPurchaseDescriptionChange: (
|
||||
purchaseId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: string
|
||||
) => void
|
||||
onPurchaseAmountChange: (
|
||||
purchaseId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: string
|
||||
) => void
|
||||
onPurchaseCurrencyChange: (
|
||||
purchaseId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: 'USD' | 'GEL'
|
||||
) => void
|
||||
onPurchaseSplitModeChange: (
|
||||
purchaseId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: 'equal' | 'custom_amounts'
|
||||
) => void
|
||||
onTogglePurchaseParticipant: (
|
||||
purchaseId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
memberId: string,
|
||||
included: boolean
|
||||
) => void
|
||||
onPurchaseParticipantShareChange: (
|
||||
purchaseId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
memberId: string,
|
||||
value: string
|
||||
) => void
|
||||
onOpenAddPayment: () => void
|
||||
onCloseAddPayment: () => void
|
||||
onAddPayment: () => Promise<void>
|
||||
onPaymentFormMemberChange: (value: string) => void
|
||||
onPaymentFormKindChange: (value: 'rent' | 'utilities') => void
|
||||
onPaymentFormAmountChange: (value: string) => void
|
||||
onPaymentFormCurrencyChange: (value: 'USD' | 'GEL') => void
|
||||
onOpenPaymentEditor: (paymentId: string) => void
|
||||
onClosePaymentEditor: () => void
|
||||
onDeletePayment: (paymentId: string) => Promise<void>
|
||||
onSavePayment: (paymentId: string) => Promise<void>
|
||||
onPaymentDraftMemberChange: (
|
||||
paymentId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: string
|
||||
) => void
|
||||
onPaymentDraftKindChange: (
|
||||
paymentId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: 'rent' | 'utilities'
|
||||
) => void
|
||||
onPaymentDraftAmountChange: (
|
||||
paymentId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: string
|
||||
) => void
|
||||
onPaymentDraftCurrencyChange: (
|
||||
paymentId: string,
|
||||
entry: MiniAppDashboard['ledger'][number],
|
||||
value: 'USD' | 'GEL'
|
||||
) => void
|
||||
}
|
||||
|
||||
export function LedgerScreen(props: Props) {
|
||||
if (!props.dashboard) {
|
||||
return (
|
||||
<div class="ledger-list">
|
||||
<p>{props.copy.emptyDashboard ?? ''}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="ledger-list">
|
||||
<article class="balance-item">
|
||||
<header>
|
||||
<strong>
|
||||
{props.readyIsAdmin ? props.copy.purchaseReviewTitle : props.copy.purchasesTitle}
|
||||
</strong>
|
||||
</header>
|
||||
<Show when={props.readyIsAdmin}>
|
||||
<p>{props.copy.purchaseReviewBody ?? ''}</p>
|
||||
</Show>
|
||||
{props.purchaseEntries.length === 0 ? (
|
||||
<p>{props.copy.purchasesEmpty ?? ''}</p>
|
||||
) : (
|
||||
<div class="ledger-list">
|
||||
<For each={props.purchaseEntries}>
|
||||
{(entry) => (
|
||||
<article class="ledger-compact-card">
|
||||
<div class="ledger-compact-card__main">
|
||||
<header>
|
||||
<strong>{entry.title}</strong>
|
||||
<span>{entry.occurredAt?.slice(0, 10) ?? '—'}</span>
|
||||
</header>
|
||||
<p>{entry.actorDisplayName ?? props.copy.ledgerActorFallback ?? ''}</p>
|
||||
<div class="ledger-compact-card__meta">
|
||||
<span class="mini-chip">{props.ledgerPrimaryAmount(entry)}</span>
|
||||
<Show when={props.ledgerSecondaryAmount(entry)}>
|
||||
{(secondary) => (
|
||||
<span class="mini-chip mini-chip--muted">{secondary()}</span>
|
||||
)}
|
||||
</Show>
|
||||
<span class="mini-chip mini-chip--muted">
|
||||
{props.purchaseParticipantSummary(entry)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={props.readyIsAdmin}>
|
||||
<div class="ledger-compact-card__actions">
|
||||
<IconButton
|
||||
label={props.copy.editEntryAction ?? ''}
|
||||
onClick={() => props.onOpenPurchaseEditor(entry.id)}
|
||||
>
|
||||
...
|
||||
</IconButton>
|
||||
</div>
|
||||
</Show>
|
||||
</article>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
<Modal
|
||||
open={Boolean(props.editingPurchaseEntry)}
|
||||
title={props.copy.purchaseReviewTitle ?? ''}
|
||||
description={props.copy.purchaseEditorBody ?? ''}
|
||||
closeLabel={props.copy.closeEditorAction ?? ''}
|
||||
onClose={props.onClosePurchaseEditor}
|
||||
footer={(() => {
|
||||
const entry = props.editingPurchaseEntry
|
||||
|
||||
if (!entry) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="modal-action-row">
|
||||
<Button variant="danger" onClick={() => void props.onDeletePurchase(entry.id)}>
|
||||
{props.deletingPurchaseId === entry.id
|
||||
? props.copy.deletingPurchase
|
||||
: props.copy.purchaseDeleteAction}
|
||||
</Button>
|
||||
<div class="modal-action-row__primary">
|
||||
<Button variant="ghost" onClick={props.onClosePurchaseEditor}>
|
||||
{props.copy.closeEditorAction ?? ''}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={props.savingPurchaseId === entry.id}
|
||||
onClick={() => void props.onSavePurchase(entry.id)}
|
||||
>
|
||||
{props.savingPurchaseId === entry.id
|
||||
? props.copy.savingPurchase
|
||||
: props.copy.purchaseSaveAction}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
>
|
||||
{(() => {
|
||||
const entry = props.editingPurchaseEntry
|
||||
|
||||
if (!entry) {
|
||||
return null
|
||||
}
|
||||
|
||||
const draft = props.purchaseDraftMap[entry.id] ?? props.purchaseDraftForEntry(entry)
|
||||
const splitPreview = props.purchaseSplitPreview(entry.id)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="editor-grid">
|
||||
<Field label={props.copy.purchaseReviewTitle ?? ''} wide>
|
||||
<input
|
||||
value={draft.description}
|
||||
onInput={(event) =>
|
||||
props.onPurchaseDescriptionChange(entry.id, entry, event.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={props.copy.paymentAmount ?? ''}>
|
||||
<input
|
||||
value={draft.amountMajor}
|
||||
onInput={(event) =>
|
||||
props.onPurchaseAmountChange(entry.id, entry, event.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={props.copy.settlementCurrency ?? ''}>
|
||||
<select
|
||||
value={draft.currency}
|
||||
onChange={(event) =>
|
||||
props.onPurchaseCurrencyChange(
|
||||
entry.id,
|
||||
entry,
|
||||
event.currentTarget.value as 'USD' | 'GEL'
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="GEL">GEL</option>
|
||||
<option value="USD">USD</option>
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<section class="editor-panel">
|
||||
<header class="editor-panel__header">
|
||||
<strong>{props.copy.purchaseSplitTitle ?? ''}</strong>
|
||||
<span>
|
||||
{draft.splitMode === 'custom_amounts'
|
||||
? props.copy.purchaseSplitCustom
|
||||
: props.copy.purchaseSplitEqual}
|
||||
</span>
|
||||
</header>
|
||||
<div class="editor-grid">
|
||||
<Field label={props.copy.purchaseSplitModeLabel ?? ''} wide>
|
||||
<select
|
||||
value={draft.splitMode}
|
||||
onChange={(event) =>
|
||||
props.onPurchaseSplitModeChange(
|
||||
entry.id,
|
||||
entry,
|
||||
event.currentTarget.value as 'equal' | 'custom_amounts'
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="equal">{props.copy.purchaseSplitEqual ?? ''}</option>
|
||||
<option value="custom_amounts">{props.copy.purchaseSplitCustom ?? ''}</option>
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
<div class="participant-list">
|
||||
<For each={props.adminMembers}>
|
||||
{(member) => {
|
||||
const included = draft.participants.some(
|
||||
(participant) => participant.memberId === member.id
|
||||
)
|
||||
const previewAmount =
|
||||
splitPreview.find((participant) => participant.memberId === member.id)
|
||||
?.amountMajor ?? '0.00'
|
||||
|
||||
return (
|
||||
<article class="participant-card">
|
||||
<header>
|
||||
<strong>{member.displayName}</strong>
|
||||
<span>
|
||||
{previewAmount} {draft.currency}
|
||||
</span>
|
||||
</header>
|
||||
<div class="participant-card__controls">
|
||||
<Button
|
||||
variant={included ? 'primary' : 'secondary'}
|
||||
onClick={() =>
|
||||
props.onTogglePurchaseParticipant(
|
||||
entry.id,
|
||||
entry,
|
||||
member.id,
|
||||
!included
|
||||
)
|
||||
}
|
||||
>
|
||||
{included
|
||||
? props.copy.participantIncluded
|
||||
: props.copy.participantExcluded}
|
||||
</Button>
|
||||
<Show when={included && draft.splitMode === 'custom_amounts'}>
|
||||
<Field
|
||||
label={props.copy.purchaseCustomShareLabel ?? ''}
|
||||
class="participant-card__field"
|
||||
>
|
||||
<input
|
||||
value={
|
||||
draft.participants.find(
|
||||
(participant) => participant.memberId === member.id
|
||||
)?.shareAmountMajor ?? ''
|
||||
}
|
||||
onInput={(event) =>
|
||||
props.onPurchaseParticipantShareChange(
|
||||
entry.id,
|
||||
entry,
|
||||
member.id,
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</Show>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</Modal>
|
||||
<article class="balance-item">
|
||||
<header>
|
||||
<strong>{props.copy.utilityLedgerTitle ?? ''}</strong>
|
||||
</header>
|
||||
{props.utilityEntries.length === 0 ? (
|
||||
<p>{props.copy.utilityLedgerEmpty ?? ''}</p>
|
||||
) : (
|
||||
<div class="ledger-list">
|
||||
<For each={props.utilityEntries}>
|
||||
{(entry) => (
|
||||
<article class="ledger-item">
|
||||
<header>
|
||||
<strong>{props.ledgerTitle(entry)}</strong>
|
||||
<span>{props.ledgerPrimaryAmount(entry)}</span>
|
||||
</header>
|
||||
<Show when={props.ledgerSecondaryAmount(entry)}>
|
||||
{(secondary) => <p>{secondary()}</p>}
|
||||
</Show>
|
||||
<p>{entry.actorDisplayName ?? props.copy.ledgerActorFallback ?? ''}</p>
|
||||
</article>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
<article class="balance-item">
|
||||
<header>
|
||||
<strong>{props.copy.paymentsAdminTitle ?? ''}</strong>
|
||||
</header>
|
||||
<Show when={props.readyIsAdmin}>
|
||||
<p>{props.copy.paymentsAdminBody ?? ''}</p>
|
||||
<div class="panel-toolbar">
|
||||
<Button variant="secondary" onClick={props.onOpenAddPayment}>
|
||||
{props.copy.paymentsAddAction ?? ''}
|
||||
</Button>
|
||||
</div>
|
||||
</Show>
|
||||
{props.paymentEntries.length === 0 ? (
|
||||
<p>{props.copy.paymentsEmpty ?? ''}</p>
|
||||
) : (
|
||||
<div class="ledger-list">
|
||||
<For each={props.paymentEntries}>
|
||||
{(entry) => (
|
||||
<article class="ledger-compact-card">
|
||||
<div class="ledger-compact-card__main">
|
||||
<header>
|
||||
<strong>{props.paymentMemberName(entry)}</strong>
|
||||
<span>{entry.occurredAt?.slice(0, 10) ?? '—'}</span>
|
||||
</header>
|
||||
<p>{props.ledgerTitle(entry)}</p>
|
||||
<div class="ledger-compact-card__meta">
|
||||
<span class="mini-chip">{props.ledgerPrimaryAmount(entry)}</span>
|
||||
<Show when={props.ledgerSecondaryAmount(entry)}>
|
||||
{(secondary) => (
|
||||
<span class="mini-chip mini-chip--muted">{secondary()}</span>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={props.readyIsAdmin}>
|
||||
<div class="ledger-compact-card__actions">
|
||||
<IconButton
|
||||
label={props.copy.editEntryAction ?? ''}
|
||||
onClick={() => props.onOpenPaymentEditor(entry.id)}
|
||||
>
|
||||
...
|
||||
</IconButton>
|
||||
</div>
|
||||
</Show>
|
||||
</article>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
<Modal
|
||||
open={props.addingPaymentOpen}
|
||||
title={props.copy.paymentsAddAction ?? ''}
|
||||
description={props.copy.paymentCreateBody ?? ''}
|
||||
closeLabel={props.copy.closeEditorAction ?? ''}
|
||||
onClose={props.onCloseAddPayment}
|
||||
footer={
|
||||
<div class="modal-action-row modal-action-row--single">
|
||||
<Button variant="ghost" onClick={props.onCloseAddPayment}>
|
||||
{props.copy.closeEditorAction ?? ''}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={props.addingPayment || props.paymentForm.amountMajor.trim().length === 0}
|
||||
onClick={() => void props.onAddPayment()}
|
||||
>
|
||||
{props.addingPayment ? props.copy.addingPayment : props.copy.paymentsAddAction}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="editor-grid">
|
||||
<Field label={props.copy.paymentMember ?? ''} wide>
|
||||
<select
|
||||
value={props.paymentForm.memberId}
|
||||
onChange={(event) => props.onPaymentFormMemberChange(event.currentTarget.value)}
|
||||
>
|
||||
<For each={props.adminMembers}>
|
||||
{(member) => <option value={member.id}>{member.displayName}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label={props.copy.paymentKind ?? ''}>
|
||||
<select
|
||||
value={props.paymentForm.kind}
|
||||
onChange={(event) =>
|
||||
props.onPaymentFormKindChange(event.currentTarget.value as 'rent' | 'utilities')
|
||||
}
|
||||
>
|
||||
<option value="rent">{props.copy.paymentLedgerRent ?? ''}</option>
|
||||
<option value="utilities">{props.copy.paymentLedgerUtilities ?? ''}</option>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label={props.copy.paymentAmount ?? ''}>
|
||||
<input
|
||||
value={props.paymentForm.amountMajor}
|
||||
onInput={(event) => props.onPaymentFormAmountChange(event.currentTarget.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={props.copy.settlementCurrency ?? ''}>
|
||||
<select
|
||||
value={props.paymentForm.currency}
|
||||
onChange={(event) =>
|
||||
props.onPaymentFormCurrencyChange(event.currentTarget.value as 'USD' | 'GEL')
|
||||
}
|
||||
>
|
||||
<option value="GEL">GEL</option>
|
||||
<option value="USD">USD</option>
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={Boolean(props.editingPaymentEntry)}
|
||||
title={props.copy.paymentsAdminTitle ?? ''}
|
||||
description={props.copy.paymentEditorBody ?? ''}
|
||||
closeLabel={props.copy.closeEditorAction ?? ''}
|
||||
onClose={props.onClosePaymentEditor}
|
||||
footer={(() => {
|
||||
const entry = props.editingPaymentEntry
|
||||
|
||||
if (!entry) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="modal-action-row">
|
||||
<Button variant="danger" onClick={() => void props.onDeletePayment(entry.id)}>
|
||||
{props.deletingPaymentId === entry.id
|
||||
? props.copy.deletingPayment
|
||||
: props.copy.paymentDeleteAction}
|
||||
</Button>
|
||||
<div class="modal-action-row__primary">
|
||||
<Button variant="ghost" onClick={props.onClosePaymentEditor}>
|
||||
{props.copy.closeEditorAction ?? ''}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={props.savingPaymentId === entry.id}
|
||||
onClick={() => void props.onSavePayment(entry.id)}
|
||||
>
|
||||
{props.savingPaymentId === entry.id
|
||||
? props.copy.addingPayment
|
||||
: props.copy.paymentSaveAction}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
>
|
||||
{(() => {
|
||||
const entry = props.editingPaymentEntry
|
||||
|
||||
if (!entry) {
|
||||
return null
|
||||
}
|
||||
|
||||
const draft = props.paymentDraftMap[entry.id] ?? props.paymentDraftForEntry(entry)
|
||||
|
||||
return (
|
||||
<div class="editor-grid">
|
||||
<Field label={props.copy.paymentMember ?? ''} wide>
|
||||
<select
|
||||
value={draft.memberId}
|
||||
onChange={(event) =>
|
||||
props.onPaymentDraftMemberChange(entry.id, entry, event.currentTarget.value)
|
||||
}
|
||||
>
|
||||
<For each={props.adminMembers}>
|
||||
{(member) => <option value={member.id}>{member.displayName}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label={props.copy.paymentKind ?? ''}>
|
||||
<select
|
||||
value={draft.kind}
|
||||
onChange={(event) =>
|
||||
props.onPaymentDraftKindChange(
|
||||
entry.id,
|
||||
entry,
|
||||
event.currentTarget.value as 'rent' | 'utilities'
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="rent">{props.copy.paymentLedgerRent ?? ''}</option>
|
||||
<option value="utilities">{props.copy.paymentLedgerUtilities ?? ''}</option>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label={props.copy.paymentAmount ?? ''}>
|
||||
<input
|
||||
value={draft.amountMajor}
|
||||
onInput={(event) =>
|
||||
props.onPaymentDraftAmountChange(entry.id, entry, event.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={props.copy.settlementCurrency ?? ''}>
|
||||
<select
|
||||
value={draft.currency}
|
||||
onChange={(event) =>
|
||||
props.onPaymentDraftCurrencyChange(
|
||||
entry.id,
|
||||
entry,
|
||||
event.currentTarget.value as 'USD' | 'GEL'
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="GEL">GEL</option>
|
||||
<option value="USD">USD</option>
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user