Skip to content

Commit a0868ff

Browse files
sstefdevsstefdev
committed
Merge branch 'main' of github.com:RequestNetwork/web-components into 1528-bug-in-invoicing-template-wallet-list-loading-and-payment-failure
2 parents 6a7588f + 4f2316d commit a0868ff

File tree

14 files changed

+696
-208
lines changed

14 files changed

+696
-208
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/create-invoice-form/src/lib/create-invoice-form.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
import Button from "@requestnetwork/shared-components/button.svelte";
2424
import Status from "@requestnetwork/shared-components/status.svelte";
2525
import Modal from "@requestnetwork/shared-components/modal.svelte";
26-
import { EncryptionTypes, CipherProviderTypes } from '@requestnetwork/types';
26+
import { EncryptionTypes, CipherProviderTypes } from "@requestnetwork/types";
2727
2828
export let config: IConfig;
2929
export let wagmiConfig: WagmiConfig;
@@ -115,7 +115,7 @@
115115
totalAmount: 0,
116116
};
117117
118-
$: cipherProvider = requestNetwork?.getCipherProvider();
118+
$: cipherProvider = undefined;
119119
120120
$: {
121121
if (wagmiConfig) {
@@ -188,7 +188,7 @@
188188
try {
189189
addToStatus(APP_STATUS.PERSISTING_TO_IPFS);
190190
let request;
191-
if(cipherProvider && formData.isEncrypted) {
191+
if (cipherProvider && formData.isEncrypted) {
192192
const payeeEncryptionParams = {
193193
key: requestCreateParameters.requestInfo.payee?.value!,
194194
method: EncryptionTypes.METHOD.KMS,
@@ -205,7 +205,7 @@
205205
paymentNetwork: requestCreateParameters.paymentNetwork,
206206
contentData: requestCreateParameters.contentData,
207207
},
208-
[payeeEncryptionParams, payerEncryptionParams],
208+
[payeeEncryptionParams, payerEncryptionParams]
209209
);
210210
} else {
211211
request = await requestNetwork.createRequest({

‎packages/create-invoice-form/src/lib/invoice/form-view.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
</span>
195195
</p>
196196
<p class="invoice-section-title">
197-
<span>Settlement Currency</span>
197+
<span>Payment Currency</span>
198198
<span class="invoice-section-title-content">
199199
{currency ? `${currency.symbol} (${currency.network})` : ""}
200200
</span>

‎packages/create-invoice-form/src/lib/invoice/form.svelte‎

Lines changed: 101 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import Input from "@requestnetwork/shared-components/input.svelte";
66
import Labels from "@requestnetwork/shared-components/labels.svelte";
77
import Accordion from "@requestnetwork/shared-components/accordion.svelte";
8+
import SearchableDropdown from "@requestnetwork/shared-components/searchable-dropdown.svelte";
89
910
// Icons
1011
import Trash from "@requestnetwork/shared-icons/trash.svelte";
@@ -410,77 +411,65 @@
410411
</div>
411412
</Accordion>
412413
</div>
413-
<Dropdown
414-
{config}
415-
placeholder="Payment chain"
416-
selectedValue={network}
417-
options={networks
418-
.filter((networkItem) => networkItem)
419-
.map((networkItem) => ({
420-
value: networkItem,
421-
label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
422-
}))}
423-
onchange={handleNetworkChange}
424-
/>
425-
<Dropdown
426-
{config}
427-
selectedValue={invoiceCurrency
428-
? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
429-
: undefined}
430-
placeholder="Invoice currency (labeling)"
431-
options={defaultCurrencies
432-
?.filter((curr) => {
433-
if (!curr) return false;
434-
return (
435-
curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
436-
(curr.network && curr.network === network)
437-
);
438-
})
439-
.map((currency) => ({
414+
415+
<div class="searchable-dropdown-container">
416+
<SearchableDropdown
417+
getValue={(currency) => currency.value.symbol}
418+
getDisplayValue={(currency) =>
419+
`${currency.value.symbol} ${currency.value.network ? `(${currency.value.network})` : ""}`}
420+
placeholder="Invoice currency"
421+
items={defaultCurrencies
422+
?.filter((curr) => {
423+
if (!curr) return false;
424+
return (
425+
curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
426+
(curr.network && curr.network === network)
427+
);
428+
})
429+
.map((currency) => ({
430+
value: currency,
431+
label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
432+
type: "invoiceCurrency",
433+
})) ?? []}
434+
onSelect={handleInvoiceCurrencyChange}
435+
/>
436+
<SearchableDropdown
437+
items={networks
438+
.filter((networkItem) => networkItem)
439+
.map((networkItem) => {
440+
return {
441+
value: networkItem,
442+
label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
443+
type: "network",
444+
};
445+
})}
446+
placeholder="Payment chain"
447+
getValue={(network) => network.value}
448+
getDisplayValue={(network) => network.label}
449+
onSelect={handleNetworkChange}
450+
/>
451+
<SearchableDropdown
452+
items={filteredSettlementCurrencies.map((currency) => ({
440453
value: currency,
441-
label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
442-
})) ?? []}
443-
onchange={handleInvoiceCurrencyChange}
444-
/>
445-
<Dropdown
446-
{config}
447-
placeholder="Settlement currency"
448-
selectedValue={currency
449-
? `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`
450-
: undefined}
451-
options={filteredSettlementCurrencies.map((currency) => ({
452-
value: currency,
453-
label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
454-
}))}
455-
onchange={handleCurrencyChange}
456-
/>
457-
{#if cipherProvider}
458-
<Input
459-
type="checkbox"
460-
id="isEncrypted"
461-
label="Encrypt invoice"
462-
bind:checked={formData.isEncrypted}
454+
type: "settlementCurrency",
455+
}))}
456+
placeholder="Payment currency"
457+
getValue={(currency) => currency.value.symbol}
458+
getDisplayValue={(currency) =>
459+
`${currency.value.symbol} (${currency.value.network})`}
460+
onSelect={handleCurrencyChange}
461+
/>
462+
{#if cipherProvider}
463+
<Input
464+
type="checkbox"
465+
id="isEncrypted"
466+
label="Encrypt invoice"
467+
bind:checked={formData.isEncrypted}
463468
/>
464-
{/if}
469+
{/if}
470+
</div>
465471
</div>
466472
</div>
467-
<div class="invoice-form-dates">
468-
<Input
469-
id="issuedOn"
470-
type="date"
471-
value={inputDateFormat(new Date())}
472-
label="Issued Date"
473-
{handleInput}
474-
/>
475-
<Input
476-
id="dueDate"
477-
type="date"
478-
min={inputDateFormat(formData.issuedOn)}
479-
value={new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000}
480-
label="Due Date"
481-
{handleInput}
482-
/>
483-
</div>
484473
</div>
485474
<div class="invoice-form-table-section">
486475
<div class="invoice-form-table-wrapper">
@@ -592,6 +581,26 @@
592581
</div>
593582
</Button>
594583
</div>
584+
<div class="invoice-form-dates">
585+
<Input
586+
id="issuedOn"
587+
type="date"
588+
value={inputDateFormat(new Date())}
589+
label="Issued Date"
590+
{handleInput}
591+
/>
592+
<Input
593+
id="dueDate"
594+
type="date"
595+
min={inputDateFormat(formData.issuedOn)}
596+
value={inputDateFormat(
597+
new Date(new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000)
598+
)}
599+
label="Due Date"
600+
{handleInput}
601+
/>
602+
</div>
603+
595604
<div class="invoice-form-label-wrapper">
596605
<Input
597606
max={200}
@@ -635,7 +644,7 @@
635644
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
636645
gap: 20px;
637646
box-sizing: border-box;
638-
min-width: 700px;
647+
min-width: 760px;
639648
}
640649
641650
.invoice-form-container {
@@ -658,15 +667,17 @@
658667
659668
.invoice-form-dates {
660669
display: flex;
661-
flex-direction: column;
662-
gap: 9px;
663-
margin-left: auto;
664-
width: 260px;
670+
gap: 16px;
671+
width: 100%;
672+
}
673+
674+
:global(.invoice-form-dates .input-wrapper) {
675+
width: 100%;
665676
}
666677
667678
@media only screen and (max-width: 1300px) {
668679
.invoice-form-dates {
669-
margin-left: 0;
680+
flex-direction: column;
670681
}
671682
672683
.invoice-form-container {
@@ -781,7 +792,7 @@
781792
}
782793
783794
.invoice-form-table-body-quantity {
784-
width: 80px !important;
795+
width: 180px !important;
785796
}
786797
787798
.invoice-form-table-body-amount {
@@ -868,4 +879,20 @@
868879
:global(.invoice-form-close-recipient-button div) {
869880
padding: 4px !important;
870881
}
882+
883+
.searchable-dropdown-container {
884+
display: grid;
885+
grid-template-columns: repeat(3, minmax(0, 1fr));
886+
gap: 30px;
887+
}
888+
889+
@media only screen and (max-width: 1300px) {
890+
.searchable-dropdown-container {
891+
grid-template-columns: repeat(2, minmax(0, 1fr));
892+
}
893+
}
894+
895+
:global(.danger) {
896+
color: #ff0000;
897+
}
871898
</style>

0 commit comments

Comments
 (0)