Skip to content

Commit 2c0ce45

Browse files
sstefdevsstefdev
authored
Merge branch 'main' into 169-client-address-field-is-blue-even-when-not-selected-on-the-create-invoice-form
2 parents cf40ba4 + d5bb545 commit 2c0ce45

22 files changed

+1952
-123
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
],
1111
"scripts": {
1212
"test": "echo \"Error: no test specified\" && exit 1",
13+
"clean": "find . -path './node_modules' -prune -o -name 'dist' -type d -exec rm -rf '{}' \\; -printf '%p deleted\\n' 2>/dev/null",
1314
"deep-clean": "find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \\;",
1415
"build": "turbo run build",
1516
"build:form": "turbo run build --filter=@requestnetwork/create-invoice-form",

‎packages/create-invoice-form/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@requestnetwork/create-invoice-form",
3-
"version": "0.9.0",
3+
"version": "0.10.0",
44
"main": "./dist/web-component.umd.cjs",
55
"scripts": {
66
"dev": "vite dev",
@@ -36,10 +36,12 @@
3636
"@requestnetwork/data-format": "0.19.1",
3737
"@requestnetwork/request-client.js": "0.50.0",
3838
"@wagmi/core": "^2.13.8",
39+
"validator": "^13.12.0",
3940
"viem": "^2.9.15"
4041
},
4142
"devDependencies": {
4243
"@sveltejs/vite-plugin-svelte": "^2.5.2",
44+
"@types/validator": "^13.12.2",
4345
"svelte": "^4.0.5",
4446
"svelte-check": "^3.6.0",
4547
"typescript": "^5.0.0",

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

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
import type { IConfig } from "@requestnetwork/shared-types";
99
import { APP_STATUS } from "@requestnetwork/shared-types/enums";
1010
import type { RequestNetwork } from "@requestnetwork/request-client.js";
11+
import { Types } from "@requestnetwork/request-client.js";
12+
import { CurrencyTypes } from "@requestnetwork/types";
1113
// Utils
1214
import { getInitialFormData, prepareRequestParams } from "./utils";
1315
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
1416
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
15-
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
17+
import {
18+
getCurrencySupportedNetworksForConversion,
19+
initializeCurrencyManager,
20+
} from "@requestnetwork/shared-utils/initCurrencyManager";
1621
// Components
1722
import { InvoiceForm, InvoiceView } from "./invoice";
1823
import Button from "@requestnetwork/shared-components/button.svelte";
@@ -34,26 +39,34 @@
3439
const extractUniqueNetworkNames = (): string[] => {
3540
const networkSet = new Set<string>();
3641
37-
currencyManager.knownCurrencies.forEach((currency: any) => {
38-
networkSet.add(currency.network);
39-
});
42+
currencyManager.knownCurrencies.forEach(
43+
(currency: CurrencyTypes.CurrencyDefinition) => {
44+
if (currency.network) {
45+
networkSet.add(currency.network);
46+
}
47+
}
48+
);
4049
4150
return Array.from(networkSet);
4251
};
4352
44-
let networks = extractUniqueNetworkNames();
53+
let networks: string[] = extractUniqueNetworkNames();
4554
46-
let network = networks[0];
55+
let network: string | undefined = undefined;
56+
let currency: CurrencyTypes.CurrencyDefinition | undefined = undefined;
57+
let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined = undefined;
4758
48-
const handleNetworkChange = (network: string) => {
49-
if (network) {
59+
const handleNetworkChange = (newNetwork: string) => {
60+
if (newNetwork) {
5061
const newCurrencies = currencyManager.knownCurrencies.filter(
51-
(currency: any) => currency.network === network
62+
(currency: CurrencyTypes.CurrencyDefinition) =>
63+
currency.type === Types.RequestLogic.CURRENCY.ISO4217 ||
64+
currency.network === newNetwork
5265
);
5366
54-
network = network;
67+
network = newNetwork;
5568
defaultCurrencies = newCurrencies;
56-
currency = newCurrencies[0];
69+
currency = undefined;
5770
}
5871
};
5972
@@ -62,12 +75,33 @@
6275
let appStatus: APP_STATUS[] = [];
6376
let formData = getInitialFormData();
6477
let defaultCurrencies = currencyManager.knownCurrencies.filter(
65-
(currency: any) => currency.network === network
78+
(currency: CurrencyTypes.CurrencyDefinition) =>
79+
currency.type === Types.RequestLogic.CURRENCY.ISO4217 || network
80+
? currency.network === network
81+
: true
6682
);
6783
68-
let currency = defaultCurrencies[0];
84+
const handleInvoiceCurrencyChange = (
85+
value: CurrencyTypes.CurrencyDefinition
86+
) => {
87+
invoiceCurrency = value;
88+
network = undefined;
89+
currency = undefined;
90+
91+
if (
92+
invoiceCurrency &&
93+
invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
94+
) {
95+
networks = getCurrencySupportedNetworksForConversion(
96+
invoiceCurrency.hash,
97+
currencyManager
98+
);
99+
} else {
100+
networks = extractUniqueNetworkNames();
101+
}
102+
};
69103
70-
const handleCurrencyChange = (value: string) => {
104+
const handleCurrencyChange = (value: CurrencyTypes.CurrencyDefinition) => {
71105
currency = value;
72106
};
73107
@@ -93,7 +127,14 @@
93127
94128
$: {
95129
const basicDetailsFilled =
96-
formData.payeeAddress && formData.payerAddress && formData.dueDate;
130+
formData.payeeAddress &&
131+
formData.payerAddress &&
132+
formData.dueDate &&
133+
formData.invoiceNumber &&
134+
formData.issuedOn &&
135+
invoiceCurrency &&
136+
currency &&
137+
formData.issuedOn;
97138
const hasItems =
98139
formData.invoiceItems.length > 0 &&
99140
formData.invoiceItems.every(isValidItem);
@@ -132,6 +173,7 @@
132173
const requestCreateParameters = prepareRequestParams({
133174
address: account?.address,
134175
formData,
176+
invoiceCurrency,
135177
currency,
136178
invoiceTotals,
137179
});
@@ -172,13 +214,19 @@
172214
bind:formData
173215
config={activeConfig}
174216
bind:defaultCurrencies
217+
{handleInvoiceCurrencyChange}
175218
{handleCurrencyChange}
176219
{handleNetworkChange}
177220
{networks}
221+
{currencyManager}
222+
{invoiceCurrency}
223+
{currency}
224+
{network}
178225
/>
179226
<div class="invoice-view-wrapper">
180227
<InvoiceView
181228
config={activeConfig}
229+
{invoiceCurrency}
182230
{currency}
183231
bind:formData
184232
bind:canSubmit

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
99
// Types
1010
import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";
11+
import { CurrencyTypes } from "@requestnetwork/types";
1112
1213
// Utils
1314
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
@@ -18,7 +19,8 @@
1819
export let config: IConfig;
1920
export let canSubmit = false;
2021
export let formData: CustomFormData;
21-
export let currency = defaultCurrencies[0];
22+
export let currency: CurrencyTypes.CurrencyDefinition | undefined;
23+
export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
2224
export let submitForm: (e: Event) => Promise<void>;
2325
export let invoiceTotals = {
2426
amountWithoutTax: 0,
@@ -164,16 +166,15 @@
164166
</div>
165167
<p class="invoice-section-title">
166168
<span>Payment Chain</span>
167-
{currency.network[0].toUpperCase() + currency.network.slice(1)}
169+
{currency?.network ? currency.network.charAt(0).toUpperCase() + currency.network.slice(1).toLowerCase() : ""}
168170
</p>
169171
<p class="invoice-section-title">
170172
<span>Invoice Currency</span>
171-
{currency.symbol}
172-
({currency.network})
173+
{invoiceCurrency ? invoiceCurrency.symbol: ""}
173174
</p>
174175
<p class="invoice-section-title">
175-
<span>Invoice Type</span>
176-
Regular Invoice
176+
<span>Settlement Currency</span>
177+
{currency ? `${currency.symbol} (${currency.network})` : ""}
177178
</p>
178179
<div class="invoice-table-wrapper">
179180
<table class="invoice-table">
@@ -221,7 +222,7 @@
221222
>
222223
<span>Due: </span>
223224
<span
224-
>{currency.symbol}
225+
>{currency ? currency.symbol : ""}
225226
{" "}
226227
{invoiceTotals.totalAmount.toFixed(2)}</span
227228
>
@@ -457,7 +458,7 @@
457458
}
458459
459460
.invoice-note-content {
460-
width: 620px;
461+
max-width: 620px;
461462
word-break: break-all;
462463
}
463464

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

Lines changed: 60 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,26 @@
1717
import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
1818
import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
1919
import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
20+
import { Types } from "@requestnetwork/request-client.js";
21+
import { CurrencyTypes } from "@requestnetwork/types";
22+
import isEmail from "validator/es/lib/isEmail";
2023
2124
export let config: IConfig;
2225
export const invoiceNumber: number = 1;
2326
export let formData: CustomFormData;
27+
export let handleInvoiceCurrencyChange: (value: string) => void;
2428
export let handleCurrencyChange: (value: string) => void;
2529
2630
export let handleNetworkChange: (chainId: string) => void;
2731
export let networks;
2832
export let defaultCurrencies: any = [];
33+
export let currencyManager: any;
34+
export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
35+
export let currency:
36+
| CurrencyTypes.ERC20Currency
37+
| CurrencyTypes.NativeCurrency
38+
| undefined;
39+
export let network: any;
2940
3041
let validationErrors = {
3142
payeeAddress: false,
@@ -45,8 +56,7 @@
4556
}
4657
4758
const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
48-
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
49-
validationErrors[`${type}`].email = !emailRegex.test(email);
59+
validationErrors[`${type}`].email = !isEmail(email);
5060
};
5161
5262
const checkPayeeAddress = () => {
@@ -110,6 +120,21 @@
110120
}
111121
};
112122
123+
const filterSettlementCurrencies = (
124+
currency: CurrencyTypes.CurrencyDefinition
125+
) => {
126+
return invoiceCurrency
127+
? invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
128+
? currency.type !== Types.RequestLogic.CURRENCY.ISO4217 &&
129+
currencyManager?.getConversionPath(
130+
invoiceCurrency,
131+
currency,
132+
currency.network
133+
)?.length > 0
134+
: invoiceCurrency.hash === currency.hash
135+
: false;
136+
};
137+
113138
const addInvoiceItem = () => {
114139
const newItem = {
115140
name: "",
@@ -333,25 +358,45 @@
333358
</div>
334359
</Accordion>
335360
</div>
336-
<Dropdown
337-
{config}
338-
placeholder="Select payment chain"
339-
options={networks.map((network) => {
340-
return {
341-
value: network,
342-
label: network[0].toUpperCase() + network.slice(1),
343-
};
344-
})}
345-
onchange={handleNetworkChange}
346-
/>
347361

348362
<Dropdown
349363
{config}
350-
placeholder="Select a currency"
364+
selectedValue={invoiceCurrency
365+
? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
366+
: undefined}
367+
placeholder="Invoice currency (labeling)"
351368
options={defaultCurrencies.map((currency) => ({
352369
value: currency,
353-
label: `${currency.symbol} (${currency.network})`,
370+
label: `${currency.symbol} ${currency?.network ? `(${currency?.network})` : ""}`,
354371
}))}
372+
onchange={handleInvoiceCurrencyChange}
373+
/>
374+
<Dropdown
375+
{config}
376+
placeholder="Payment chain"
377+
selectedValue={network}
378+
options={networks
379+
.filter((networkItem) => networkItem)
380+
.map((networkItem) => {
381+
return {
382+
value: networkItem,
383+
label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
384+
};
385+
})}
386+
onchange={handleNetworkChange}
387+
/>
388+
<Dropdown
389+
{config}
390+
placeholder="Settlement currency"
391+
selectedValue={currency
392+
? `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`
393+
: undefined}
394+
options={defaultCurrencies
395+
.filter((currency) => filterSettlementCurrencies(currency))
396+
.map((currency) => ({
397+
value: currency,
398+
label: `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`,
399+
}))}
355400
onchange={handleCurrencyChange}
356401
/>
357402
<Input

0 commit comments

Comments
 (0)