djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support for new transactions API (#2233)

Browse source 
* Revert "🦄 Simple taxes (#2072)"

This reverts commit 5c1a62171d.

* Revert "Revert "🦄 Simple taxes (#2072)""

This reverts commit 3c8289cba657debc676bb6ff677d9494cb308d19.

* SALEOR-7898: Split payments - transactions list #2234

commit 0742eee71765caa9c7084f6f3eb9be90808ff29c
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 10:18:06 2022 +0200

    Remove too long font size

commit 2724965127b591e703acb966ecc50c018124cb3f
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 15:03:35 2022 +0200

    Replace custom styles with Typography component

commit b94a616953bbef878bdd5d958eb6debda53aa524
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:54:39 2022 +0200

    Fix formatting

commit 2a2a22692473290b3b566d89e85b265f7b8e0670
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:24:38 2022 +0200

    Update messages

commit bdde8a0d54429d0d2d01d619ddde8a88fd29f0e1
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:23:37 2022 +0200

    Fix failing prettier check

commit 2f98b3bccc59bdcd978cc9cee8bede76f45f47a6
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:07:46 2022 +0200

    Remove !important from styles

commit dfce53ba5add1e1a6b175caa2e1c5a03fa9dffe8
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 13:46:08 2022 +0200

    Refactor PR comments

commit 43781d792603c59031c75164415443f3b68f86d0
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 13:02:11 2022 +0200

    Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

commit 51e89a0f46059bd6d19513abee128503f818c2f8
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 13:01:15 2022 +0200

    Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

commit 9565cab4a408845de40882ee564c4c7e79a3d5d6
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 8 14:13:11 2022 +0200

    Update messages

commit ebf3b7a5f7a2b49d571d4cd6df2f74027e3d8304
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 8 14:11:59 2022 +0200

    Update snapshots

commit 854b21d7af3f14e3f7c4e53812c2d30490e0a675
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 7 17:36:55 2022 +0200

    Add copy icon to PspReference

commit 0124657acf623870773abecdf03b9b5ae3381757
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 7 15:38:45 2022 +0200

    Fix order saved when copying PSP reference

commit adf151fb56d06d9ee12d13bdef1b324395a86b4a
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 14:44:00 2022 +0200

    Update snapshots, fix inline styles in PSP reference

commit bfae5d9476e61e27b91ffa64e594a86b82e8f670
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 12:59:57 2022 +0200

    Fix transactions table sizing on `md` screen sizing

commit cdbb439f80534706a0a2e588f033ae94af04cb72
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 12:38:27 2022 +0200

    Fix PSP reference sizing issues

commit a2be62f8f2db11319c8843cdd4b6431d7518b389
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 10:06:28 2022 +0200

    Add parameter to clear additional params in modals

commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 5 15:42:46 2022 +0200

    Update prettier to latest version (TS syntax parsing issues)

commit 261879696f594b1e09b4a0c112dfce801b1cf6bd
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 5 15:39:08 2022 +0200

    Add buttons to void or capture transactions

commit ba89cca5ec3e5c61d9468f983ea7b7ab9eea8c14
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 14:13:13 2022 +0200

    Add copy feature to psp reference pill

commit 7f3ff30a2738bcfa773a5abce7e53828ce4b276e
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:35:02 2022 +0200

    Update snapshots

commit 4bee083c839ca5d141b8845131dba506a0745a79
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:29:38 2022 +0200

    Update messages

commit c86431abb6015a28b1cfeddc91cda69cc0c3e06b
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:16:37 2022 +0200

    Fix transaction events list when no pspReference is provided

commit a7127123556677206864aa3a9683c19645724a36
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:09:48 2022 +0200

    Fix spacing between transactions

commit dc224e2c7ebd2af438f2e997eb1ba3430ca5ffcc
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:06:32 2022 +0200

    Highlight rows that have the same pspReference on hover

commit 2e9aaed9599a5e5a0064c6140e6b6f48c0587850
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 1 17:33:06 2022 +0200

    Update macaw to unreleased version

commit a818c1b0ebeb4e17ea65aa6698c2c9d29be6cc2f
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 1 17:21:24 2022 +0200

    Fix transactions list table layout

commit 50ae82b961f653dd8b2ba9b9cc4ece5c691fe39b
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 1 16:34:52 2022 +0200

    Use Intl.DateTimeFormat to format dates instead of moment.js

commit c0f54100cb476637a8d0145ac00ccd5e017a9665
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Aug 31 17:21:34 2022 +0200

    Add transaction events

commit c34279d5c195734df604605481e3d84c5e81f764
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:53:01 2022 +0200

    Fix alignment when amount is <10

commit d3362c24e8bcf0263582dbcc324c2fe403a6f72a
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:42:41 2022 +0200

    Fix conditional display logic, add story for long numbers

commit 73cce9edd5e25c2cca68411ccebdfd3918099ae5
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:27:18 2022 +0200

    Fix IMoney to use new import

commit b0cf154c94139be726451ce52b0e4421928ebf80
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:15:37 2022 +0200

    Add order transactions component

commit 87808f66482448d4301d13196be84cb55912d994
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:28:02 2022 +0200

    Don't hide transaction balance when order is not confirmed

commit 6818c88b5b26be901ec56fae3302d5ba7b5fa504
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:22:47 2022 +0200

    Update lockfile

commit 9046b5f56cc293516e578c527abda4a30a66b079
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:20:50 2022 +0200

    Update GraphQL schema

* SALEOR-7898: Split payments - transactions list #2234

commit 0742eee71765caa9c7084f6f3eb9be90808ff29c
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 10:18:06 2022 +0200

    Remove too long font size

commit 2724965127b591e703acb966ecc50c018124cb3f
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 15:03:35 2022 +0200

    Replace custom styles with Typography component

commit b94a616953bbef878bdd5d958eb6debda53aa524
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:54:39 2022 +0200

    Fix formatting

commit 2a2a22692473290b3b566d89e85b265f7b8e0670
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:24:38 2022 +0200

    Update messages

commit bdde8a0d54429d0d2d01d619ddde8a88fd29f0e1
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:23:37 2022 +0200

    Fix failing prettier check

commit 2f98b3bccc59bdcd978cc9cee8bede76f45f47a6
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 14:07:46 2022 +0200

    Remove !important from styles

commit dfce53ba5add1e1a6b175caa2e1c5a03fa9dffe8
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 13:46:08 2022 +0200

    Refactor PR comments

commit 43781d792603c59031c75164415443f3b68f86d0
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 13:02:11 2022 +0200

    Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

commit 51e89a0f46059bd6d19513abee128503f818c2f8
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 9 13:01:15 2022 +0200

    Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

commit 9565cab4a408845de40882ee564c4c7e79a3d5d6
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 8 14:13:11 2022 +0200

    Update messages

commit ebf3b7a5f7a2b49d571d4cd6df2f74027e3d8304
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 8 14:11:59 2022 +0200

    Update snapshots

commit 854b21d7af3f14e3f7c4e53812c2d30490e0a675
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 7 17:36:55 2022 +0200

    Add copy icon to PspReference

commit 0124657acf623870773abecdf03b9b5ae3381757
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 7 15:38:45 2022 +0200

    Fix order saved when copying PSP reference

commit adf151fb56d06d9ee12d13bdef1b324395a86b4a
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 14:44:00 2022 +0200

    Update snapshots, fix inline styles in PSP reference

commit bfae5d9476e61e27b91ffa64e594a86b82e8f670
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 12:59:57 2022 +0200

    Fix transactions table sizing on `md` screen sizing

commit cdbb439f80534706a0a2e588f033ae94af04cb72
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 12:38:27 2022 +0200

    Fix PSP reference sizing issues

commit a2be62f8f2db11319c8843cdd4b6431d7518b389
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 6 10:06:28 2022 +0200

    Add parameter to clear additional params in modals

commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 5 15:42:46 2022 +0200

    Update prettier to latest version (TS syntax parsing issues)

commit 261879696f594b1e09b4a0c112dfce801b1cf6bd
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 5 15:39:08 2022 +0200

    Add buttons to void or capture transactions

commit ba89cca5ec3e5c61d9468f983ea7b7ab9eea8c14
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 14:13:13 2022 +0200

    Add copy feature to psp reference pill

commit 7f3ff30a2738bcfa773a5abce7e53828ce4b276e
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:35:02 2022 +0200

    Update snapshots

commit 4bee083c839ca5d141b8845131dba506a0745a79
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:29:38 2022 +0200

    Update messages

commit c86431abb6015a28b1cfeddc91cda69cc0c3e06b
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:16:37 2022 +0200

    Fix transaction events list when no pspReference is provided

commit a7127123556677206864aa3a9683c19645724a36
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:09:48 2022 +0200

    Fix spacing between transactions

commit dc224e2c7ebd2af438f2e997eb1ba3430ca5ffcc
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 2 12:06:32 2022 +0200

    Highlight rows that have the same pspReference on hover

commit 2e9aaed9599a5e5a0064c6140e6b6f48c0587850
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 1 17:33:06 2022 +0200

    Update macaw to unreleased version

commit a818c1b0ebeb4e17ea65aa6698c2c9d29be6cc2f
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 1 17:21:24 2022 +0200

    Fix transactions list table layout

commit 50ae82b961f653dd8b2ba9b9cc4ece5c691fe39b
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 1 16:34:52 2022 +0200

    Use Intl.DateTimeFormat to format dates instead of moment.js

commit c0f54100cb476637a8d0145ac00ccd5e017a9665
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Aug 31 17:21:34 2022 +0200

    Add transaction events

commit c34279d5c195734df604605481e3d84c5e81f764
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:53:01 2022 +0200

    Fix alignment when amount is <10

commit d3362c24e8bcf0263582dbcc324c2fe403a6f72a
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:42:41 2022 +0200

    Fix conditional display logic, add story for long numbers

commit 73cce9edd5e25c2cca68411ccebdfd3918099ae5
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:27:18 2022 +0200

    Fix IMoney to use new import

commit b0cf154c94139be726451ce52b0e4421928ebf80
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 26 16:15:37 2022 +0200

    Add order transactions component

commit 87808f66482448d4301d13196be84cb55912d994
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:28:02 2022 +0200

    Don't hide transaction balance when order is not confirmed

commit 6818c88b5b26be901ec56fae3302d5ba7b5fa504
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:22:47 2022 +0200

    Update lockfile

commit 9046b5f56cc293516e578c527abda4a30a66b079
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:20:50 2022 +0200

    Update GraphQL schema

* SALEOR-7901: Split payments - order summary and payments balance #2310

commit 8d5be6ae4c46dffe9cca5e20cfe4b458d2cc7f2f
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 14:17:20 2022 +0200

    update snapshots

commit 7b84da1566a92811e0cf3424085219221ff8876c
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Tue Oct 4 16:10:40 2022 +0200

    Refactor inlined functions to separate file

commit 798c8cc87fda9ac48837013336d94291b5d87fb4
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Tue Oct 4 16:08:27 2022 +0200

    Refactor tax amount turnary operator expression

commit 001d16d3c4010489fbf8a2872d5d80195797ef7d
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Sep 28 16:15:12 2022 +0200

    Apply suggestions from code review

commit 274c6f9f68630d8c91a588a77975d8d519c84e24
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 28 16:07:46 2022 +0200

    Apply suggestions from code review

    Co-authored-by: Dawid <tarasiukdawid@gmail.com>

commit ab13210f62b00dc68478ee94a30d5b0d5424cc09
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Sep 28 13:21:46 2022 +0200

    Hide "no payment" text when order has gift cards

commit 9159cf1913cec93a7960ba8d5ad29914d11d7a63
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Sep 28 13:11:52 2022 +0200

    Fix "Copied" text doesn't fit on short psp reference

commit a7eea637484c010b91b265df8eba5a729bec8e6b
Merge: 97f128b1f 3ac5e6304
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Mon Sep 26 16:44:52 2022 +0200

    Merge branch 'feature/split-payments' into split-payments/balance

commit 3ac5e6304e2d114288ae21d7def120b7cb669887
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 10:51:05 2022 +0200

    Split payments - transactions list (#2234)

    * Don't hide transaction balance when order is not confirmed

    * Add order transactions component

    * Fix IMoney to use new import

    * Fix conditional display logic, add story for long numbers

    * Fix alignment when amount is <10

    * Add transaction events

    * Use Intl.DateTimeFormat to format dates instead of moment.js

    * Fix transactions list table layout

    * Update macaw to unreleased version

    * Highlight rows that have the same pspReference on hover

    * Fix spacing between transactions

    * Fix transaction events list when no pspReference is provided

    * Update messages

    * Update snapshots

    * Add copy feature to psp reference pill

    * Add buttons to void or capture transactions

    * Update prettier to latest version (TS syntax parsing issues)

    * Add parameter to clear additional params in modals

    * Fix PSP reference sizing issues

    * Fix transactions table sizing on `md` screen sizing

    * Update snapshots, fix inline styles in PSP reference

    * Fix order saved when copying PSP reference

    * Add copy icon to PspReference

    * Update snapshots

    * Update messages

    * Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

    * Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

    * Refactor PR comments

    * Remove !important from styles

    * Fix failing prettier check

    * Update messages

    * Fix formatting

    * Replace custom styles with Typography component

    * Remove too long font size

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

commit 97f128b1f7b9376708f3d98a1a5131d5c0acc2be
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Mon Sep 26 11:46:29 2022 +0200

    force deploy

commit b97d93d8930cb2063772bace0ad5c779852a5c5c
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:08:27 2022 +0200

    Fix TS errors

commit b679bc91b670661c205ed2bd9c5b209d777173cc
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:00:35 2022 +0200

    Update snapshots

commit a6f3d3c50a46325011bba242b431cbf3cb81ac8b
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:00:21 2022 +0200

    Update messages

commit 99ec7ca736666b669eb215e463362fd2fe27c690
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:00:08 2022 +0200

    Fix story - gift card

commit 3c254dce2386dcbe544810948a86c5cf128d4cb4
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 15:34:07 2022 +0200

    Improve loading layout

commit b1adf9d580d39b3301a8f56d0677a5ccf9608126
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 15:05:37 2022 +0200

    Display message in payment card when there are no transactions

commit e9bb8b22a95c7e2416ed5e457db7cbddc004fa3d
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 14:11:35 2022 +0200

    Handle gift cards edge case: lowered total amount

commit 115f56fb6f9e44f7f8bbec84d110a8e1c2af47d2
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 13:56:41 2022 +0200

    Filter out payments that are inactive and don't contain any transaction

commit e790aadca2a13fcccb8bb3a3c52967b90856c3e4
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:57:24 2022 +0200

    Remove order level actions, move buttons to payment level

commit fd4a158c5aba32f4a7ed31daa54bc37274d1cdbe
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:31:23 2022 +0200

    Simplify OrderAddTransaction button

commit 6b298357933033df42745d6db465617963b181d6
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:26:40 2022 +0200

    Hide grant refund and send refund when there is no payment

commit b3c6532d299932bceafcbe48b06aaaf693dc21be
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:14:10 2022 +0200

    Add Stories for payments in order, fix edge cases for payments

commit 2db8efe628df5c647d36f2b97a48a40bd7c98eaf
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 14:46:54 2022 +0200

    Add payments displayed as transactions in order details

commit 3751cbf4fecf22c6624d39ca894190abb77363a6
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 21 14:03:42 2022 +0200

    Add gift card Storybook example, fix spacing between OrderTransaction

commit 77a1647c0c7afe38298778372cace06e2dc428fb
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 20 17:00:18 2022 +0200

    Remove gift card from OrderSummaryCard

commit 85a4894d28d88c386a9b61fe09b517ac7ff8ad60
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 20 16:58:25 2022 +0200

    Display gift cards as transactions in order details

commit 1e36a176bab8c57c527f5e19ae05e46cf0cefa03
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 15 14:13:47 2022 +0200

    Fix logic for displaying "Mark as paid" button

commit 5aeca84a40c8d0a6df03315b56e48dcc1fc39cab
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 15 13:18:24 2022 +0200

    Fix order details page when loading

commit a6dc8f13ded5a4d7f5bf0b0778bb52c31b97028f
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 15 13:11:50 2022 +0200

    Add "Mark as paid" / Add transaction button

commit 7ad01b66dc4b639ae24bbc58a4364eee89e4cf4c
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 14 16:52:38 2022 +0200

    Fix logic of showing / hiding capture & authorize amounts

commit b4328e4cbf09290f5d1a29ecc3ca88f33fb83142
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 14 13:17:27 2022 +0200

    Style payment + summary cards in order, style summary card

commit e4bdd44beea265899dbc70db6470ca9307becb5b
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 13 15:25:54 2022 +0200

    Add payments to order query, add more Storybook cases for orders

commit 67dc47d5c19125442f1cf954b9b7d4b4e7d3eff7
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 13 10:53:26 2022 +0200

    Add new OrderPayment card

commit 093490a01bff3fd7aaaac270d74742a22e0b8885
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 14:46:35 2022 +0200

    Refactor OrderPayment -> OrderSummaryCard

commit 7eb73e2650d9602ef635a4b6b8a4aefd4ad89730
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 10:51:05 2022 +0200

    Split payments - transactions list (#2234)

    * Don't hide transaction balance when order is not confirmed

    * Add order transactions component

    * Fix IMoney to use new import

    * Fix conditional display logic, add story for long numbers

    * Fix alignment when amount is <10

    * Add transaction events

    * Use Intl.DateTimeFormat to format dates instead of moment.js

    * Fix transactions list table layout

    * Update macaw to unreleased version

    * Highlight rows that have the same pspReference on hover

    * Fix spacing between transactions

    * Fix transaction events list when no pspReference is provided

    * Update messages

    * Update snapshots

    * Add copy feature to psp reference pill

    * Add buttons to void or capture transactions

    * Update prettier to latest version (TS syntax parsing issues)

    * Add parameter to clear additional params in modals

    * Fix PSP reference sizing issues

    * Fix transactions table sizing on `md` screen sizing

    * Update snapshots, fix inline styles in PSP reference

    * Fix order saved when copying PSP reference

    * Add copy icon to PspReference

    * Update snapshots

    * Update messages

    * Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

    * Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

    * Refactor PR comments

    * Remove !important from styles

    * Fix failing prettier check

    * Update messages

    * Fix formatting

    * Replace custom styles with Typography component

    * Remove too long font size

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

commit 6818c88b5b26be901ec56fae3302d5ba7b5fa504
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:22:47 2022 +0200

    Update lockfile

commit 9046b5f56cc293516e578c527abda4a30a66b079
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:20:50 2022 +0200

    Update GraphQL schema

* SALEOR-7904: Split payments - Grant refund #2336

commit 4681481fc163683936a53fa8436a0eecad26f9c1
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Nov 2 16:49:45 2022 +0100

    Update snapshots

commit 0831c4f75670009bc0a17fe1e9dae94646927866
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Nov 2 15:24:43 2022 +0100

    Pin macaw version

commit b588948fa260509c5e13362b48f72d277897f7bb
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Oct 17 17:31:53 2022 +0200

    Fix refund card not working while loading

commit fccd15c73b40231423e544256541ddc4ebc4b37a
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 15:23:39 2022 +0200

    Add exhaustiveness check to switch...case statemet

commit 62e6c03b02bea5c2fb785e9cccbaf024b4ffa6cb
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 14:09:31 2022 +0200

    Remove USD as default currency

commit 586f91a6c87375544223dc666e1a358cbd3c814c
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 14:08:30 2022 +0200

    Refactor ProductCard event handlers into separate functions

commit 8b242905c7b787102ef764adc5f574ab3e9c77de
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 14:05:35 2022 +0200

    Refactor fulfilment subtitle into helper function

commit 1cdba397497e59aa89d2d4fb05816631e69f0ef6
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 14:01:05 2022 +0200

    Refactor payments summary logic

commit 5ca4709d3e902186005901f1ee68c3cb2b80df64
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 13:10:58 2022 +0200

    Refactor iterator spread to Array.from for more readability

commit d47098ce8cdc0c8ec6b7f49e5a7476cfebde62b7
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Oct 7 10:52:59 2022 +0200

    Update snapshots, messages

commit 53228797377f7dfeb830eb2e7176ea70c4dd3fec
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 16:33:09 2022 +0200

    Refactor ProductCard to use TableRowLink

commit f08d2c717a04a4e45a59b0d80b95f7b949f3ebb1
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 16:32:49 2022 +0200

    Disable hover effect when TableRow is not clickable

commit 0a7c75223e0a7c4cf7e01eb6e3d6644090be8b08
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 15:52:05 2022 +0200

    Refactor payments summary line into separate component

commit e2bc2ec506e5045d08560c6105685665820830de
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 15:41:49 2022 +0200

    Show granted, pending and refunded amounts

commit f9a47a4c7c48e479f4748d4bf8d373d2d1e6d3ea
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 15:18:33 2022 +0200

    Fix selected refund value calculated to NaN

commit 43bd259208359d1c2862c5493a16758de6970430
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 15:16:41 2022 +0200

    Don't prefill refund amount, disable submit when amount is 0

commit 41d461a40b09723f880200796eab4c6a0895969f
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 14:14:55 2022 +0200

    Remove warning text in Refund Card

commit 14cd616fdd8b6ae93b4563c87af33adf4b86c922
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Oct 6 14:13:54 2022 +0200

    Fix spacing in the Refund Card

commit 825bd16752795749fba20043772b3b862005da49
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 17:13:55 2022 +0200

    Update snapshots

commit 74427bb29a44cba6cb2c9b8d8db9997cfa6dd68b
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 16:59:06 2022 +0200

    Update messages

commit ddc6f8d09ecf82763c9ab3b4e9ed282863a5c970
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 16:52:36 2022 +0200

    redeploy

commit ee6341347ba95e06e18760a40b1c9aa03a0794a4
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 16:47:02 2022 +0200

    Improve loading state of grant refund view, add input labels

commit 186caa1d243c2c9a92b4badb99a07f8275d61000
Merge: 319f2094b d21e75ead
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 16:17:57 2022 +0200

    Merge branch 'feature/split-payments' into split-payments/grant-refund

commit d21e75ead0a9222c3ab7884b73c00c652a605ea4
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Oct 5 14:35:00 2022 +0200

    SALEOR-7901: Split payments - order summary and payments balance (#2310)

    * Update GraphQL schema

    * Update lockfile

    * Split payments - transactions list (#2234)

    * Don't hide transaction balance when order is not confirmed

    * Add order transactions component

    * Fix IMoney to use new import

    * Fix conditional display logic, add story for long numbers

    * Fix alignment when amount is <10

    * Add transaction events

    * Use Intl.DateTimeFormat to format dates instead of moment.js

    * Fix transactions list table layout

    * Update macaw to unreleased version

    * Highlight rows that have the same pspReference on hover

    * Fix spacing between transactions

    * Fix transaction events list when no pspReference is provided

    * Update messages

    * Update snapshots

    * Add copy feature to psp reference pill

    * Add buttons to void or capture transactions

    * Update prettier to latest version (TS syntax parsing issues)

    * Add parameter to clear additional params in modals

    * Fix PSP reference sizing issues

    * Fix transactions table sizing on `md` screen sizing

    * Update snapshots, fix inline styles in PSP reference

    * Fix order saved when copying PSP reference

    * Add copy icon to PspReference

    * Update snapshots

    * Update messages

    * Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

    * Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

    * Refactor PR comments

    * Remove !important from styles

    * Fix failing prettier check

    * Update messages

    * Fix formatting

    * Replace custom styles with Typography component

    * Remove too long font size

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

    * Refactor OrderPayment -> OrderSummaryCard

    * Add new OrderPayment card

    * Add payments to order query, add more Storybook cases for orders

    * Style payment + summary cards in order, style summary card

    * Fix logic of showing / hiding capture & authorize amounts

    * Add "Mark as paid" / Add transaction button

    * Fix order details page when loading

    * Fix logic for displaying "Mark as paid" button

    * Display gift cards as transactions in order details

    * Remove gift card from OrderSummaryCard

    * Add gift card Storybook example, fix spacing between OrderTransaction

    * Add payments displayed as transactions in order details

    * Add Stories for payments in order, fix edge cases for payments

    * Hide grant refund and send refund when there is no payment

    * Simplify OrderAddTransaction button

    * Remove order level actions, move buttons to payment level

    * Filter out payments that are inactive and don't contain any transaction

    * Handle gift cards edge case: lowered total amount

    * Display message in payment card when there are no transactions

    * Improve loading layout

    * Fix story - gift card

    * Update messages

    * Update snapshots

    * Fix TS errors

    * force deploy

    * Fix "Copied" text doesn't fit on short psp reference

    * Hide "no payment" text when order has gift cards

    * Apply suggestions from code review

    Co-authored-by: Dawid <tarasiukdawid@gmail.com>

    * Apply suggestions from code review

    * Refactor tax amount turnary operator expression

    * Refactor inlined functions to separate file

    * update snapshots

    Co-authored-by: Michał Droń <dron.official@yahoo.com>
    Co-authored-by: Dawid <tarasiukdawid@gmail.com>

commit 90c55d5775e7acdbbe0dc75014effa09776bae8e
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 10:51:05 2022 +0200

    Split payments - transactions list (#2234)

    * Don't hide transaction balance when order is not confirmed

    * Add order transactions component

    * Fix IMoney to use new import

    * Fix conditional display logic, add story for long numbers

    * Fix alignment when amount is <10

    * Add transaction events

    * Use Intl.DateTimeFormat to format dates instead of moment.js

    * Fix transactions list table layout

    * Update macaw to unreleased version

    * Highlight rows that have the same pspReference on hover

    * Fix spacing between transactions

    * Fix transaction events list when no pspReference is provided

    * Update messages

    * Update snapshots

    * Add copy feature to psp reference pill

    * Add buttons to void or capture transactions

    * Update prettier to latest version (TS syntax parsing issues)

    * Add parameter to clear additional params in modals

    * Fix PSP reference sizing issues

    * Fix transactions table sizing on `md` screen sizing

    * Update snapshots, fix inline styles in PSP reference

    * Fix order saved when copying PSP reference

    * Add copy icon to PspReference

    * Update snapshots

    * Update messages

    * Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

    * Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

    * Refactor PR comments

    * Remove !important from styles

    * Fix failing prettier check

    * Update messages

    * Fix formatting

    * Replace custom styles with Typography component

    * Remove too long font size

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

commit 319f2094bb5f61be7de3d1f329a04d7556aaa9c6
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Oct 5 10:47:13 2022 +0200

    Add edit grant refund view

commit f01a0692308030466260f54a372f57a272ff7d6a
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Tue Oct 4 12:58:44 2022 +0200

    Fix form leave confirm dialog

commit e3844037a67577a5b6407a65df4a20c58fca8835
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Tue Oct 4 10:40:42 2022 +0200

    Handle form submission

commit a7472a526fb5ba869bca03b418242cab6cc33036
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Mon Oct 3 15:57:35 2022 +0200

    Write query for grant refund view, add product card

commit 9942a125458f4185cce6c6338b1f28f505792c82
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Sep 30 17:01:19 2022 +0200

    Calculate shipping cost, refactor refund card into component

commit 351901c3072450b98bde03d45eba119336b3cb2a
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 30 15:07:42 2022 +0200

    Add grant refund form and price calculation logic

commit b19854d8ef77fc3449e041986008799b63c4ba21
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Sep 28 15:49:21 2022 +0200

    Add grant refund create mutation

commit df0ad7c78d75ea38ee6349f226c573f833c53800
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Wed Sep 28 15:49:01 2022 +0200

    Add OrderGrantRefundPage

commit afc496add5038224e4a971bcaadfc60a5a17bd10
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Tue Sep 27 15:58:17 2022 +0200

    Add granted refunds list

commit 3d78fbf28318733b71c423e0e0f359d85002bf07
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Mon Sep 26 13:37:48 2022 +0200

    Add grant refund to order query

commit b97d93d8930cb2063772bace0ad5c779852a5c5c
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:08:27 2022 +0200

    Fix TS errors

commit b679bc91b670661c205ed2bd9c5b209d777173cc
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:00:35 2022 +0200

    Update snapshots

commit a6f3d3c50a46325011bba242b431cbf3cb81ac8b
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:00:21 2022 +0200

    Update messages

commit 99ec7ca736666b669eb215e463362fd2fe27c690
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 16:00:08 2022 +0200

    Fix story - gift card

commit 3c254dce2386dcbe544810948a86c5cf128d4cb4
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 15:34:07 2022 +0200

    Improve loading layout

commit b1adf9d580d39b3301a8f56d0677a5ccf9608126
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 15:05:37 2022 +0200

    Display message in payment card when there are no transactions

commit e9bb8b22a95c7e2416ed5e457db7cbddc004fa3d
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 14:11:35 2022 +0200

    Handle gift cards edge case: lowered total amount

commit 115f56fb6f9e44f7f8bbec84d110a8e1c2af47d2
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Fri Sep 23 13:56:41 2022 +0200

    Filter out payments that are inactive and don't contain any transaction

commit e790aadca2a13fcccb8bb3a3c52967b90856c3e4
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:57:24 2022 +0200

    Remove order level actions, move buttons to payment level

commit fd4a158c5aba32f4a7ed31daa54bc37274d1cdbe
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:31:23 2022 +0200

    Simplify OrderAddTransaction button

commit 6b298357933033df42745d6db465617963b181d6
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:26:40 2022 +0200

    Hide grant refund and send refund when there is no payment

commit b3c6532d299932bceafcbe48b06aaaf693dc21be
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 16:14:10 2022 +0200

    Add Stories for payments in order, fix edge cases for payments

commit 2db8efe628df5c647d36f2b97a48a40bd7c98eaf
Author: Jonatan Witoszek <jonatan.witoszek@saleor.io>
Date:   Thu Sep 22 14:46:54 2022 +0200

    Add payments displayed as transactions in order details

commit 3751cbf4fecf22c6624d39ca894190abb77363a6
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 21 14:03:42 2022 +0200

    Add gift card Storybook example, fix spacing between OrderTransaction

commit 77a1647c0c7afe38298778372cace06e2dc428fb
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 20 17:00:18 2022 +0200

    Remove gift card from OrderSummaryCard

commit 85a4894d28d88c386a9b61fe09b517ac7ff8ad60
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 20 16:58:25 2022 +0200

    Display gift cards as transactions in order details

commit 1e36a176bab8c57c527f5e19ae05e46cf0cefa03
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 15 14:13:47 2022 +0200

    Fix logic for displaying "Mark as paid" button

commit 5aeca84a40c8d0a6df03315b56e48dcc1fc39cab
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 15 13:18:24 2022 +0200

    Fix order details page when loading

commit a6dc8f13ded5a4d7f5bf0b0778bb52c31b97028f
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Thu Sep 15 13:11:50 2022 +0200

    Add "Mark as paid" / Add transaction button

commit 7ad01b66dc4b639ae24bbc58a4364eee89e4cf4c
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 14 16:52:38 2022 +0200

    Fix logic of showing / hiding capture & authorize amounts

commit b4328e4cbf09290f5d1a29ecc3ca88f33fb83142
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Wed Sep 14 13:17:27 2022 +0200

    Style payment + summary cards in order, style summary card

commit e4bdd44beea265899dbc70db6470ca9307becb5b
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 13 15:25:54 2022 +0200

    Add payments to order query, add more Storybook cases for orders

commit 67dc47d5c19125442f1cf954b9b7d4b4e7d3eff7
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Tue Sep 13 10:53:26 2022 +0200

    Add new OrderPayment card

commit 093490a01bff3fd7aaaac270d74742a22e0b8885
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 14:46:35 2022 +0200

    Refactor OrderPayment -> OrderSummaryCard

commit 7eb73e2650d9602ef635a4b6b8a4aefd4ad89730
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Mon Sep 12 10:51:05 2022 +0200

    Split payments - transactions list (#2234)

    * Don't hide transaction balance when order is not confirmed

    * Add order transactions component

    * Fix IMoney to use new import

    * Fix conditional display logic, add story for long numbers

    * Fix alignment when amount is <10

    * Add transaction events

    * Use Intl.DateTimeFormat to format dates instead of moment.js

    * Fix transactions list table layout

    * Update macaw to unreleased version

    * Highlight rows that have the same pspReference on hover

    * Fix spacing between transactions

    * Fix transaction events list when no pspReference is provided

    * Update messages

    * Update snapshots

    * Add copy feature to psp reference pill

    * Add buttons to void or capture transactions

    * Update prettier to latest version (TS syntax parsing issues)

    * Add parameter to clear additional params in modals

    * Fix PSP reference sizing issues

    * Fix transactions table sizing on `md` screen sizing

    * Update snapshots, fix inline styles in PSP reference

    * Fix order saved when copying PSP reference

    * Add copy icon to PspReference

    * Update snapshots

    * Update messages

    * Fix typo

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

    * Revert "Update prettier to latest version (TS syntax parsing issues)"

    This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

    * Refactor PR comments

    * Remove !important from styles

    * Fix failing prettier check

    * Update messages

    * Fix formatting

    * Replace custom styles with Typography component

    * Remove too long font size

    Co-authored-by: Michał Droń <dron.official@yahoo.com>

commit 6818c88b5b26be901ec56fae3302d5ba7b5fa504
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:22:47 2022 +0200

    Update lockfile

commit 9046b5f56cc293516e578c527abda4a30a66b079
Author: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date:   Fri Aug 12 17:20:50 2022 +0200

    Update GraphQL schema

* Fix TS issues

* Fix EditorJS TS issues

* Fix Apollo & apollo-upload-client type mismatch

* SALEOR-7900 - Grant refund: Send refund view (#2359)

* Update GraphQL schema

* Update lockfile

* Split payments - transactions list (#2234)

* Don't hide transaction balance when order is not confirmed

* Add order transactions component

* Fix IMoney to use new import

* Fix conditional display logic, add story for long numbers

* Fix alignment when amount is <10

* Add transaction events

* Use Intl.DateTimeFormat to format dates instead of moment.js

* Fix transactions list table layout

* Update macaw to unreleased version

* Highlight rows that have the same pspReference on hover

* Fix spacing between transactions

* Fix transaction events list when no pspReference is provided

* Update messages

* Update snapshots

* Add copy feature to psp reference pill

* Add buttons to void or capture transactions

* Update prettier to latest version (TS syntax parsing issues)

* Add parameter to clear additional params in modals

* Fix PSP reference sizing issues

* Fix transactions table sizing on `md` screen sizing

* Update snapshots, fix inline styles in PSP reference

* Fix order saved when copying PSP reference

* Add copy icon to PspReference

* Update snapshots

* Update messages

* Fix typo

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Revert "Update prettier to latest version (TS syntax parsing issues)"

This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

* Refactor PR comments

* Remove !important from styles

* Fix failing prettier check

* Update messages

* Fix formatting

* Replace custom styles with Typography component

* Remove too long font size

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Refactor OrderPayment -> OrderSummaryCard

* Add new OrderPayment card

* Add payments to order query, add more Storybook cases for orders

* Style payment + summary cards in order, style summary card

* Fix logic of showing / hiding capture & authorize amounts

* Add "Mark as paid" / Add transaction button

* Fix order details page when loading

* Fix logic for displaying "Mark as paid" button

* Display gift cards as transactions in order details

* Remove gift card from OrderSummaryCard

* Add gift card Storybook example, fix spacing between OrderTransaction

* Add payments displayed as transactions in order details

* Add Stories for payments in order, fix edge cases for payments

* Hide grant refund and send refund when there is no payment

* Simplify OrderAddTransaction button

* Remove order level actions, move buttons to payment level

* Filter out payments that are inactive and don't contain any transaction

* Handle gift cards edge case: lowered total amount

* Display message in payment card when there are no transactions

* Improve loading layout

* Fix story - gift card

* Update messages

* Update snapshots

* Fix TS errors

* Add grant refund to order query

* Add granted refunds list

* Add OrderGrantRefundPage

* Add grant refund create mutation

* Add grant refund form and price calculation logic

* Calculate shipping cost, refactor refund card into component

* Write query for grant refund view, add product card

* Handle form submission

* Fix form leave confirm dialog

* Add edit grant refund view

* Split payments - transactions list (#2234)

* Don't hide transaction balance when order is not confirmed

* Add order transactions component

* Fix IMoney to use new import

* Fix conditional display logic, add story for long numbers

* Fix alignment when amount is <10

* Add transaction events

* Use Intl.DateTimeFormat to format dates instead of moment.js

* Fix transactions list table layout

* Update macaw to unreleased version

* Highlight rows that have the same pspReference on hover

* Fix spacing between transactions

* Fix transaction events list when no pspReference is provided

* Update messages

* Update snapshots

* Add copy feature to psp reference pill

* Add buttons to void or capture transactions

* Update prettier to latest version (TS syntax parsing issues)

* Add parameter to clear additional params in modals

* Fix PSP reference sizing issues

* Fix transactions table sizing on `md` screen sizing

* Update snapshots, fix inline styles in PSP reference

* Fix order saved when copying PSP reference

* Add copy icon to PspReference

* Update snapshots

* Update messages

* Fix typo

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Revert "Update prettier to latest version (TS syntax parsing issues)"

This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

* Refactor PR comments

* Remove !important from styles

* Fix failing prettier check

* Update messages

* Fix formatting

* Replace custom styles with Typography component

* Remove too long font size

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* SALEOR-7901: Split payments - order summary and payments balance (#2310)

* Update GraphQL schema

* Update lockfile

* Split payments - transactions list (#2234)

* Don't hide transaction balance when order is not confirmed

* Add order transactions component

* Fix IMoney to use new import

* Fix conditional display logic, add story for long numbers

* Fix alignment when amount is <10

* Add transaction events

* Use Intl.DateTimeFormat to format dates instead of moment.js

* Fix transactions list table layout

* Update macaw to unreleased version

* Highlight rows that have the same pspReference on hover

* Fix spacing between transactions

* Fix transaction events list when no pspReference is provided

* Update messages

* Update snapshots

* Add copy feature to psp reference pill

* Add buttons to void or capture transactions

* Update prettier to latest version (TS syntax parsing issues)

* Add parameter to clear additional params in modals

* Fix PSP reference sizing issues

* Fix transactions table sizing on `md` screen sizing

* Update snapshots, fix inline styles in PSP reference

* Fix order saved when copying PSP reference

* Add copy icon to PspReference

* Update snapshots

* Update messages

* Fix typo

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Revert "Update prettier to latest version (TS syntax parsing issues)"

This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

* Refactor PR comments

* Remove !important from styles

* Fix failing prettier check

* Update messages

* Fix formatting

* Replace custom styles with Typography component

* Remove too long font size

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Refactor OrderPayment -> OrderSummaryCard

* Add new OrderPayment card

* Add payments to order query, add more Storybook cases for orders

* Style payment + summary cards in order, style summary card

* Fix logic of showing / hiding capture & authorize amounts

* Add "Mark as paid" / Add transaction button

* Fix order details page when loading

* Fix logic for displaying "Mark as paid" button

* Display gift cards as transactions in order details

* Remove gift card from OrderSummaryCard

* Add gift card Storybook example, fix spacing between OrderTransaction

* Add payments displayed as transactions in order details

* Add Stories for payments in order, fix edge cases for payments

* Hide grant refund and send refund when there is no payment

* Simplify OrderAddTransaction button

* Remove order level actions, move buttons to payment level

* Filter out payments that are inactive and don't contain any transaction

* Handle gift cards edge case: lowered total amount

* Display message in payment card when there are no transactions

* Improve loading layout

* Fix story - gift card

* Update messages

* Update snapshots

* Fix TS errors

* force deploy

* Fix "Copied" text doesn't fit on short psp reference

* Hide "no payment" text when order has gift cards

* Apply suggestions from code review

Co-authored-by: Dawid <tarasiukdawid@gmail.com>

* Apply suggestions from code review

* Refactor tax amount turnary operator expression

* Refactor inlined functions to separate file

* update snapshots

Co-authored-by: Michał Droń <dron.official@yahoo.com>
Co-authored-by: Dawid <tarasiukdawid@gmail.com>

* Improve loading state of grant refund view, add input labels

* redeploy

* Update messages

* Update snapshots

* Fix spacing in the Refund Card

* Remove warning text in Refund Card

* Don't prefill refund amount, disable submit when amount is 0

* Fix selected refund value calculated to NaN

* Show granted, pending and refunded amounts

* Refactor payments summary line into separate component

* Disable hover effect when TableRow is not clickable

* Refactor ProductCard to use TableRowLink

* Update snapshots, messages

* Refactor iterator spread to Array.from for more readability

* Refactor payments summary logic

* Refactor fulfilment subtitle into helper function

* Refactor ProductCard event handlers into separate functions

* Remove USD as default currency

* Add exhaustiveness check to switch...case statemet

* Update snapshots, messages

* Add new page [wip]

* Fix refund card not working while loading

* Add new page [wip]

* Refactor order transaction component structure

* [WIP] Send refund page

* Add button to set max amount of refund

* Update GraphQL schema

* Update components after changing GraphQL schema

* Add manual refunds

* Disable refunds when transaction doesn't have appropriate actions

* Update macaw

* Update messages

* Update snapshots

* SALEOR-7904: Split payments - Grant refund (#2336)

* Update GraphQL schema

* Update lockfile

* Split payments - transactions list (#2234)

* Don't hide transaction balance when order is not confirmed

* Add order transactions component

* Fix IMoney to use new import

* Fix conditional display logic, add story for long numbers

* Fix alignment when amount is <10

* Add transaction events

* Use Intl.DateTimeFormat to format dates instead of moment.js

* Fix transactions list table layout

* Update macaw to unreleased version

* Highlight rows that have the same pspReference on hover

* Fix spacing between transactions

* Fix transaction events list when no pspReference is provided

* Update messages

* Update snapshots

* Add copy feature to psp reference pill

* Add buttons to void or capture transactions

* Update prettier to latest version (TS syntax parsing issues)

* Add parameter to clear additional params in modals

* Fix PSP reference sizing issues

* Fix transactions table sizing on `md` screen sizing

* Update snapshots, fix inline styles in PSP reference

* Fix order saved when copying PSP reference

* Add copy icon to PspReference

* Update snapshots

* Update messages

* Fix typo

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Revert "Update prettier to latest version (TS syntax parsing issues)"

This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

* Refactor PR comments

* Remove !important from styles

* Fix failing prettier check

* Update messages

* Fix formatting

* Replace custom styles with Typography component

* Remove too long font size

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Refactor OrderPayment -> OrderSummaryCard

* Add new OrderPayment card

* Add payments to order query, add more Storybook cases for orders

* Style payment + summary cards in order, style summary card

* Fix logic of showing / hiding capture & authorize amounts

* Add "Mark as paid" / Add transaction button

* Fix order details page when loading

* Fix logic for displaying "Mark as paid" button

* Display gift cards as transactions in order details

* Remove gift card from OrderSummaryCard

* Add gift card Storybook example, fix spacing between OrderTransaction

* Add payments displayed as transactions in order details

* Add Stories for payments in order, fix edge cases for payments

* Hide grant refund and send refund when there is no payment

* Simplify OrderAddTransaction button

* Remove order level actions, move buttons to payment level

* Filter out payments that are inactive and don't contain any transaction

* Handle gift cards edge case: lowered total amount

* Display message in payment card when there are no transactions

* Improve loading layout

* Fix story - gift card

* Update messages

* Update snapshots

* Fix TS errors

* Add grant refund to order query

* Add granted refunds list

* Add OrderGrantRefundPage

* Add grant refund create mutation

* Add grant refund form and price calculation logic

* Calculate shipping cost, refactor refund card into component

* Write query for grant refund view, add product card

* Handle form submission

* Fix form leave confirm dialog

* Add edit grant refund view

* Improve loading state of grant refund view, add input labels

* redeploy

* Update messages

* Update snapshots

* Fix spacing in the Refund Card

* Remove warning text in Refund Card

* Don't prefill refund amount, disable submit when amount is 0

* Fix selected refund value calculated to NaN

* Show granted, pending and refunded amounts

* Refactor payments summary line into separate component

* Disable hover effect when TableRow is not clickable

* Refactor ProductCard to use TableRowLink

* Update snapshots, messages

* Refactor iterator spread to Array.from for more readability

* Refactor payments summary logic

* Refactor fulfilment subtitle into helper function

* Refactor ProductCard event handlers into separate functions

* Remove USD as default currency

* Add exhaustiveness check to switch...case statemet

* Fix refund card not working while loading

* Pin macaw version

* Update snapshots

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Remove OrderRefund view

* Update messages

* Split payments - transactions list (#2234)

* Don't hide transaction balance when order is not confirmed

* Add order transactions component

* Fix IMoney to use new import

* Fix conditional display logic, add story for long numbers

* Fix alignment when amount is <10

* Add transaction events

* Use Intl.DateTimeFormat to format dates instead of moment.js

* Fix transactions list table layout

* Update macaw to unreleased version

* Highlight rows that have the same pspReference on hover

* Fix spacing between transactions

* Fix transaction events list when no pspReference is provided

* Update messages

* Update snapshots

* Add copy feature to psp reference pill

* Add buttons to void or capture transactions

* Update prettier to latest version (TS syntax parsing issues)

* Add parameter to clear additional params in modals

* Fix PSP reference sizing issues

* Fix transactions table sizing on `md` screen sizing

* Update snapshots, fix inline styles in PSP reference

* Fix order saved when copying PSP reference

* Add copy icon to PspReference

* Update snapshots

* Update messages

* Fix typo

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Revert "Update prettier to latest version (TS syntax parsing issues)"

This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

* Refactor PR comments

* Remove !important from styles

* Fix failing prettier check

* Update messages

* Fix formatting

* Replace custom styles with Typography component

* Remove too long font size

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* SALEOR-7901: Split payments - order summary and payments balance (#2310)

* Update GraphQL schema

* Update lockfile

* Split payments - transactions list (#2234)

* Don't hide transaction balance when order is not confirmed

* Add order transactions component

* Fix IMoney to use new import

* Fix conditional display logic, add story for long numbers

* Fix alignment when amount is <10

* Add transaction events

* Use Intl.DateTimeFormat to format dates instead of moment.js

* Fix transactions list table layout

* Update macaw to unreleased version

* Highlight rows that have the same pspReference on hover

* Fix spacing between transactions

* Fix transaction events list when no pspReference is provided

* Update messages

* Update snapshots

* Add copy feature to psp reference pill

* Add buttons to void or capture transactions

* Update prettier to latest version (TS syntax parsing issues)

* Add parameter to clear additional params in modals

* Fix PSP reference sizing issues

* Fix transactions table sizing on `md` screen sizing

* Update snapshots, fix inline styles in PSP reference

* Fix order saved when copying PSP reference

* Add copy icon to PspReference

* Update snapshots

* Update messages

* Fix typo

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Revert "Update prettier to latest version (TS syntax parsing issues)"

This reverts commit 5784b47ee20e8d77d8ebf63557769fa27b9a2562.

* Refactor PR comments

* Remove !important from styles

* Fix failing prettier check

* Update messages

* Fix formatting

* Replace custom styles with Typography component

* Remove too long font size

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Refactor OrderPayment -> OrderSummaryCard

* Add new OrderPayment card

* Add payments to order query, add more Storybook cases for orders

* Style payment + summary cards in order, style summary card

* Fix logic of showing / hiding capture & authorize amounts

* Add "Mark as paid" / Add transaction button

* Fix order details page when loading

* Fix logic for displaying "Mark as paid" button

* Display gift cards as transactions in order details

* Remove gift card from OrderSummaryCard

* Add gift card Storybook example, fix spacing between OrderTransaction

* Add payments displayed as transactions in order details

* Add Stories for payments in order, fix edge cases for payments

* Hide grant refund and send refund when there is no payment

* Simplify OrderAddTransaction button

* Remove order level actions, move buttons to payment level

* Filter out payments that are inactive and don't contain any transaction

* Handle gift cards edge case: lowered total amount

* Display message in payment card when there are no transactions

* Improve loading layout

* Fix story - gift card

* Update messages

* Update snapshots

* Fix TS errors

* force deploy

* Fix "Copied" text doesn't fit on short psp reference

* Hide "no payment" text when order has gift cards

* Apply suggestions from code review

Co-authored-by: Dawid <tarasiukdawid@gmail.com>

* Apply suggestions from code review

* Refactor tax amount turnary operator expression

* Refactor inlined functions to separate file

* update snapshots

Co-authored-by: Michał Droń <dron.official@yahoo.com>
Co-authored-by: Dawid <tarasiukdawid@gmail.com>

* Fix types after merge

* Remove comment

* Refactor common messages

* Refactor inline formatted message

* Resolve CR

* Update src/utils/errors/transaction.ts

Co-authored-by: Michał Droń <dron.official@yahoo.com>

* Refactor money format function

* Fix EditorJS TS issues

* Fix Apollo & apollo-upload-client type mismatch

* Add loading state to OrderSendRefund

* Fix messages

* Fix storybook not building

* Fix stories, update snapshots, fix currency formatting

Co-authored-by: Michał Droń <dron.official@yahoo.com>
Co-authored-by: Dawid <tarasiukdawid@gmail.com>

* Fix grant refund page not loading

* Replace classnames with clsx

* Add missing fields to transactions list, new psp reference design (#2769)

* Add modal to create manual capture transactions in OrderDetails (#2880)

* Add manual capture transaction mutation

* Add manual transaction capture modal

* Refactor common elements of manual transaction into shared component

* Rewrite OrderManualTransactionForm to export form components separately

* Add tests for OrderManualTransactionForm hook

* Add tests to OrderManualTransactionForm Form component

* Fix polly recording ids, read replay / record config from env vars

* Add missing messages

* Remove refund functionality in Return & Replace (#2876)

* Refactor messages

* Remove old compoennts related to return + refund functionality

* Refactor return & replace internal components structure

* Add new submit card to OrderReturn

* Replace onRefundPayment with href

* add missing test

* Update messages

* Fix TS errors after merge

* Update imports @saleor -> @dashboard

* Update dashboard OrderDetails after changes in core (#2933)

* Fix TS errors after merge

* Update transaction events to use new `type` field

* Remove unused styles

* Fix table row hover effect

* Update messages

* Add "createdBy" to order transaction fixtures

* Add "createdBy" to TransactionEvent list

* Fix crash when transaction event has invalid data

* Add styles for PspReference link

* Update messages

* Add no events message to transaction events list

* Add PSP Reference field to manual transactions, update mutations

* Remove hiding from add manual transaction button

* Fix styling of ManualRefundCard

* Fix TS error

* Rename OrderPayment -> OrderPaymentSummaryCard

* Add pending amounts to OrderPaymentSummaryCard

* Refactor PaymentsSummary

* Add tests for OrderAddTransaction

* Extract messages

* Add tests for PaymentSummary calculation

* Add tests to EventCreatedBy

* Add tests to EventItem

* Add tests for transaction event status mapping

* Fix TS error

* Update schema

* Add missing fields to TransactionItem fragment

* Add missing fields to OrderTransaction

* fixup! Update schema

* Fix CR comments

* Update imports @saleor -> @dashboard, fix types

* Fix CR comments

* Fix Jest wrong timezone when run locally

* Fix EventItem test using invalid date

* Add feature flags to split payments PR (#3044)

* Remove transactions related changes from GraphQL files

* Fix issues with build-types, when feature flags are used

* Generate transactions only GraphQL files

* Update GraphQL imports

* Fix issue with dependencies

* Restore deleted views

* Add feature flags to OrderReturn

* Add feature flags to OrderSendRefund

* Add feature flag to OrderDetailsPage

* Add feature flag check in new order routes

* Update messages

* Fix TS error

* Add tests for OrderPaymentOrTransaction

* Update schema

* Use different query for order when FF is enabled

* Fix failing CI

* Fix CR

* fixup! Merge branch 'feature/split-payments' into split-payments/feature-flag

* Regenerate types after merge

* Transactions small fixes (#3110)

* Fix transaction action modal not closing on scucess

* Fix layout shift on OrderSendRefund

* Update schema behind feature flag

* Update types

* Add missing props

* Fix order event types

* Update OrderDetails to fix spacing in new macaw redesign

* Update GrantRefund page with new pages layout

* Update SendRefundPage with new page layout

* Update transactions feature flag schema

* Rollback fetch-schema to default values

* Add opacity to transactions that cannot be refunded

* Fix return & replace button message

* Add missing messages

* Add tooltip with event message

* Add missing status: info for transaction events

* Add markAsPaidStrategy configuration to ChannelDetails (#3239)

* Fix fulfilment titles, use the same text from OrderDetails

* Add back old payments UI (#3238)

* Remove Refund button from fulfilments in order with transactions

* Show old payments UI if order has payments

* Respect channel's markAsPaidStrategy when displaying new UI

* Rename onPaymentPaid to onMarkAsPaid prop

* Update messages

* CR

* Update snapshotsUpdate snapshotsUpdate snapshotsUpdate snapshotsUpdate
snapshotsUpdate snapshotsUpdate snapshotsUpdate snapshotsUpdate
snapshots

* Resolve TS errors

* Fetch transaction ids in old order query to fix detection

* run e2e

* fix test should be able to update shipping zone. TC: SALEOR_0808

* CR: Remove funny comment

---------

Co-authored-by: Michał Droń <dron.official@yahoo.com>
Co-authored-by: Dawid <tarasiukdawid@gmail.com>
Co-authored-by: Anna Szczech <anna.m.szczech@gmail.com>
This commit is contained in:
Jonatan Witoszek 2023-03-09 16:51:19 +01:00 committed by GitHub
parent 2391491d59
commit 2532426c20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
256 changed files with 191543 additions and 5562 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118926
introspection.transactions.json Normal file
View file

File diff suppressed because it is too large Load diff

499
locale/defaultMessages.json
View file

File diff suppressed because it is too large Load diff

18472
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
package.json
View file

@ -46,6 +46,7 @@
"color-convert": "^2.0.1", "color-convert": "^2.0.1",
"crc-32": "^1.2.0", "crc-32": "^1.2.0",
"currency-codes": "^2.1.0", "currency-codes": "^2.1.0",
"currency.js": "^2.0.4",
"downshift": "^6.1.7", "downshift": "^6.1.7",
"editorjs-inline-tool": "^0.4.0", "editorjs-inline-tool": "^0.4.0",
"faker": "^5.1.0", "faker": "^5.1.0",
@ -117,9 +118,9 @@
"@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10", "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.10",
"@graphql-codegen/typescript-operations": "^2.2.4", "@graphql-codegen/typescript-operations": "^2.2.4",
"@graphql-codegen/typescript-react-apollo": "^3.2.5", "@graphql-codegen/typescript-react-apollo": "^3.2.5",
"@pollyjs/adapter-node-http": "^5.0.0", "@pollyjs/adapter-node-http": "~5.0.0",
"@pollyjs/core": "^5.0.0", "@pollyjs/core": "~5.0.0",
"@pollyjs/persister-fs": "^5.0.0", "@pollyjs/persister-fs": "~5.0.0",
"@release-it/bumper": "^2.0.0", "@release-it/bumper": "^2.0.0",
"@saleor/app-sdk": "~0.27.0", "@saleor/app-sdk": "~0.27.0",
"@types/apollo-upload-client": "^17.0.0", "@types/apollo-upload-client": "^17.0.0",
@ -127,6 +128,7 @@
"@types/fuzzaldrin": "^2.1.2", "@types/fuzzaldrin": "^2.1.2",
"@types/is-ci": "^3.0.0", "@types/is-ci": "^3.0.0",
"@types/jscodeshift": "^0.11.3", "@types/jscodeshift": "^0.11.3",
"@types/lodash-es": "^4.17.3",
"@types/pollyjs__adapter-node-http": "^2.0.1", "@types/pollyjs__adapter-node-http": "^2.0.1",
"@types/pollyjs__persister-fs": "^2.0.1", "@types/pollyjs__persister-fs": "^2.0.1",
"@types/react": "^17.0.50", "@types/react": "^17.0.50",
@ -145,10 +147,12 @@
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.5.1", "babel-jest": "^27.5.1",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"ci-info": "^3.7.0",
"codecov": "^3.7.1", "codecov": "^3.7.1",
"core-js": "^3.7.0", "core-js": "^3.7.0",
"cross-env": "^6.0.3", "cross-env": "^6.0.3",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"env-var": "^7.3.0",
"esbuild-loader": "^2.18.0", "esbuild-loader": "^2.18.0",
"fork-ts-checker-webpack-plugin": "^3.1.1", "fork-ts-checker-webpack-plugin": "^3.1.1",
"graphql-request": "^3.7.0", "graphql-request": "^3.7.0",
@ -163,7 +167,7 @@
"rollup-plugin-polyfill-node": "^0.11.0", "rollup-plugin-polyfill-node": "^0.11.0",
"start-server-and-test": "^1.11.0", "start-server-and-test": "^1.11.0",
"tsconfig-paths-webpack-plugin": "^3.2.0", "tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^4.8.4", "typescript": "~4.8.4",
"vite": "^3.2.4", "vite": "^3.2.4",
"vite-plugin-html": "^3.2.0", "vite-plugin-html": "^3.2.0",
"vite-plugin-pwa": "^0.13.3", "vite-plugin-pwa": "^0.13.3",

27256
schema.transactions.graphql Normal file
View file

File diff suppressed because it is too large Load diff

2
scripts/build-types.js
View file

@ -2,7 +2,7 @@
const { generate } = require("@graphql-codegen/cli"); const { generate } = require("@graphql-codegen/cli");
// Feature flags names that will be used as suffix for generated files // Feature flags names that will be used as suffix for generated files
const FEATURE_FLAGS = []; const FEATURE_FLAGS = ["transactions"];
const schemaSuffixes = ["default", ...FEATURE_FLAGS]; const schemaSuffixes = ["default", ...FEATURE_FLAGS];

7
src/apps/fixtures.ts
View file

@ -1,4 +1,5 @@
import { import {
AppAvatarFragment,
AppInstallationFragment, AppInstallationFragment,
AppListItemFragment, AppListItemFragment,
AppManifestFragment, AppManifestFragment,
@ -151,6 +152,12 @@ export const installApp: AppManifestFragment = {
version: "1.0", version: "1.0",
}; };
export const appAvatar: AppAvatarFragment = {
id: "QXBwOjE3Ng==",
name: "app",
__typename: "App",
};
export const releasedApp: GetV2SaleorAppsResponse.ReleasedSaleorApp = { export const releasedApp: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
name: { name: {
en: "Test released app", en: "Test released app",

158
src/attributes/fixtures.ts
View file

@ -30,7 +30,8 @@ export const attribute: AttributeDetailsQuery["attribute"] = {
valueRequired: true, valueRequired: true,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
__typename: "PageInfo" as "PageInfo", __typename: "PageInfo" as "PageInfo",
endCursor: "", endCursor: "",
@ -40,7 +41,8 @@ export const attribute: AttributeDetailsQuery["attribute"] = {
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "1", cursor: "1",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -58,7 +60,8 @@ export const attribute: AttributeDetailsQuery["attribute"] = {
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "2", cursor: "2",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -80,10 +83,10 @@ export const attribute: AttributeDetailsQuery["attribute"] = {
visibleInStorefront: true, visibleInStorefront: true,
}; };
export const attributes: Array<NonNullable< export const attributes: Array<
AttributeListQuery["attributes"] NonNullable<AttributeListQuery["attributes"]>["edges"][0]["node"] &
>["edges"][0]["node"] & NonNullable<ProductDetailsQuery["product"]>["attributes"][0]["attribute"]
NonNullable<ProductDetailsQuery["product"]>["attributes"][0]["attribute"]> = [ > = [
{ {
__typename: "Attribute" as "Attribute", __typename: "Attribute" as "Attribute",
entityType: AttributeEntityTypeEnum.PRODUCT, entityType: AttributeEntityTypeEnum.PRODUCT,
@ -97,7 +100,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -107,7 +111,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -126,7 +131,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -161,7 +167,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -171,7 +178,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -190,7 +198,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -209,7 +218,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -228,7 +238,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -263,7 +274,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -273,7 +285,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -308,7 +321,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -318,7 +332,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -337,7 +352,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -356,7 +372,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -391,7 +408,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -401,7 +419,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -420,7 +439,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -455,7 +475,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -465,7 +486,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -484,7 +506,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -503,7 +526,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -538,7 +562,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -548,7 +573,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -567,7 +593,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -602,7 +629,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -612,7 +640,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -631,7 +660,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -650,7 +680,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -669,7 +700,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -688,7 +720,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -707,7 +740,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -742,7 +776,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -752,7 +787,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -771,7 +807,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -806,7 +843,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -816,7 +854,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -835,7 +874,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -870,7 +910,8 @@ export const attributes: Array<NonNullable<
valueRequired: false, valueRequired: false,
unit: null, unit: null,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -880,7 +921,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -899,7 +941,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -934,7 +977,8 @@ export const attributes: Array<NonNullable<
inputType: AttributeInputTypeEnum.DROPDOWN, inputType: AttributeInputTypeEnum.DROPDOWN,
valueRequired: false, valueRequired: false,
choices: { choices: {
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
endCursor: "WyI4IiwgIjMiXQ==", endCursor: "WyI4IiwgIjMiXQ==",
hasNextPage: false, hasNextPage: false,
@ -944,7 +988,8 @@ export const attributes: Array<NonNullable<
}, },
edges: [ edges: [
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -963,7 +1008,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -982,7 +1028,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -1001,7 +1048,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -1020,7 +1068,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",
@ -1039,7 +1088,8 @@ export const attributes: Array<NonNullable<
}, },
}, },
{ {
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "", cursor: "",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",

15
src/attributes/views/AttributeCreate/AttributeCreate.tsx
View file

@ -76,13 +76,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
ListViews.ATTRIBUTE_VALUE_LIST, ListViews.ATTRIBUTE_VALUE_LIST,
); );
const { const { pageInfo, pageValues, loadNextPage, loadPreviousPage, loadPage } =
pageInfo, useLocalPageInfo(values, settings?.rowNumber);
pageValues,
loadNextPage,
loadPreviousPage,
loadPage,
} = useLocalPageInfo(values, settings?.rowNumber);
const [attributeCreate, attributeCreateOpts] = useAttributeCreateMutation({ const [attributeCreate, attributeCreateOpts] = useAttributeCreateMutation({
onCompleted: data => { onCompleted: data => {
@ -200,7 +195,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
} }
saveButtonBarState={attributeCreateOpts.status} saveButtonBarState={attributeCreateOpts.status}
values={{ values={{
__typename: "AttributeValueCountableConnection" as "AttributeValueCountableConnection", __typename:
"AttributeValueCountableConnection" as "AttributeValueCountableConnection",
pageInfo: { pageInfo: {
__typename: "PageInfo" as "PageInfo", __typename: "PageInfo" as "PageInfo",
endCursor: "", endCursor: "",
@ -209,7 +205,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
startCursor: "", startCursor: "",
}, },
edges: pageValues.map((value, valueIndex) => ({ edges: pageValues.map((value, valueIndex) => ({
__typename: "AttributeValueCountableEdge" as "AttributeValueCountableEdge", __typename:
"AttributeValueCountableEdge" as "AttributeValueCountableEdge",
cursor: "1", cursor: "1",
node: { node: {
__typename: "AttributeValue" as "AttributeValue", __typename: "AttributeValue" as "AttributeValue",

94
src/attributes/views/AttributeDetails/AttributeDetails.tsx
View file

@ -61,10 +61,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
ListViews.ATTRIBUTE_VALUE_LIST, ListViews.ATTRIBUTE_VALUE_LIST,
); );
const [ const [valuesPaginationState, setValuesPaginationState] =
valuesPaginationState, useLocalPaginationState(settings?.rowNumber);
setValuesPaginationState,
] = useLocalPaginationState(settings?.rowNumber);
const { data, loading } = useAttributeDetailsQuery({ const { data, loading } = useAttributeDetailsQuery({
variables: { variables: {
@ -104,36 +102,32 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
}, },
}); });
const [ const [attributeValueDelete, attributeValueDeleteOpts] =
attributeValueDelete, useAttributeValueDeleteMutation({
attributeValueDeleteOpts, onCompleted: data => {
] = useAttributeValueDeleteMutation({ if (data?.attributeValueDelete?.errors.length === 0) {
onCompleted: data => { notify({
if (data?.attributeValueDelete?.errors.length === 0) { status: "success",
notify({ text: intl.formatMessage({
status: "success", id: "7H2D5m",
text: intl.formatMessage({ defaultMessage: "Value deleted",
id: "7H2D5m", description: "attribute value deleted",
defaultMessage: "Value deleted", }),
description: "attribute value deleted", });
}), closeModal();
}); }
closeModal(); },
} });
},
});
const [ const [attributeValueUpdate, attributeValueUpdateOpts] =
attributeValueUpdate, useAttributeValueUpdateMutation({
attributeValueUpdateOpts, onCompleted: data => {
] = useAttributeValueUpdateMutation({ if (data?.attributeValueUpdate?.errors.length === 0) {
onCompleted: data => { notifySaved();
if (data?.attributeValueUpdate?.errors.length === 0) { closeModal();
notifySaved(); }
closeModal(); },
} });
},
});
const [attributeUpdate, attributeUpdateOpts] = useAttributeUpdateMutation({ const [attributeUpdate, attributeUpdateOpts] = useAttributeUpdateMutation({
onCompleted: data => { onCompleted: data => {
@ -143,24 +137,22 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
}, },
}); });
const [ const [attributeValueCreate, attributeValueCreateOpts] =
attributeValueCreate, useAttributeValueCreateMutation({
attributeValueCreateOpts, onCompleted: data => {
] = useAttributeValueCreateMutation({ if (data?.attributeValueCreate?.errors.length === 0) {
onCompleted: data => { notify({
if (data?.attributeValueCreate?.errors.length === 0) { status: "success",
notify({ text: intl.formatMessage({
status: "success", id: "xVn5B0",
text: intl.formatMessage({ defaultMessage: "Added new value",
id: "xVn5B0", description: "added new attribute value",
defaultMessage: "Added new value", }),
description: "added new attribute value", });
}), closeModal();
}); }
closeModal(); },
} });
},
});
const [attributeValueReorder] = useAttributeValueReorderMutation({ const [attributeValueReorder] = useAttributeValueReorderMutation({
onCompleted: data => { onCompleted: data => {

57
src/attributes/views/AttributeList/AttributeList.tsx
View file

@ -68,26 +68,24 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
variables: queryVariables, variables: queryVariables,
}); });
const [ const [attributeBulkDelete, attributeBulkDeleteOpts] =
attributeBulkDelete, useAttributeBulkDeleteMutation({
attributeBulkDeleteOpts, onCompleted: data => {
] = useAttributeBulkDeleteMutation({ if (data.attributeBulkDelete?.errors.length === 0) {
onCompleted: data => { closeModal();
if (data.attributeBulkDelete?.errors.length === 0) { notify({
closeModal(); status: "success",
notify({ text: intl.formatMessage({
status: "success", id: "lw9WIk",
text: intl.formatMessage({ defaultMessage: "Attributes successfully delete",
id: "lw9WIk", description: "deleted multiple attributes",
defaultMessage: "Attributes successfully delete", }),
description: "deleted multiple attributes", });
}), reset();
}); refetch();
reset(); }
refetch(); },
} });
},
});
const tabs = getFilterTabs(); const tabs = getFilterTabs();
@ -98,17 +96,14 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
AttributeListUrlQueryParams AttributeListUrlQueryParams
>(navigate, attributeListUrl, params); >(navigate, attributeListUrl, params);
const [ const [changeFilters, resetFilters, handleSearchChange] =
changeFilters, createFilterHandlers({
resetFilters, cleanupFn: reset,
handleSearchChange, createUrl: attributeListUrl,
] = createFilterHandlers({ getFilterQueryParam,
cleanupFn: reset, navigate,
createUrl: attributeListUrl, params,
getFilterQueryParam, });
navigate,
params,
});
const handleTabChange = (tab: number) => { const handleTabChange = (tab: number) => {
reset(); reset();

18
src/attributes/views/AttributeList/filters.ts
View file

@ -98,16 +98,10 @@ export function getFilterQueryParam(
} }
} }
export const { export const { deleteFilterTab, getFilterTabs, saveFilterTab } =
deleteFilterTab, createFilterTabUtils<AttributeListUrlFilters>(ATTRIBUTE_FILTERS_KEY);
getFilterTabs,
saveFilterTab,
} = createFilterTabUtils<AttributeListUrlFilters>(ATTRIBUTE_FILTERS_KEY);
export const { export const { areFiltersApplied, getActiveFilters, getFiltersCurrentTab } =
areFiltersApplied, createFilterUtils<AttributeListUrlQueryParams, AttributeListUrlFilters>(
getActiveFilters, AttributeListUrlFiltersEnum,
getFiltersCurrentTab, );
} = createFilterUtils<AttributeListUrlQueryParams, AttributeListUrlFilters>(
AttributeListUrlFiltersEnum,
);

5
src/attributes/views/AttributeList/sort.ts
View file

@ -21,6 +21,5 @@ export function getSortQueryField(
} }
} }
export const getSortQueryVariables = createGetSortQueryVariables( export const getSortQueryVariables =
getSortQueryField, createGetSortQueryVariables(getSortQueryField);
);

30
src/channels/components/ChannelForm/ChannelForm.tsx
View file

@ -4,6 +4,7 @@ import {
} from "@dashboard/channels/pages/ChannelDetailsPage/types"; } from "@dashboard/channels/pages/ChannelDetailsPage/types";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import ControlledSwitch from "@dashboard/components/ControlledSwitch";
import FormSpacer from "@dashboard/components/FormSpacer"; import FormSpacer from "@dashboard/components/FormSpacer";
import SingleAutocompleteSelectField, { import SingleAutocompleteSelectField, {
SingleAutocompleteChoiceType, SingleAutocompleteChoiceType,
@ -13,7 +14,12 @@ import {
CountryCode, CountryCode,
StockSettingsInput, StockSettingsInput,
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import {
ChannelOrderSettingsFragment,
MarkAsPaidStrategyEnum,
} from "@dashboard/graphql/types.transactions.generated";
import useClipboard from "@dashboard/hooks/useClipboard"; import useClipboard from "@dashboard/hooks/useClipboard";
import { useFlags } from "@dashboard/hooks/useFlags";
import { ChangeEvent, FormChange } from "@dashboard/hooks/useForm"; import { ChangeEvent, FormChange } from "@dashboard/hooks/useForm";
import { commonMessages } from "@dashboard/intl"; import { commonMessages } from "@dashboard/intl";
import { getFormErrors } from "@dashboard/utils/errors"; import { getFormErrors } from "@dashboard/utils/errors";
@ -42,6 +48,7 @@ export interface FormData extends StockSettingsInput {
shippingZonesToDisplay: ChannelShippingZones; shippingZonesToDisplay: ChannelShippingZones;
warehousesToDisplay: ChannelWarehouses; warehousesToDisplay: ChannelWarehouses;
defaultCountry: CountryCode; defaultCountry: CountryCode;
markAsPaidStrategy: MarkAsPaidStrategyEnum;
} }
export interface ChannelFormProps { export interface ChannelFormProps {
@ -55,6 +62,8 @@ export interface ChannelFormProps {
onChange: FormChange; onChange: FormChange;
onCurrencyCodeChange?: (event: ChangeEvent) => void; onCurrencyCodeChange?: (event: ChangeEvent) => void;
onDefaultCountryChange: (event: ChangeEvent) => void; onDefaultCountryChange: (event: ChangeEvent) => void;
onMarkAsPaidStrategyChange: () => void;
orderSettings: ChannelOrderSettingsFragment["orderSettings"];
} }
export const ChannelForm: React.FC<ChannelFormProps> = ({ export const ChannelForm: React.FC<ChannelFormProps> = ({
@ -68,6 +77,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
onChange, onChange,
onCurrencyCodeChange, onCurrencyCodeChange,
onDefaultCountryChange, onDefaultCountryChange,
onMarkAsPaidStrategyChange,
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const [copied, copy] = useClipboard(); const [copied, copy] = useClipboard();
@ -76,6 +86,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
errors, errors,
); );
const classes = useStyles(); const classes = useStyles();
const { orderTransactions } = useFlags(["orderTransactions"]);
return ( return (
<> <>
@ -217,6 +228,25 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
value={data.defaultCountry} value={data.defaultCountry}
onChange={onDefaultCountryChange} onChange={onDefaultCountryChange}
/> />
<FormSpacer />
<ControlledSwitch
data-test-id="order-settings-mark-as-paid"
disabled={disabled || !orderTransactions.enabled}
checked={
data.markAsPaidStrategy ===
MarkAsPaidStrategyEnum.TRANSACTION_FLOW
}
onChange={onMarkAsPaidStrategyChange}
name="markAsPaidStrategy"
label={intl.formatMessage({
defaultMessage: "Mark as paid uses Transactions API",
id: "NkLZBG",
})}
secondLabel={intl.formatMessage({
defaultMessage: "Creates a single payment when unchecked",
id: "F5OqYa",
})}
/>
</CardContent> </CardContent>
</Card> </Card>
</> </>

29
src/channels/mutations.transactions.ts Normal file
View file

@ -0,0 +1,29 @@
import { gql } from "@apollo/client";
export const channelOrderSettingsUpdateMutation = gql`
mutation ChannelOrderSettingsUpdate($id: ID!, $input: ChannelUpdateInput!) {
channelUpdate(id: $id, input: $input) {
channel {
...ChannelDetails
...ChannelOrderSettings
}
errors {
...ChannelError
}
}
}
`;
export const channelCreateWithSettingsMutation = gql`
mutation ChannelCreateWithSettings($input: ChannelCreateInput!) {
channelCreate(input: $input) {
channel {
...ChannelDetails
...ChannelOrderSettings
}
errors {
...ChannelError
}
}
}
`;

5
src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx
View file

@ -1,6 +1,7 @@
import { channel, channelCreateErrors } from "@dashboard/channels/fixtures"; import { channel, channelCreateErrors } from "@dashboard/channels/fixtures";
import { countries } from "@dashboard/fixtures"; import { countries } from "@dashboard/fixtures";
import { ChannelErrorFragment } from "@dashboard/graphql"; import { ChannelErrorFragment } from "@dashboard/graphql";
import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.transactions.generated";
import Decorator from "@dashboard/storybook/Decorator"; import Decorator from "@dashboard/storybook/Decorator";
import { storiesOf } from "@storybook/react"; import { storiesOf } from "@storybook/react";
import React from "react"; import React from "react";
@ -14,6 +15,10 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
{ label: "USD", value: "USD" }, { label: "USD", value: "USD" },
{ label: "PLN", value: "PLN" }, { label: "PLN", value: "PLN" },
], ],
orderSettings: {
markAsPaidStrategy: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
__typename: "OrderSettings",
},
disabled: false, disabled: false,
disabledStatus: false, disabledStatus: false,
errors: [], errors: [],

18
src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
View file

@ -21,6 +21,10 @@ import {
SearchWarehousesQuery, SearchWarehousesQuery,
StockSettingsInput, StockSettingsInput,
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import {
ChannelOrderSettingsFragment,
MarkAsPaidStrategyEnum,
} from "@dashboard/graphql/types.transactions.generated";
import { SearchData } from "@dashboard/hooks/makeTopLevelSearch"; import { SearchData } from "@dashboard/hooks/makeTopLevelSearch";
import { getParsedSearchData } from "@dashboard/hooks/makeTopLevelSearch/utils"; import { getParsedSearchData } from "@dashboard/hooks/makeTopLevelSearch/utils";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -67,6 +71,7 @@ export interface ChannelDetailsPageProps<
updateChannelStatus?: () => void; updateChannelStatus?: () => void;
searchShippingZones: (query: string) => void; searchShippingZones: (query: string) => void;
searchWarehouses: (query: string) => void; searchWarehouses: (query: string) => void;
orderSettings: ChannelOrderSettingsFragment["orderSettings"];
} }
const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
@ -90,6 +95,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
channelWarehouses = [], channelWarehouses = [],
allWarehousesCount, allWarehousesCount,
countries, countries,
orderSettings,
}: ChannelDetailsPageProps<TErrors>) { }: ChannelDetailsPageProps<TErrors>) {
const navigate = useNavigator(); const navigate = useNavigator();
const intl = useIntl(); const intl = useIntl();
@ -123,6 +129,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
...initialStockSettings, ...initialStockSettings,
shippingZonesToDisplay: channelShippingZones, shippingZonesToDisplay: channelShippingZones,
warehousesToDisplay: channelWarehouses, warehousesToDisplay: channelWarehouses,
markAsPaidStrategy: orderSettings.markAsPaidStrategy,
}; };
const getFilteredShippingZonesChoices = ( const getFilteredShippingZonesChoices = (
@ -192,6 +199,15 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
triggerChange, triggerChange,
); );
const reorderWarehouse = createWarehouseReorderHandler(data, set); const reorderWarehouse = createWarehouseReorderHandler(data, set);
const handleMarkAsPaidStrategyChange = () => {
set({
markAsPaidStrategy:
// Swap enum values
data.markAsPaidStrategy === MarkAsPaidStrategyEnum.PAYMENT_FLOW
? MarkAsPaidStrategyEnum.TRANSACTION_FLOW
: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
});
};
const allErrors = [...errors, ...validationErrors]; const allErrors = [...errors, ...validationErrors];
@ -211,6 +227,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
<DetailPageLayout.Content> <DetailPageLayout.Content>
<ChannelForm <ChannelForm
data={data} data={data}
orderSettings={orderSettings}
disabled={disabled} disabled={disabled}
currencyCodes={currencyCodes} currencyCodes={currencyCodes}
countries={countryChoices} countries={countryChoices}
@ -219,6 +236,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
onChange={change} onChange={change}
onCurrencyCodeChange={handleCurrencyCodeSelect} onCurrencyCodeChange={handleCurrencyCodeSelect}
onDefaultCountryChange={handleDefaultCountrySelect} onDefaultCountryChange={handleDefaultCountrySelect}
onMarkAsPaidStrategyChange={handleMarkAsPaidStrategyChange}
errors={allErrors} errors={allErrors}
/> />
</DetailPageLayout.Content> </DetailPageLayout.Content>

9
src/channels/queries.transactions.ts Normal file
View file

@ -0,0 +1,9 @@
import { gql } from "@apollo/client";
export const channelOrderSettings = gql`
query ChannelOrderSettings($id: ID!) {
channel(id: $id) {
...ChannelOrderSettings
}
}
`;

61
src/channels/views/ChannelCreate/ChannelCreate.tsx
View file

@ -1,12 +1,16 @@
import { FormData } from "@dashboard/channels/components/ChannelForm/ChannelForm"; import { FormData } from "@dashboard/channels/components/ChannelForm/ChannelForm";
import { WindowTitle } from "@dashboard/components/WindowTitle"; import { WindowTitle } from "@dashboard/components/WindowTitle";
import { import {
ChannelCreateInput,
ChannelCreateMutation, ChannelCreateMutation,
ChannelErrorFragment, ChannelErrorFragment,
useChannelCreateMutation, useChannelCreateMutation,
useChannelReorderWarehousesMutation, useChannelReorderWarehousesMutation,
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import { useChannelCreateWithSettingsMutation } from "@dashboard/graphql/transactions";
import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.transactions.generated";
import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils"; import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils";
import { useFlags } from "@dashboard/hooks/useFlags";
import useNavigator from "@dashboard/hooks/useNavigator"; import useNavigator from "@dashboard/hooks/useNavigator";
import useNotifier from "@dashboard/hooks/useNotifier"; import useNotifier from "@dashboard/hooks/useNotifier";
import { getDefaultNotifierSuccessErrorData } from "@dashboard/hooks/useNotifier/utils"; import { getDefaultNotifierSuccessErrorData } from "@dashboard/hooks/useNotifier/utils";
@ -28,6 +32,7 @@ export const ChannelCreateView = ({}) => {
const notify = useNotifier(); const notify = useNotifier();
const intl = useIntl(); const intl = useIntl();
const shop = useShop(); const shop = useShop();
const { orderTransactions } = useFlags(["orderTransactions"]);
const handleError = (error: ChannelErrorFragment) => { const handleError = (error: ChannelErrorFragment) => {
notify({ notify({
@ -36,12 +41,23 @@ export const ChannelCreateView = ({}) => {
}); });
}; };
const [createChannel, createChannelOpts] = useChannelCreateMutation({ const [createChannel, createChannelRegularOpts] = useChannelCreateMutation({
onCompleted: ({ channelCreate: { errors } }: ChannelCreateMutation) => { onCompleted: ({ channelCreate: { errors } }: ChannelCreateMutation) => {
notify(getDefaultNotifierSuccessErrorData(errors, intl)); notify(getDefaultNotifierSuccessErrorData(errors, intl));
}, },
}); });
const [createChannelWithSettings, createChannelWithSettingsOpts] =
useChannelCreateWithSettingsMutation({
onCompleted: ({ channelCreate: { errors } }: ChannelCreateMutation) => {
notify(getDefaultNotifierSuccessErrorData(errors, intl));
},
});
const createChannelOpts = orderTransactions?.enabled
? createChannelWithSettingsOpts
: createChannelRegularOpts;
const [reorderChannelWarehouses, reorderChannelWarehousesOpts] = const [reorderChannelWarehouses, reorderChannelWarehousesOpts] =
useChannelReorderWarehousesMutation({ useChannelReorderWarehousesMutation({
onCompleted: data => { onCompleted: data => {
@ -63,22 +79,30 @@ export const ChannelCreateView = ({}) => {
name, name,
slug, slug,
defaultCountry, defaultCountry,
markAsPaidStrategy,
}: FormData) => { }: FormData) => {
const createChannelMutation = createChannel({ const input: ChannelCreateInput = {
variables: { defaultCountry,
input: { name,
defaultCountry, slug,
name, currencyCode: currencyCode.toUpperCase(),
slug, addShippingZones: shippingZonesIdsToAdd,
currencyCode: currencyCode.toUpperCase(), addWarehouses: warehousesIdsToAdd,
addShippingZones: shippingZonesIdsToAdd, stockSettings: {
addWarehouses: warehousesIdsToAdd, allocationStrategy,
stockSettings: {
allocationStrategy,
},
},
}, },
}); };
const createChannelMutation = orderTransactions.enabled
? createChannelWithSettings({
variables: {
input: { ...input, orderSettings: { markAsPaidStrategy } },
},
})
: createChannel({
variables: {
input,
},
});
const result = await createChannelMutation; const result = await createChannelMutation;
const errors = await extractMutationErrors(createChannelMutation); const errors = await extractMutationErrors(createChannelMutation);
@ -142,6 +166,13 @@ export const ChannelCreateView = ({}) => {
/> />
<> <>
<ChannelDetailsPage <ChannelDetailsPage
orderSettings={{
markAsPaidStrategy: orderTransactions?.enabled
? // Use new transactions strategy by default if feature flag is enabled
MarkAsPaidStrategyEnum.TRANSACTION_FLOW
: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
__typename: "OrderSettings",
}}
allShippingZonesCount={ allShippingZonesCount={
shippingZonesCountData?.shippingZones?.totalCount shippingZonesCountData?.shippingZones?.totalCount
} }

59
src/channels/views/ChannelDetails/ChannelDetails.tsx
View file

@ -14,7 +14,13 @@ import {
useChannelsQuery, useChannelsQuery,
useChannelUpdateMutation, useChannelUpdateMutation,
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import {
useChannelOrderSettingsQuery,
useChannelOrderSettingsUpdateMutation,
} from "@dashboard/graphql/hooks.transactions.generated";
import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.transactions.generated";
import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils"; import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils";
import { useFlags } from "@dashboard/hooks/useFlags";
import useNavigator from "@dashboard/hooks/useNavigator"; import useNavigator from "@dashboard/hooks/useNavigator";
import useNotifier from "@dashboard/hooks/useNotifier"; import useNotifier from "@dashboard/hooks/useNotifier";
import { getDefaultNotifierSuccessErrorData } from "@dashboard/hooks/useNotifier/utils"; import { getDefaultNotifierSuccessErrorData } from "@dashboard/hooks/useNotifier/utils";
@ -51,6 +57,8 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
const intl = useIntl(); const intl = useIntl();
const shop = useShop(); const shop = useShop();
const { orderTransactions } = useFlags(["orderTransactions"]);
const channelsListData = useChannelsQuery({ displayLoader: true }); const channelsListData = useChannelsQuery({ displayLoader: true });
const [openModal, closeModal] = createDialogActionHandlers< const [openModal, closeModal] = createDialogActionHandlers<
@ -63,11 +71,18 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
notify(getDefaultNotifierSuccessErrorData(errors, intl)), notify(getDefaultNotifierSuccessErrorData(errors, intl)),
}); });
const [updateChannelSettings] = useChannelOrderSettingsUpdateMutation();
const { data, loading } = useChannelQuery({ const { data, loading } = useChannelQuery({
displayLoader: true, displayLoader: true,
variables: { id }, variables: { id },
}); });
const { data: channelSettingsData } = useChannelOrderSettingsQuery({
variables: { id },
skip: !orderTransactions.enabled,
});
const handleError = (error: ChannelErrorFragment) => { const handleError = (error: ChannelErrorFragment) => {
notify({ notify({
status: "error", status: "error",
@ -114,6 +129,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
warehousesToDisplay, warehousesToDisplay,
defaultCountry, defaultCountry,
allocationStrategy, allocationStrategy,
markAsPaidStrategy,
}: FormData) => { }: FormData) => {
const updateChannelMutation = updateChannel({ const updateChannelMutation = updateChannel({
variables: { variables: {
@ -133,12 +149,39 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
}, },
}); });
const result = await updateChannelMutation; // TODO: Remove this when we remove orderTransactions flag, move to updateChannel mutation
const errors = await extractMutationErrors(updateChannelMutation); let updateChannelOrderSettingsMutation: ReturnType<
typeof updateChannelSettings
>;
if (orderTransactions.enabled) {
updateChannelOrderSettingsMutation = updateChannelSettings({
variables: {
id: data?.channel.id,
input: {
orderSettings: {
markAsPaidStrategy,
},
},
},
});
} else {
updateChannelOrderSettingsMutation = new Promise(resolve =>
resolve(null),
);
}
if (!errors?.length) { const [resultChannel] = await Promise.all([
updateChannelMutation,
updateChannelOrderSettingsMutation,
]);
const errors = await extractMutationErrors(updateChannelMutation);
const settingsErrors = await extractMutationErrors(
updateChannelOrderSettingsMutation,
);
if (!errors?.length && !settingsErrors?.length) {
const moves = calculateItemsOrderMoves( const moves = calculateItemsOrderMoves(
result.data?.channelUpdate.channel?.warehouses, resultChannel.data?.channelUpdate.channel?.warehouses,
warehousesToDisplay, warehousesToDisplay,
); );
@ -150,7 +193,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
}); });
} }
return errors; return errors || settingsErrors;
}; };
const onDeleteCompleted = (data: ChannelDeleteMutation) => { const onDeleteCompleted = (data: ChannelDeleteMutation) => {
@ -223,6 +266,12 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
})} })}
/> />
<ChannelDetailsPage <ChannelDetailsPage
orderSettings={
channelSettingsData?.channel?.orderSettings ?? {
markAsPaidStrategy: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
__typename: "OrderSettings",
}
}
channelShippingZones={channelShippingZones} channelShippingZones={channelShippingZones}
allShippingZonesCount={ allShippingZonesCount={
shippingZonesCountData?.shippingZones?.totalCount shippingZonesCountData?.shippingZones?.totalCount

3
src/components/DiscountedPrice/DiscountedPrice.tsx
View file

@ -1,7 +1,8 @@
import { IMoney } from "@dashboard/utils/intl";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import React from "react"; import React from "react";
import Money, { IMoney } from "../Money"; import Money from "../Money";
import { useStyles } from "./styles"; import { useStyles } from "./styles";
interface DiscountedPriceProps { interface DiscountedPriceProps {

18
src/components/EventTime/EventTime.tsx Normal file
View file

@ -0,0 +1,18 @@
import useLocale from "@dashboard/hooks/useLocale";
import React from "react";
const EventTime: React.FC<{ date: string }> = ({ date }) => {
const { locale } = useLocale();
const intl = new Intl.DateTimeFormat(locale, {
timeZoneName: "short",
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
return <time dateTime={date}>{intl.format(new Date(date))}</time>;
};
export default EventTime;

2
src/components/EventTime/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./EventTime";
export { default } from "./EventTime";

18
src/components/Money/Money.tsx
View file

@ -1,7 +1,10 @@
import useLocale from "@dashboard/hooks/useLocale"; import useLocale from "@dashboard/hooks/useLocale";
import { IMoney } from "@dashboard/utils/intl";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import React from "react"; import React from "react";
import { formatMoneyAmount } from ".";
const useStyles = makeStyles( const useStyles = makeStyles(
{ {
root: { root: {
@ -15,11 +18,6 @@ const useStyles = makeStyles(
{ name: "Money" }, { name: "Money" },
); );
export interface IMoney {
amount: number;
currency: string;
}
export interface MoneyProps { export interface MoneyProps {
money: IMoney | null; money: IMoney | null;
} }
@ -33,15 +31,7 @@ export const Money: React.FC<MoneyProps> = props => {
return null; return null;
} }
const currencyFractionDigits = new Intl.NumberFormat(locale, { const amount = formatMoneyAmount(money, locale);
style: "currency",
currency: money.currency,
}).resolvedOptions().maximumFractionDigits;
const amount = money.amount.toLocaleString(locale, {
maximumFractionDigits: currencyFractionDigits,
minimumFractionDigits: currencyFractionDigits,
});
return ( return (
<span className={classes.root} {...rest}> <span className={classes.root} {...rest}>

18
src/components/Money/index.ts
View file

@ -1,4 +1,4 @@
import { IMoney } from "./Money"; import { IMoney } from "@dashboard/utils/intl";
export { default } from "./Money"; export { default } from "./Money";
export * from "./Money"; export * from "./Money";
@ -16,6 +16,22 @@ export function subtractMoney(init: IMoney, ...args: IMoney[]): IMoney {
}; };
} }
export const formatMoneyAmount = (money: IMoney, locale: string) => {
try {
const currencyFractionDigits = new Intl.NumberFormat(locale, {
style: "currency",
currency: money.currency,
}).resolvedOptions().maximumFractionDigits;
return money.amount.toLocaleString(locale, {
maximumFractionDigits: currencyFractionDigits,
minimumFractionDigits: currencyFractionDigits,
});
} catch (e) {
return money.amount.toLocaleString(locale);
}
};
export const formatMoney = (money: IMoney, locale: string) => { export const formatMoney = (money: IMoney, locale: string) => {
try { try {
const formattedMoney = Intl.NumberFormat(locale, { const formattedMoney = Intl.NumberFormat(locale, {

3
src/components/MoneyRange/MoneyRange.tsx
View file

@ -1,8 +1,9 @@
import { IMoney } from "@dashboard/utils/intl";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { LocaleConsumer } from "../Locale"; import { LocaleConsumer } from "../Locale";
import { formatMoney, formatMoneyRange, IMoney } from "../Money"; import { formatMoney, formatMoneyRange } from "../Money";
export interface MoneyRangeProps { export interface MoneyRangeProps {
from?: IMoney; from?: IMoney;

53
src/components/OverflowTooltip/OverflowTooltip.tsx Normal file
View file

@ -0,0 +1,53 @@
import { makeStyles } from "@material-ui/core";
import { Tooltip } from "@saleor/macaw-ui";
import clsx from "clsx";
import React from "react";
import { useOverflow } from "./useOverflow";
interface OverflowTooltipProps {
children: React.ReactNode;
title?: React.ReactNode;
header?: string;
checkHorizontal?: boolean;
checkVertical?: boolean;
className?: string;
}
const useStyles = makeStyles(
{
wrapper: {
overflow: "hidden",
textOverflow: "ellipsis",
},
},
{
name: "OverflowTooltip",
},
);
const OverflowTooltip: React.FC<OverflowTooltipProps> = ({
checkHorizontal = true,
checkVertical = true,
title,
header,
className,
children,
}) => {
const classes = useStyles();
const { ref, isOverflow } = useOverflow<HTMLDivElement>({
horizontal: checkHorizontal,
vertical: checkVertical,
});
return (
<Tooltip title={title ?? children} header={header} disabled={!isOverflow}>
<div ref={ref} className={clsx(classes.wrapper, className)}>
{children}
</div>
</Tooltip>
);
};
export default OverflowTooltip;

2
src/components/OverflowTooltip/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./OverflowTooltip";
export { default } from "./OverflowTooltip";

44
src/components/OverflowTooltip/useOverflow.ts Normal file
View file

@ -0,0 +1,44 @@
import React from "react";
interface OverflowConfig {
horizontal?: boolean;
vertical?: boolean;
}
const getIsHorizontal = (el: HTMLElement, config: OverflowConfig) =>
config.horizontal && el && el.scrollWidth > el.clientWidth;
const getIsVertical = (el: HTMLElement, config: OverflowConfig) =>
config.vertical && el && el.scrollHeight > el.clientHeight;
export const useOverflow = <T extends HTMLElement>(
config: OverflowConfig = { horizontal: true, vertical: true },
) => {
const ref = React.useRef<T>(null);
const [isHorizontal, setIsHorizontal] = React.useState(false);
const [isVertical, setIsVertical] = React.useState(false);
React.useLayoutEffect(() => {
const trigger = () => {
setIsHorizontal(getIsHorizontal(ref.current, config));
setIsVertical(getIsVertical(ref.current, config));
};
if (ref.current) {
trigger();
}
window.addEventListener("resize", trigger);
return () => {
window.removeEventListener("resize", trigger);
};
}, [ref, config]);
return {
ref,
isHorizontal,
isVertical,
isOverflow: isHorizontal || isVertical,
};
};

7
src/components/PriceField/PriceField.tsx
View file

@ -1,4 +1,4 @@
import { InputAdornment, TextField } from "@material-ui/core"; import { InputAdornment, InputLabelProps, TextField } from "@material-ui/core";
import { InputProps } from "@material-ui/core/Input"; import { InputProps } from "@material-ui/core/Input";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import React from "react"; import React from "react";
@ -29,7 +29,7 @@ const useStyles = makeStyles(
{ name: "PriceField" }, { name: "PriceField" },
); );
interface PriceFieldProps { export interface PriceFieldProps {
className?: string; className?: string;
currencySymbol?: string; currencySymbol?: string;
disabled?: boolean; disabled?: boolean;
@ -40,6 +40,7 @@ interface PriceFieldProps {
value?: string; value?: string;
InputProps?: InputProps; InputProps?: InputProps;
inputProps?: InputProps["inputProps"]; inputProps?: InputProps["inputProps"];
InputLabelProps?: InputLabelProps;
required?: boolean; required?: boolean;
onChange(event: any); onChange(event: any);
} }
@ -57,6 +58,7 @@ export const PriceField: React.FC<PriceFieldProps> = props => {
required, required,
value, value,
InputProps, InputProps,
InputLabelProps,
inputProps, inputProps,
} = props; } = props;
@ -74,6 +76,7 @@ export const PriceField: React.FC<PriceFieldProps> = props => {
label={label} label={label}
fullWidth fullWidth
value={value} value={value}
InputLabelProps={InputLabelProps}
InputProps={{ InputProps={{
...InputProps, ...InputProps,
endAdornment: currencySymbol ? ( endAdornment: currencySymbol ? (

10
src/components/ResponsiveTable/ResponsiveTable.tsx
View file

@ -24,17 +24,23 @@ const useStyles = makeStyles(
interface ResponsiveTableProps { interface ResponsiveTableProps {
children: React.ReactNode | React.ReactNodeArray; children: React.ReactNode | React.ReactNodeArray;
className?: string; className?: string;
onMouseLeave?: () => void;
key?: string; key?: string;
} }
const ResponsiveTable: React.FC<ResponsiveTableProps> = props => { const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
const { children, className } = props; const { children, className, onMouseLeave } = props;
const classes = useStyles(props); const classes = useStyles(props);
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Table className={clsx(classes.table, className)}>{children}</Table> <Table
className={clsx(classes.table, className)}
onMouseLeave={onMouseLeave}
>
{children}
</Table>
</div> </div>
); );
}; };

12
src/components/RichTextEditor/RichTextEditor.tsx
View file

@ -1,7 +1,7 @@
import { LogLevels, OutputData } from "@editorjs/editorjs"; import { LogLevels } from "@editorjs/editorjs";
import { FormControl, FormHelperText, InputLabel } from "@material-ui/core"; import { FormControl, FormHelperText, InputLabel } from "@material-ui/core";
import { useId } from "@reach/auto-id"; import { useId } from "@reach/auto-id";
import { Props as ReactEditorJSProps } from "@react-editor-js/core"; import { EditorCore, Props as ReactEditorJSProps } from "@react-editor-js/core";
import clsx from "clsx"; import clsx from "clsx";
import React from "react"; import React from "react";
import { createReactEditorJS } from "react-editor-js"; import { createReactEditorJS } from "react-editor-js";
@ -12,14 +12,6 @@ import useStyles from "./styles";
export type EditorJsProps = Omit<ReactEditorJSProps, "factory">; export type EditorJsProps = Omit<ReactEditorJSProps, "factory">;
// https://github.com/Jungwoo-An/react-editor-js#how-to-access-editor-js-instance
export interface EditorCore {
destroy(): Promise<void>;
clear(): Promise<void>;
save(): Promise<OutputData>;
render(data: OutputData): Promise<void>;
}
export interface RichTextEditorProps extends Omit<EditorJsProps, "onChange"> { export interface RichTextEditorProps extends Omit<EditorJsProps, "onChange"> {
id?: string; id?: string;
disabled: boolean; disabled: boolean;

2
src/config.ts
View file

@ -4,7 +4,7 @@ import { ListSettings, ListViews, Pagination } from "./types";
export const getAppDefaultUri = () => "/"; export const getAppDefaultUri = () => "/";
export const getAppMountUri = () => export const getAppMountUri = () =>
window.__SALEOR_CONFIG__.APP_MOUNT_URI || getAppDefaultUri(); window?.__SALEOR_CONFIG__?.APP_MOUNT_URI || getAppDefaultUri();
export const getApiUrl = () => window.__SALEOR_CONFIG__.API_URL; export const getApiUrl = () => window.__SALEOR_CONFIG__.API_URL;
export const SW_INTERVAL = parseInt(process.env.SW_INTERVAL, 10) || 300; export const SW_INTERVAL = parseInt(process.env.SW_INTERVAL, 10) || 300;
export const IS_CLOUD_INSTANCE = export const IS_CLOUD_INSTANCE =

8
src/fragments/apps.ts
View file

@ -84,3 +84,11 @@ export const appPermissionFragment = gql`
code code
} }
`; `;
export const appAvatarFragment = gql`
fragment AppAvatar on App {
id
name
# TODO: Add app image
}
`;

13
src/fragments/auth.ts
View file

@ -30,3 +30,16 @@ export const fragmentUserBase = gql`
lastName lastName
} }
`; `;
export const fragmentUserBaseAvatar = gql`
fragment UserBaseAvatar on User {
id
firstName
lastName
email
avatar {
url
alt
}
}
`;

9
src/fragments/channel.transactions.ts Normal file
View file

@ -0,0 +1,9 @@
import { gql } from "@apollo/client";
export const channelOrderSettings = gql`
fragment ChannelOrderSettings on Channel {
orderSettings {
markAsPaidStrategy
}
}
`;

33
src/fragments/errors.transactions.ts Normal file
View file

@ -0,0 +1,33 @@
import { gql } from "@apollo/client";
export const transactionRequestActionErrorFragment = gql`
fragment TransactionRequestActionError on TransactionRequestActionError {
field
message
code
}
`;
export const transactionCreateErrorFragment = gql`
fragment TransactionCreateError on TransactionCreateError {
field
message
code
}
`;
export const orderGrantRefundCreateErrorFragment = gql`
fragment OrderGrantRefundCreateError on OrderGrantRefundCreateError {
field
message
code
}
`;
export const orderGrantRefundUpdateErrorFragment = gql`
fragment OrderGrantRefundUpdateError on OrderGrantRefundUpdateError {
field
message
code
}
`;

361
src/fragments/orders.transactions.ts Normal file
View file

@ -0,0 +1,361 @@
import { gql } from "@apollo/client";
export const transactionEvent = gql`
fragment TransactionEvent on TransactionEvent {
id
pspReference
amount {
...Money
}
type
message
createdAt
createdBy {
... on User {
...StaffMemberAvatar
}
... on App {
...AppAvatar
}
}
externalUrl
}
`;
export const transactionItemFragment = gql`
fragment TransactionItem on TransactionItem {
id
type
pspReference
actions
type
status
externalUrl
events {
...TransactionEvent
}
authorizedAmount {
...Money
}
chargedAmount {
...Money
}
refundedAmount {
...Money
}
canceledAmount {
...Money
}
authorizePendingAmount {
...Money
}
chargePendingAmount {
...Money
}
refundPendingAmount {
...Money
}
cancelPendingAmount {
...Money
}
}
`;
export const fragmentPayment = gql`
fragment OrderPayment on Payment {
id
isActive
actions
gateway
paymentMethodType
availableCaptureAmount {
...Money
}
capturedAmount {
...Money
}
total {
...Money
}
availableRefundAmount {
...Money
}
modified
transactions {
id
token
created
kind
isSuccess
}
}
`;
export const fragmentOrderGiftcard = gql`
fragment OrderGiftCard on GiftCard {
id
last4CodeChars
events {
id
type
orderId
date
balance {
initialBalance {
...Money
}
currentBalance {
...Money
}
oldInitialBalance {
...Money
}
oldCurrentBalance {
...Money
}
}
}
}
`;
export const fragmentOrderGrantedRefunds = gql`
fragment OrderGrantedRefund on OrderGrantedRefund {
id
createdAt
amount {
currency
amount
}
reason
user {
...UserBaseAvatar
}
app {
id
name
}
}
`;
export const orderLineGrantRefund = gql`
fragment OrderLineGrantRefund on OrderLine {
id
thumbnail {
url
}
productName
quantity
quantityToFulfill
variantName
productName
unitPrice {
gross {
...Money
}
}
}
`;
export const grantRefundFulfillment = gql`
fragment OrderFulfillmentGrantRefund on Fulfillment {
id
fulfillmentOrder
status
lines {
id
quantity
orderLine {
...OrderLineGrantRefund
}
}
}
`;
export const fragmentOrderDetailsGrantRefund = gql`
fragment OrderDetailsGrantRefund on Order {
id
number
lines {
...OrderLineGrantRefund
}
fulfillments {
...OrderFulfillmentGrantRefund
}
shippingPrice {
gross {
...Money
}
}
total {
gross {
...Money
}
}
}
`;
export const fragmentOrderDetailsWithTransactions = gql`
fragment OrderDetailsWithTransactions on Order {
id
token
...Metadata
billingAddress {
...Address
}
transactions {
...TransactionItem
}
payments {
...OrderPayment
}
giftCards {
...OrderGiftCard
}
grantedRefunds {
...OrderGrantedRefund
}
isShippingRequired
canFinalize
created
customerNote
discounts {
id
type
calculationMode: valueType
value
reason
amount {
...Money
}
}
events {
...OrderEvent
}
fulfillments {
...Fulfillment
}
lines {
...OrderLine
}
number
isPaid
paymentStatus
shippingAddress {
...Address
}
deliveryMethod {
__typename
... on ShippingMethod {
id
}
... on Warehouse {
id
clickAndCollectOption
}
}
shippingMethod {
id
}
shippingMethodName
collectionPointName
shippingPrice {
gross {
amount
currency
}
}
status
subtotal {
gross {
...Money
}
net {
...Money
}
}
total {
gross {
...Money
}
net {
...Money
}
tax {
...Money
}
}
totalRemainingGrant {
...Money
}
totalGrantedRefund {
...Money
}
totalRefundPending {
...Money
}
totalRefunded {
...Money
}
actions
totalAuthorizePending {
...Money
}
totalAuthorized {
...Money
}
totalCharged {
...Money
}
totalChargePending {
...Money
}
totalCanceled {
...Money
}
totalCancelPending {
...Money
}
totalBalance {
...Money
}
undiscountedTotal {
net {
...Money
}
gross {
...Money
}
}
user {
id
email
}
userEmail
shippingMethods {
id
name
price {
...Money
}
active
message
}
invoices {
...Invoice
}
channel {
isActive
id
name
currencyCode
slug
defaultCountry {
code
}
orderSettings {
markAsPaidStrategy
}
}
isPaid
}
`;

3
src/fragments/orders.ts
View file

@ -192,6 +192,9 @@ export const fragmentOrderDetails = gql`
billingAddress { billingAddress {
...Address ...Address
} }
transactions {
id
}
giftCards { giftCards {
events { events {
id id

7
src/fragments/plugins.ts
View file

@ -57,3 +57,10 @@ export const pluginsDetailsFragment = gql`
} }
} }
`; `;
export const paymentGatewayFragment = gql`
fragment PaymentGateway on PaymentGateway {
name
id
}
`;

9
src/fragments/staff.ts
View file

@ -26,3 +26,12 @@ export const staffMemberDetailsFragment = gql`
} }
} }
`; `;
export const staffMemberAvatarFragment = gql`
fragment StaffMemberAvatar on User {
...StaffMember
avatar(size: 120) {
url
}
}
`;

4
src/graphql/client.ts
View file

@ -19,11 +19,11 @@ const attachVariablesLink = new ApolloLink((operation, forward) =>
); );
export const link = attachVariablesLink.concat( export const link = attachVariablesLink.concat(
createUploadLink({ (createUploadLink({
credentials: "include", credentials: "include",
uri: getApiUrl(), uri: getApiUrl(),
fetch: createFetch(), fetch: createFetch(),
}), }) as unknown) as ApolloLink, // type mismatch between apollo-upload-client and @apollo/cient
); );
export const apolloClient = new ApolloClient({ export const apolloClient = new ApolloClient({

322
src/graphql/fragmentTypes.transactions.generated.ts Normal file
View file

@ -0,0 +1,322 @@
/* eslint-disable */
export interface PossibleTypesResultData {
possibleTypes: {
[key: string]: string[]
}
}
const result: PossibleTypesResultData = {
"possibleTypes": {
"DeliveryMethod": [
"Warehouse",
"ShippingMethod"
],
"Event": [
"AddressCreated",
"AddressDeleted",
"AddressUpdated",
"AppDeleted",
"AppInstalled",
"AppStatusChanged",
"AppUpdated",
"AttributeCreated",
"AttributeDeleted",
"AttributeUpdated",
"AttributeValueCreated",
"AttributeValueDeleted",
"AttributeValueUpdated",
"CalculateTaxes",
"CategoryCreated",
"CategoryDeleted",
"CategoryUpdated",
"ChannelCreated",
"ChannelDeleted",
"ChannelStatusChanged",
"ChannelUpdated",
"CheckoutCreated",
"CheckoutFilterShippingMethods",
"CheckoutMetadataUpdated",
"CheckoutUpdated",
"CollectionCreated",
"CollectionDeleted",
"CollectionMetadataUpdated",
"CollectionUpdated",
"CustomerCreated",
"CustomerMetadataUpdated",
"CustomerUpdated",
"DraftOrderCreated",
"DraftOrderDeleted",
"DraftOrderUpdated",
"FulfillmentApproved",
"FulfillmentCanceled",
"FulfillmentCreated",
"FulfillmentMetadataUpdated",
"GiftCardCreated",
"GiftCardDeleted",
"GiftCardMetadataUpdated",
"GiftCardStatusChanged",
"GiftCardUpdated",
"InvoiceDeleted",
"InvoiceRequested",
"InvoiceSent",
"MenuCreated",
"MenuDeleted",
"MenuItemCreated",
"MenuItemDeleted",
"MenuItemUpdated",
"MenuUpdated",
"OrderCancelled",
"OrderConfirmed",
"OrderCreated",
"OrderFilterShippingMethods",
"OrderFulfilled",
"OrderFullyPaid",
"OrderMetadataUpdated",
"OrderUpdated",
"PageCreated",
"PageDeleted",
"PageTypeCreated",
"PageTypeDeleted",
"PageTypeUpdated",
"PageUpdated",
"PaymentAuthorize",
"PaymentCaptureEvent",
"PaymentConfirmEvent",
"PaymentListGateways",
"PaymentProcessEvent",
"PaymentRefundEvent",
"PaymentVoidEvent",
"PermissionGroupCreated",
"PermissionGroupDeleted",
"PermissionGroupUpdated",
"ProductCreated",
"ProductDeleted",
"ProductMediaCreated",
"ProductMediaDeleted",
"ProductMediaUpdated",
"ProductMetadataUpdated",
"ProductUpdated",
"ProductVariantBackInStock",
"ProductVariantCreated",
"ProductVariantDeleted",
"ProductVariantMetadataUpdated",
"ProductVariantOutOfStock",
"ProductVariantStockUpdated",
"ProductVariantUpdated",
"SaleCreated",
"SaleDeleted",
"SaleToggle",
"SaleUpdated",
"ShippingListMethodsForCheckout",
"ShippingPriceCreated",
"ShippingPriceDeleted",
"ShippingPriceUpdated",
"ShippingZoneCreated",
"ShippingZoneDeleted",
"ShippingZoneMetadataUpdated",
"ShippingZoneUpdated",
"StaffCreated",
"StaffDeleted",
"StaffUpdated",
"ThumbnailCreated",
"TransactionActionRequest",
"TransactionCancelationRequested",
"TransactionChargeRequested",
"TransactionItemMetadataUpdated",
"TransactionRefundRequested",
"TranslationCreated",
"TranslationUpdated",
"VoucherCreated",
"VoucherDeleted",
"VoucherMetadataUpdated",
"VoucherUpdated",
"WarehouseCreated",
"WarehouseDeleted",
"WarehouseMetadataUpdated",
"WarehouseUpdated"
],
"IssuingPrincipal": [
"App",
"User"
],
"Job": [
"AppInstallation",
"ExportFile",
"Invoice"
],
"Node": [
"Address",
"Allocation",
"App",
"AppExtension",
"AppInstallation",
"AppToken",
"Attribute",
"AttributeTranslatableContent",
"AttributeTranslation",
"AttributeValue",
"AttributeValueTranslatableContent",
"AttributeValueTranslation",
"Category",
"CategoryTranslatableContent",
"CategoryTranslation",
"Channel",
"Checkout",
"CheckoutLine",
"Collection",
"CollectionChannelListing",
"CollectionTranslatableContent",
"CollectionTranslation",
"CustomerEvent",
"DigitalContent",
"DigitalContentUrl",
"EventDelivery",
"EventDeliveryAttempt",
"ExportEvent",
"ExportFile",
"Fulfillment",
"FulfillmentLine",
"GiftCard",
"GiftCardEvent",
"GiftCardTag",
"Group",
"Invoice",
"Menu",
"MenuItem",
"MenuItemTranslatableContent",
"MenuItemTranslation",
"Order",
"OrderDiscount",
"OrderEvent",
"OrderLine",
"Page",
"PageTranslatableContent",
"PageTranslation",
"PageType",
"Payment",
"Product",
"ProductChannelListing",
"ProductMedia",
"ProductTranslatableContent",
"ProductTranslation",
"ProductType",
"ProductVariant",
"ProductVariantChannelListing",
"ProductVariantTranslatableContent",
"ProductVariantTranslation",
"Sale",
"SaleChannelListing",
"SaleTranslatableContent",
"SaleTranslation",
"ShippingMethod",
"ShippingMethodChannelListing",
"ShippingMethodPostalCodeRule",
"ShippingMethodTranslatableContent",
"ShippingMethodTranslation",
"ShippingMethodType",
"ShippingZone",
"ShopTranslation",
"StaffNotificationRecipient",
"Stock",
"TaxClass",
"TaxConfiguration",
"Transaction",
"TransactionEvent",
"TransactionItem",
"User",
"Voucher",
"VoucherChannelListing",
"VoucherTranslatableContent",
"VoucherTranslation",
"Warehouse",
"Webhook"
],
"ObjectWithMetadata": [
"Address",
"App",
"Attribute",
"Category",
"Checkout",
"CheckoutLine",
"Collection",
"DigitalContent",
"Fulfillment",
"GiftCard",
"Invoice",
"Menu",
"MenuItem",
"Order",
"OrderLine",
"Page",
"PageType",
"Payment",
"Product",
"ProductMedia",
"ProductType",
"ProductVariant",
"Sale",
"ShippingMethod",
"ShippingMethodType",
"ShippingZone",
"TaxClass",
"TaxConfiguration",
"TransactionItem",
"User",
"Voucher",
"Warehouse"
],
"TaxSourceLine": [
"CheckoutLine",
"OrderLine"
],
"TaxSourceObject": [
"Checkout",
"Order"
],
"TranslatableItem": [
"ProductTranslatableContent",
"CollectionTranslatableContent",
"CategoryTranslatableContent",
"AttributeTranslatableContent",
"AttributeValueTranslatableContent",
"ProductVariantTranslatableContent",
"PageTranslatableContent",
"ShippingMethodTranslatableContent",
"SaleTranslatableContent",
"VoucherTranslatableContent",
"MenuItemTranslatableContent"
],
"TranslationTypes": [
"ProductTranslation",
"CollectionTranslation",
"CategoryTranslation",
"AttributeTranslation",
"AttributeValueTranslation",
"ProductVariantTranslation",
"PageTranslation",
"ShippingMethodTranslation",
"SaleTranslation",
"VoucherTranslation",
"MenuItemTranslation"
],
"UserOrApp": [
"User",
"App"
],
"_Entity": [
"App",
"Address",
"User",
"Group",
"ProductVariant",
"Product",
"ProductType",
"ProductMedia",
"Category",
"Collection",
"PageType"
]
}
};
export default result;

35
src/graphql/hooks.generated.ts
View file

@ -96,6 +96,12 @@ export const AppListItemFragmentDoc = gql`
} }
} }
${AppPermissionFragmentDoc}`; ${AppPermissionFragmentDoc}`;
export const AppAvatarFragmentDoc = gql`
fragment AppAvatar on App {
id
name
}
`;
export const AttributeFragmentDoc = gql` export const AttributeFragmentDoc = gql`
fragment Attribute on Attribute { fragment Attribute on Attribute {
id id
@ -166,6 +172,18 @@ export const UserFragmentDoc = gql`
} }
} }
${UserPermissionFragmentDoc}`; ${UserPermissionFragmentDoc}`;
export const UserBaseAvatarFragmentDoc = gql`
fragment UserBaseAvatar on User {
id
firstName
lastName
email
avatar {
url
alt
}
}
`;
export const CategoryFragmentDoc = gql` export const CategoryFragmentDoc = gql`
fragment Category on Category { fragment Category on Category {
id id
@ -1436,6 +1454,9 @@ export const OrderDetailsFragmentDoc = gql`
billingAddress { billingAddress {
...Address ...Address
} }
transactions {
id
}
giftCards { giftCards {
events { events {
id id
@ -1885,6 +1906,12 @@ export const PluginsDetailsFragmentDoc = gql`
} }
} }
${PluginConfigurationExtendedFragmentDoc}`; ${PluginConfigurationExtendedFragmentDoc}`;
export const PaymentGatewayFragmentDoc = gql`
fragment PaymentGateway on PaymentGateway {
name
id
}
`;
export const ProductTypeFragmentDoc = gql` export const ProductTypeFragmentDoc = gql`
fragment ProductType on ProductType { fragment ProductType on ProductType {
id id
@ -2439,6 +2466,14 @@ export const StaffMemberDetailsFragmentDoc = gql`
} }
} }
${StaffMemberFragmentDoc}`; ${StaffMemberFragmentDoc}`;
export const StaffMemberAvatarFragmentDoc = gql`
fragment StaffMemberAvatar on User {
...StaffMember
avatar(size: 120) {
url
}
}
${StaffMemberFragmentDoc}`;
export const CountryFragmentDoc = gql` export const CountryFragmentDoc = gql`
fragment Country on CountryDisplay { fragment Country on CountryDisplay {
country country

3774
src/graphql/hooks.transactions.generated.ts Normal file
View file

File diff suppressed because it is too large Load diff

25
src/graphql/transactions.ts Normal file
View file

@ -0,0 +1,25 @@
export * from "./hooks.transactions.generated";
export * from "./types.transactions.generated";
export * from "./typePolicies.transactions.generated";
export { default as introspectionQueryResultData } from "./fragmentTypes.transactions.generated";
// Rename OrderDetailsWithTransactions -> OrderDetails
export type {
OrderDetailsWithTransactionsQueryResult as OrderDetailsQueryResult,
OrderDetailsWithTransactionsQueryHookResult as OrderDetailsQueryHookResult,
OrderDetailsWithTransactionsLazyQueryHookResult as OrderDetailsLazyQueryHookResult,
} from "./hooks.transactions.generated";
export {
OrderDetailsWithTransactionsFragmentDoc as OrderDetailsFragmentDoc,
OrderDetailsWithTransactionsDocument as OrderDetailsDocument,
useOrderDetailsWithTransactionsQuery as useOrderDetailsQuery,
useOrderDetailsWithTransactionsLazyQuery as useOrderDetailsLazyQuery,
} from "./hooks.transactions.generated";
export type {
OrderDetailsWithTransactionsFragment as OrderDetailsFragment,
OrderDetailsWithTransactionsQueryVariables as OrderDetailsQueryVariables,
OrderDetailsWithTransactionsQuery as OrderDetailsQuery,
} from "./types.transactions.generated";

8492
src/graphql/typePolicies.transactions.generated.ts Normal file
View file

File diff suppressed because one or more lines are too long

54
src/graphql/types.generated.ts
View file

File diff suppressed because one or more lines are too long

7627
src/graphql/types.transactions.generated.ts Normal file
View file

File diff suppressed because one or more lines are too long

13
src/intl.ts
View file

@ -186,6 +186,14 @@ export const commonMessages = defineMessages({
id: "z9c6/C", id: "z9c6/C",
defaultMessage: "Deprecated", defaultMessage: "Deprecated",
}, },
pspReference: {
defaultMessage: "PSP Reference",
id: "kMziE/",
},
pspReferenceOptional: {
defaultMessage: "PSP Reference (optional)",
id: "GJwcSd",
},
settings: { settings: {
id: "D3idYv", id: "D3idYv",
defaultMessage: "Settings", defaultMessage: "Settings",
@ -237,6 +245,11 @@ export const buttonMessages = defineMessages({
defaultMessage: "Approve", defaultMessage: "Approve",
description: "button", description: "button",
}, },
apply: {
defaultMessage: "Apply",
id: "iBW3rG",
description: "button",
},
assign: { assign: {
id: "oiuwOl", id: "oiuwOl",
defaultMessage: "Assign", defaultMessage: "Assign",

18
src/misc.ts
View file

@ -339,12 +339,18 @@ export function getUserName(user?: User, returnEmail?: boolean) {
} }
export function getUserInitials(user?: User) { export function getUserInitials(user?: User) {
return user && (user.email || (user.firstName && user.lastName)) const hasName = user?.firstName && user?.lastName;
? (user.firstName && user.lastName const hasEmail = !!user?.email;
? user.firstName[0] + user.lastName[0]
: user.email.slice(0, 2) if (hasName) {
).toUpperCase() return `${user.firstName[0] + user.lastName[0]}`.toUpperCase();
: undefined; }
if (hasEmail) {
return user.email.slice(0, 2).toUpperCase();
}
return undefined;
} }
interface AnyEventWithPropagation { interface AnyEventWithPropagation {

37
src/orders/components/OrderAddTransaction/OrderAddTransaction.test.tsx Normal file
View file

@ -0,0 +1,37 @@
import { orderWithTransactions } from "@dashboard/orders/fixtures";
import Wrapper from "@test/wrapper";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import OrderAddTransaction from "./OrderAddTransaction";
describe("OrderAddTransaction", () => {
it("renders skeleton when order is loading", () => {
render(
<OrderAddTransaction
order={undefined}
onAddTransaction={() => undefined}
/>,
);
expect(screen.queryByRole("button")).not.toBeInTheDocument();
});
it("calls onAddTransaction when clicked", async () => {
const callback = jest.fn();
render(
<Wrapper>
<OrderAddTransaction
order={orderWithTransactions}
onAddTransaction={callback}
/>
</Wrapper>,
);
const button = await screen.findByRole("button");
expect(button).toBeInTheDocument();
await userEvent.click(button);
expect(callback).toHaveBeenCalled();
});
});

50
src/orders/components/OrderAddTransaction/OrderAddTransaction.tsx Normal file
View file

@ -0,0 +1,50 @@
import Skeleton from "@dashboard/components/Skeleton";
import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
import { Button, makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage } from "react-intl";
import { addTransactionMessages } from "./messages";
interface OrderAddTransactionProps {
order: OrderDetailsFragment;
onAddTransaction: () => void;
}
const useStyles = makeStyles(
theme => ({
wrapper: {
display: "flex",
justifyContent: "flex-end",
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
paddingRight: theme.spacing(4),
},
}),
{ name: "OrderAddTransaction" },
);
const OrderAddTransaction: React.FC<OrderAddTransactionProps> = ({
order,
onAddTransaction,
}) => {
const classes = useStyles();
if (!order) {
return (
<div className={classes.wrapper}>
<Skeleton />
</div>
);
}
return (
<div className={classes.wrapper}>
<Button variant="primary" onClick={onAddTransaction}>
<FormattedMessage {...addTransactionMessages.captureTransaction} />
</Button>
</div>
);
};
export default OrderAddTransaction;

2
src/orders/components/OrderAddTransaction/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./OrderAddTransaction";
export * from "./OrderAddTransaction";

14
src/orders/components/OrderAddTransaction/messages.ts Normal file
View file

@ -0,0 +1,14 @@
import { defineMessages } from "react-intl";
export const addTransactionMessages = defineMessages({
captureTransaction: {
defaultMessage: "Capture manual transaction",
id: "hnaOnB",
description: "button, opens modal to create transaction in order",
},
markAsPaid: {
defaultMessage: "Mark order as paid",
id: "CrY98m",
description: "button, marks order as paid (legacy payments)",
},
});

119
src/orders/components/OrderCardTitle/OrderCardTitle.tsx
View file

@ -3,94 +3,17 @@ import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
import { FulfillmentStatus } from "@dashboard/graphql"; import { FulfillmentStatus } from "@dashboard/graphql";
import { StatusType } from "@dashboard/types"; import { StatusType } from "@dashboard/types";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import { CircleIndicator, makeStyles } from "@saleor/macaw-ui"; import { CircleIndicator } from "@saleor/macaw-ui";
import camelCase from "lodash/camelCase";
import React from "react"; import React from "react";
import { defineMessages, FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
const useStyles = makeStyles( import { orderTitleMessages } from "./messages";
theme => ({ import { useStyles } from "./styles";
title: { import { getFulfillmentTotalQuantity, getOrderTitleMessage } from "./utils";
width: "100%",
display: "flex",
justifyContent: "flex-start",
},
orderNumber: {
display: "inline",
marginLeft: theme.spacing(1),
},
warehouseName: {
float: "right",
alignSelf: "center",
color: theme.palette.text.secondary,
margin: `auto ${theme.spacing(1)} auto auto`,
},
cardHeader: {
fontSize: "24px",
fontWeight: 500,
lineHeight: "29px",
letterSpacing: "0.02em",
textAlign: "left",
},
indicator: {
display: "flex",
alignItems: "center",
},
}),
{ name: "OrderCardTitle" },
);
const messages = defineMessages({ export type CardTitleStatus = FulfillmentStatus | "unfulfilled";
canceled: {
defaultMessage: "Canceled ({quantity})",
id: "mGcw06",
description: "canceled fulfillment, section header",
},
fulfilled: {
id: "iJrw63",
defaultMessage: "Fulfilled ({quantity})",
description: "section header",
},
refunded: {
id: "oQhFlK",
defaultMessage: "Refunded ({quantity})",
description: "refunded fulfillment, section header",
},
refundedAndReturned: {
id: "jNSOSu",
defaultMessage: "Refunded and Returned ({quantity})",
description: "cancelled fulfillment, section header",
},
replaced: {
id: "3stu21",
defaultMessage: "Replaced ({quantity})",
description: "refunded fulfillment, section header",
},
returned: {
id: "eCRaHe",
defaultMessage: "Returned ({quantity})",
description: "refunded fulfillment, section header",
},
waitingForApproval: {
id: "9ssWj+",
defaultMessage: "Waiting for approval ({quantity})",
description: "unapproved fulfillment, section header",
},
unfulfilled: {
defaultMessage: "Unfulfilled ({quantity})",
id: "Kc2/e7",
description: "section header",
},
fulfilledFrom: {
id: "ZPOyI1",
defaultMessage: "Fulfilled from {warehouseName}",
description: "fulfilled fulfillment, section header",
},
});
type CardTitleStatus = FulfillmentStatus | "unfulfilled"; export type CardTitleLines = Array<{
type CardTitleLines = Array<{
quantity: number; quantity: number;
quantityToFulfill?: number; quantityToFulfill?: number;
}>; }>;
@ -129,9 +52,7 @@ const selectStatus = (status: CardTitleStatus) => {
const OrderCardTitle: React.FC<OrderCardTitleProps> = ({ const OrderCardTitle: React.FC<OrderCardTitleProps> = ({
lines = [], lines = [],
fulfillmentOrder,
status, status,
orderNumber = "",
warehouseName, warehouseName,
withStatus = false, withStatus = false,
toolbar, toolbar,
@ -140,24 +61,9 @@ const OrderCardTitle: React.FC<OrderCardTitleProps> = ({
const intl = useIntl(); const intl = useIntl();
const classes = useStyles({}); const classes = useStyles({});
const fulfillmentName = const messageForStatus = getOrderTitleMessage(status);
orderNumber && fulfillmentOrder
? `#${orderNumber}-${fulfillmentOrder}`
: "";
const messageForStatus = messages[camelCase(status)] || messages.unfulfilled; const totalQuantity = getFulfillmentTotalQuantity(lines, status);
const totalQuantity =
status === "unfulfilled"
? lines.reduce(
(resultQuantity, line) =>
resultQuantity + (line.quantityToFulfill ?? line.quantity),
0,
)
: lines.reduce(
(resultQuantity, { quantity }) => resultQuantity + quantity,
0,
);
return ( return (
<DefaultCardTitle <DefaultCardTitle
@ -172,15 +78,12 @@ const OrderCardTitle: React.FC<OrderCardTitleProps> = ({
)} )}
<HorizontalSpacer spacing={2} /> <HorizontalSpacer spacing={2} />
<Typography className={classes.cardHeader}> <Typography className={classes.cardHeader}>
{intl.formatMessage(messageForStatus, { {intl.formatMessage(messageForStatus)} ({totalQuantity})
fulfillmentName,
quantity: totalQuantity,
})}
</Typography> </Typography>
{!!warehouseName && ( {!!warehouseName && (
<Typography className={classes.warehouseName} variant="caption"> <Typography className={classes.warehouseName} variant="caption">
<FormattedMessage <FormattedMessage
{...messages.fulfilledFrom} {...orderTitleMessages.fulfilledFrom}
values={{ values={{
warehouseName, warehouseName,
}} }}

49
src/orders/components/OrderCardTitle/messages.ts Normal file
View file

@ -0,0 +1,49 @@
import { defineMessages } from "react-intl";
export const orderTitleMessages = defineMessages({
canceled: {
defaultMessage: "Canceled",
id: "Z7lX6t",
description: "canceled fulfillment, section header",
},
fulfilled: {
id: "16iwCI",
defaultMessage: "Fulfilled",
description: "section header",
},
refunded: {
id: "+SYLEL",
defaultMessage: "Refunded",
description: "refunded fulfillment, section header",
},
refundedAndReturned: {
id: "LJPHdt",
defaultMessage: "Refunded and Returned",
description: "cancelled fulfillment, section header",
},
replaced: {
id: "jz2SlO",
defaultMessage: "Replaced",
description: "refunded fulfillment, section header",
},
returned: {
id: "Z8TzWt",
defaultMessage: "Returned",
description: "refunded fulfillment, section header",
},
waitingForApproval: {
id: "DyGpz4",
defaultMessage: "Waiting for approval",
description: "unapproved fulfillment, section header",
},
unfulfilled: {
defaultMessage: "Unfulfilled",
id: "/xXvjF",
description: "section header",
},
fulfilledFrom: {
id: "ZPOyI1",
defaultMessage: "Fulfilled from {warehouseName}",
description: "fulfilled fulfillment, section header",
},
});

33
src/orders/components/OrderCardTitle/styles.ts Normal file
View file

@ -0,0 +1,33 @@
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
title: {
width: "100%",
display: "flex",
justifyContent: "flex-start",
},
orderNumber: {
display: "inline",
marginLeft: theme.spacing(1),
},
warehouseName: {
float: "right",
alignSelf: "center",
color: theme.palette.text.secondary,
margin: `auto ${theme.spacing(1)} auto auto`,
},
cardHeader: {
fontSize: "24px",
fontWeight: 500,
lineHeight: "29px",
letterSpacing: "0.02em",
textAlign: "left",
},
indicator: {
display: "flex",
alignItems: "center",
},
}),
{ name: "OrderCardTitle" },
);

22
src/orders/components/OrderCardTitle/utils.ts Normal file
View file

@ -0,0 +1,22 @@
import camelCase from "lodash/camelCase";
import { orderTitleMessages } from "./messages";
import { CardTitleLines, CardTitleStatus } from "./OrderCardTitle";
export const getOrderTitleMessage = (status: CardTitleStatus) =>
orderTitleMessages[camelCase(status)] || orderTitleMessages.unfulfilled;
export const getFulfillmentTotalQuantity = (
lines: CardTitleLines,
status: CardTitleStatus,
) =>
status === "unfulfilled"
? lines.reduce(
(resultQuantity, line) =>
resultQuantity + (line.quantityToFulfill ?? line.quantity),
0,
)
: lines.reduce(
(resultQuantity, { quantity }) => resultQuantity + quantity,
0,
);

2
src/orders/components/OrderCustomer/AddrssTextError.tsx
View file

@ -1,5 +1,5 @@
import FormSpacer from "@dashboard/components/FormSpacer"; import FormSpacer from "@dashboard/components/FormSpacer";
import { OrderErrorFragment } from "@dashboard/graphql"; import { OrderErrorFragment } from "@dashboard/orders/types";
import getOrderErrorMessage from "@dashboard/utils/errors/order"; import getOrderErrorMessage from "@dashboard/utils/errors/order";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import React from "react"; import React from "react";

15
src/orders/components/OrderCustomer/OrderCustomer.tsx
View file

@ -8,15 +8,14 @@ import Link from "@dashboard/components/Link";
import RequirePermissions from "@dashboard/components/RequirePermissions"; import RequirePermissions from "@dashboard/components/RequirePermissions";
import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField"; import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import { import { PermissionEnum, SearchCustomersQuery } from "@dashboard/graphql";
OrderDetailsFragment,
OrderErrorCode,
OrderErrorFragment,
PermissionEnum,
SearchCustomersQuery,
} from "@dashboard/graphql";
import useStateFromProps from "@dashboard/hooks/useStateFromProps"; import useStateFromProps from "@dashboard/hooks/useStateFromProps";
import { buttonMessages } from "@dashboard/intl"; import { buttonMessages } from "@dashboard/intl";
import {
OrderErrorCode,
OrderErrorFragment,
OrderSharedType,
} from "@dashboard/orders/types";
import { FetchMoreProps, RelayToFlat } from "@dashboard/types"; import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler";
import { Card, CardContent, Typography } from "@material-ui/core"; import { Card, CardContent, Typography } from "@material-ui/core";
@ -37,7 +36,7 @@ export interface CustomerEditData {
} }
export interface OrderCustomerProps extends Partial<FetchMoreProps> { export interface OrderCustomerProps extends Partial<FetchMoreProps> {
order: OrderDetailsFragment; order: OrderSharedType;
users?: RelayToFlat<SearchCustomersQuery["search"]>; users?: RelayToFlat<SearchCustomersQuery["search"]>;
loading?: boolean; loading?: boolean;
errors: OrderErrorFragment[]; errors: OrderErrorFragment[];

8
src/orders/components/OrderCustomer/PickupAnnotation.tsx
View file

@ -1,8 +1,6 @@
import FormSpacer from "@dashboard/components/FormSpacer"; import FormSpacer from "@dashboard/components/FormSpacer";
import { import { WarehouseClickAndCollectOptionEnum } from "@dashboard/graphql";
OrderDetailsFragment, import { OrderSharedType } from "@dashboard/orders/types";
WarehouseClickAndCollectOptionEnum,
} from "@dashboard/graphql";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -10,7 +8,7 @@ import { FormattedMessage } from "react-intl";
import messages from "./messages"; import messages from "./messages";
interface PickupAnnotationProps { interface PickupAnnotationProps {
order?: OrderDetailsFragment; order?: OrderSharedType;
} }
export const PickupAnnotation: React.FC<PickupAnnotationProps> = ({ export const PickupAnnotation: React.FC<PickupAnnotationProps> = ({

274
src/orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx
View file

@ -1,24 +1,29 @@
import placeholderImage from "@assets/images/placeholder60x60.png";
import { import {
FulfillmentStatus, FulfillmentStatus,
GiftCardEventsEnum,
OrderStatus, OrderStatus,
PaymentChargeStatusEnum, PaymentChargeStatusEnum,
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import { import {
order as orderFixture, grantedRefunds,
shop as shopFixture, ORDER_AMOUNT,
orderWithTransactions as order,
payments,
prepareMoney,
shopWithTransactions,
transactions,
} from "@dashboard/orders/fixtures"; } from "@dashboard/orders/fixtures";
import { OrderBothTypes } from "@dashboard/orders/types";
import Decorator from "@dashboard/storybook/Decorator"; import Decorator from "@dashboard/storybook/Decorator";
import { storiesOf } from "@storybook/react"; import { storiesOf } from "@storybook/react";
import React from "react"; import React from "react";
import OrderDetailsPage, { OrderDetailsPageProps } from "./OrderDetailsPage"; import OrderDetailsPage, { OrderDetailsPageProps } from "./OrderDetailsPage";
const order = orderFixture(placeholderImage);
const props: Omit<OrderDetailsPageProps, "classes"> = { const props: Omit<OrderDetailsPageProps, "classes"> = {
disabled: false, disabled: false,
onBillingAddressEdit: undefined, onBillingAddressEdit: undefined,
onTransactionAction: () => undefined,
onFulfillmentApprove: () => undefined, onFulfillmentApprove: () => undefined,
onFulfillmentCancel: () => undefined, onFulfillmentCancel: () => undefined,
onFulfillmentTrackingNumberUpdate: () => undefined, onFulfillmentTrackingNumberUpdate: () => undefined,
@ -30,47 +35,52 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
onOrderFulfill: undefined, onOrderFulfill: undefined,
onOrderReturn: () => undefined, onOrderReturn: () => undefined,
onPaymentCapture: undefined, onPaymentCapture: undefined,
onPaymentPaid: undefined, onMarkAsPaid: undefined,
onPaymentRefund: undefined,
onPaymentVoid: undefined, onPaymentVoid: undefined,
onPaymentRefund: undefined,
onProductClick: undefined, onProductClick: undefined,
onProfileView: () => undefined, onProfileView: () => undefined,
onShippingAddressEdit: undefined, onShippingAddressEdit: undefined,
onSubmit: () => undefined, onSubmit: () => undefined,
onAddManualTransaction: () => undefined,
order, order,
errors: [], errors: [],
shop: shopFixture, shop: shopWithTransactions,
saveButtonBarState: "default", saveButtonBarState: "default",
}; };
storiesOf("Orders / Order details", module) storiesOf("Orders / Order details", module)
.addDecorator(Decorator) .addDecorator(Decorator)
.add("default", () => <OrderDetailsPage {...props} />) .add("pending", () => (
.add("loading", () => <OrderDetailsPage {...props} order={undefined} />)
.add("pending payment", () => (
<OrderDetailsPage <OrderDetailsPage
{...props} {...props}
order={{ order={{
...props.order, ...props.order,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED, paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
payments: [payments.pending],
}} }}
/> />
)) ))
.add("payment error", () => ( .add("authorized", () => (
<OrderDetailsPage <OrderDetailsPage
{...props} {...props}
order={{ order={{
...props.order, ...props.order,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED, paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
payments: [payments.authorized],
}} }}
/> />
)) ))
.add("payment confirmed", () => ( .add("completed", () => (
<OrderDetailsPage <OrderDetailsPage
{...props} {...props}
order={{ order={{
...props.order, ...props.order,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED, paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
payments: [payments.completed],
}} }}
/> />
)) ))
@ -79,28 +89,230 @@ storiesOf("Orders / Order details", module)
{...props} {...props}
order={{ order={{
...props.order, ...props.order,
paymentStatus: null, transactions: [],
}}
/>
))
.add("refunded payment", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
}}
/>
))
.add("rejected payment", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED, paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
payments: [],
totalAuthorized: prepareMoney(0),
}} }}
/> />
)) ))
.add("refunded", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
payments: [payments.refunded],
}}
/>
))
.add("partial refund", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.PARTIALLY_REFUNDED,
payments: [payments.partialRefund],
}}
/>
))
.add("rejected", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
payments: [payments.rejected],
}}
/>
));
storiesOf("Views / Orders / Order details / transactions", module)
.addDecorator(Decorator)
.add("preauthorized", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: false,
totalAuthorized: prepareMoney(),
totalCharged: prepareMoney(0),
paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED,
transactions: transactions.preauthorized,
}}
/>
))
.add("pending", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: false,
paymentStatus: PaymentChargeStatusEnum.PENDING,
transactions: transactions.pendingCharge,
}}
/>
))
.add("success", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: true,
totalAuthorized: prepareMoney(0),
totalCharged: prepareMoney(),
paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
transactions: transactions.chargeSuccess,
}}
/>
))
.add("partial capture", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: true,
totalAuthorized: prepareMoney(ORDER_AMOUNT - 10),
totalCharged: prepareMoney(10),
paymentStatus: PaymentChargeStatusEnum.PARTIALLY_CHARGED,
transactions: transactions.chargePartial,
}}
/>
))
.add("failed", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: false,
paymentStatus: PaymentChargeStatusEnum.REFUSED,
transactions: transactions.chargeFail,
}}
/>
))
.add("refund requested", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: true,
totalAuthorized: prepareMoney(0),
totalCharged: prepareMoney(),
paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
transactions: transactions.refundRequested,
}}
/>
))
.add("refund granted", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: true,
grantedRefunds,
totalGrantedRefund: prepareMoney(),
totalAuthorized: prepareMoney(0),
totalCharged: prepareMoney(),
paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
transactions: transactions.chargeSuccess,
}}
/>
))
.add("refund completed", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: true,
grantedRefunds,
totalRefunded: prepareMoney(),
totalAuthorized: prepareMoney(0),
totalCharged: prepareMoney(0),
paymentStatus: PaymentChargeStatusEnum.FULLY_REFUNDED,
transactions: transactions.refundCompleted,
}}
/>
))
.add("partial refund completed", () => (
<OrderDetailsPage
{...props}
order={{
...props.order,
isPaid: true,
grantedRefunds,
totalRefunded: prepareMoney(10),
totalAuthorized: prepareMoney(0),
totalCharged: prepareMoney(ORDER_AMOUNT - 10),
paymentStatus: PaymentChargeStatusEnum.PARTIALLY_REFUNDED,
transactions: transactions.refundPartial,
}}
/>
))
.add("paid with giftcard", () => (
<OrderDetailsPage
{...props}
order={
{
...props.order,
isPaid: true,
transactions: [],
paymentStatus: PaymentChargeStatusEnum.FULLY_CHARGED,
// gift cards are treated as dicounts
total: {
net: prepareMoney(0),
gross: prepareMoney(0),
tax: prepareMoney(0),
__typename: "TaxedMoney",
},
giftCards: [
{
__typename: "GiftCard",
id: "R2lmdENhcmQ6Ng==",
last4CodeChars: "43FA",
events: [
{
__typename: "GiftCardEvent",
id: "R2lmdENhcmRFdmVudDo1",
type: GiftCardEventsEnum.ISSUED,
orderId: null,
date: "2022-09-20T13:00:42.676174+00:00",
balance: {
__typename: "GiftCardEventBalance",
initialBalance: prepareMoney(),
currentBalance: prepareMoney(),
oldInitialBalance: null,
oldCurrentBalance: null,
},
},
{
__typename: "GiftCardEvent",
id: "R2lmdENhcmRFdmVudDo2",
type: GiftCardEventsEnum.USED_IN_ORDER,
orderId: props.order.id,
date: "2022-09-20T13:04:20.017419+00:00",
balance: {
__typename: "GiftCardEventBalance",
initialBalance: null,
currentBalance: prepareMoney(0),
oldInitialBalance: null,
oldCurrentBalance: prepareMoney(),
},
},
],
},
],
} as OrderBothTypes
}
/>
));
storiesOf("Views / Orders / Order details", module)
.addDecorator(Decorator)
.add("default", () => <OrderDetailsPage {...props} />)
.add("loading", () => <OrderDetailsPage {...props} order={undefined} />)
.add("cancelled", () => ( .add("cancelled", () => (
<OrderDetailsPage <OrderDetailsPage
{...props} {...props}

52
src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
View file

@ -10,15 +10,17 @@ import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts"; import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { OrderDetailsFragment, OrderDetailsQuery } from "@dashboard/graphql";
import { import {
OrderDetailsFragment, OrderDetailsWithTransactionsFragment,
OrderDetailsQuery, OrderDetailsWithTransactionsQuery,
OrderErrorFragment,
OrderStatus, OrderStatus,
} from "@dashboard/graphql"; TransactionActionEnum,
} from "@dashboard/graphql/transactions";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
import useNavigator from "@dashboard/hooks/useNavigator"; import useNavigator from "@dashboard/hooks/useNavigator";
import { defaultGraphiQLQuery } from "@dashboard/orders/queries"; import { defaultGraphiQLQuery } from "@dashboard/orders/queries";
import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
import { orderListUrl } from "@dashboard/orders/urls"; import { orderListUrl } from "@dashboard/orders/urls";
import { playgroundOpenHandler } from "@dashboard/utils/graphql"; import { playgroundOpenHandler } from "@dashboard/utils/graphql";
import { mapMetadataItemToInput } from "@dashboard/utils/maps"; import { mapMetadataItemToInput } from "@dashboard/utils/maps";
@ -36,15 +38,15 @@ import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDeta
import OrderFulfilledProductsCard from "../OrderFulfilledProductsCard"; import OrderFulfilledProductsCard from "../OrderFulfilledProductsCard";
import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory"; import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
import OrderInvoiceList from "../OrderInvoiceList"; import OrderInvoiceList from "../OrderInvoiceList";
import OrderPayment from "../OrderPayment/OrderPayment"; import { OrderPaymentOrTransaction } from "../OrderPaymentOrTransaction/OrderPaymentOrTransaction";
import OrderUnfulfilledProductsCard from "../OrderUnfulfilledProductsCard"; import OrderUnfulfilledProductsCard from "../OrderUnfulfilledProductsCard";
import { messages } from "./messages"; import { messages } from "./messages";
import Title from "./Title"; import Title from "./Title";
import { filteredConditionalItems, hasAnyItemsReplaceable } from "./utils"; import { filteredConditionalItems, hasAnyItemsReplaceable } from "./utils";
export interface OrderDetailsPageProps { export interface OrderDetailsPageProps {
order: OrderDetailsFragment; order: OrderDetailsFragment | OrderDetailsWithTransactionsFragment;
shop: OrderDetailsQuery["shop"]; shop: OrderDetailsQuery["shop"] | OrderDetailsWithTransactionsQuery["shop"];
shippingMethods?: Array<{ shippingMethods?: Array<{
id: string; id: string;
name: string; name: string;
@ -66,7 +68,7 @@ export interface OrderDetailsPageProps {
onOrderFulfill(); onOrderFulfill();
onProductClick?(id: string); onProductClick?(id: string);
onPaymentCapture(); onPaymentCapture();
onPaymentPaid(); onMarkAsPaid();
onPaymentRefund(); onPaymentRefund();
onPaymentVoid(); onPaymentVoid();
onShippingAddressEdit(); onShippingAddressEdit();
@ -77,6 +79,8 @@ export interface OrderDetailsPageProps {
onInvoiceClick(invoiceId: string); onInvoiceClick(invoiceId: string);
onInvoiceGenerate(); onInvoiceGenerate();
onInvoiceSend(invoiceId: string); onInvoiceSend(invoiceId: string);
onTransactionAction(transactionId: string, actionType: TransactionActionEnum);
onAddManualTransaction();
onSubmit(data: MetadataFormData): SubmitPromise; onSubmit(data: MetadataFormData): SubmitPromise;
} }
@ -95,7 +99,6 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
onOrderCancel, onOrderCancel,
onOrderFulfill, onOrderFulfill,
onPaymentCapture, onPaymentCapture,
onPaymentPaid,
onPaymentRefund, onPaymentRefund,
onPaymentVoid, onPaymentVoid,
onShippingAddressEdit, onShippingAddressEdit,
@ -108,6 +111,9 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
onOrderLineChange, onOrderLineChange,
onOrderLineRemove, onOrderLineRemove,
onShippingMethodEdit, onShippingMethodEdit,
onTransactionAction,
onAddManualTransaction,
onMarkAsPaid,
onSubmit, onSubmit,
} = props; } = props;
const navigate = useNavigator(); const navigate = useNavigator();
@ -177,7 +183,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
label: intl.formatMessage(messages.returnOrder), label: intl.formatMessage(messages.returnOrder),
onSelect: onOrderReturn, onSelect: onOrderReturn,
}, },
shouldExist: hasAnyItemsReplaceable(order), shouldExist: hasAnyItemsReplaceable(order as OrderSharedType),
}, },
]); ]);
@ -204,7 +210,10 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
return ( return (
<DetailPageLayout> <DetailPageLayout>
<TopNav href={orderListUrl()} title={<Title order={order} />}> <TopNav
href={orderListUrl()}
title={<Title order={order as OrderSharedType} />}
>
<CardMenu <CardMenu
menuItems={[ menuItems={[
...selectCardMenuItems, ...selectCardMenuItems,
@ -229,7 +238,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
) : ( ) : (
<> <>
<OrderDraftDetails <OrderDraftDetails
order={order} order={order as OrderSharedType}
errors={errors} errors={errors}
onOrderLineAdd={onOrderLineAdd} onOrderLineAdd={onOrderLineAdd}
onOrderLineChange={onOrderLineChange} onOrderLineChange={onOrderLineChange}
@ -244,28 +253,29 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
<OrderFulfilledProductsCard <OrderFulfilledProductsCard
fulfillment={fulfillment} fulfillment={fulfillment}
fulfillmentAllowUnpaid={shop?.fulfillmentAllowUnpaid} fulfillmentAllowUnpaid={shop?.fulfillmentAllowUnpaid}
order={order} order={order as OrderSharedType}
onOrderFulfillmentCancel={() => onOrderFulfillmentCancel={() =>
onFulfillmentCancel(fulfillment.id) onFulfillmentCancel(fulfillment.id)
} }
onTrackingCodeAdd={() => onTrackingCodeAdd={() =>
onFulfillmentTrackingNumberUpdate(fulfillment.id) onFulfillmentTrackingNumberUpdate(fulfillment.id)
} }
onRefund={onPaymentRefund}
onOrderFulfillmentApprove={() => onOrderFulfillmentApprove={() =>
onFulfillmentApprove(fulfillment.id) onFulfillmentApprove(fulfillment.id)
} }
/> />
</React.Fragment> </React.Fragment>
))} ))}
<OrderPayment <OrderPaymentOrTransaction
order={order} order={order}
onCapture={onPaymentCapture} shop={shop}
onMarkAsPaid={onPaymentPaid} onTransactionAction={onTransactionAction}
onRefund={onPaymentRefund} onPaymentCapture={onPaymentCapture}
onVoid={onPaymentVoid} onPaymentVoid={onPaymentVoid}
onPaymentRefund={onPaymentRefund}
onMarkAsPaid={onMarkAsPaid}
onAddManualTransaction={onAddManualTransaction}
/> />
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
<OrderHistory <OrderHistory
history={order?.events} history={order?.events}
@ -277,7 +287,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
<OrderCustomer <OrderCustomer
canEditAddresses={canEditAddresses} canEditAddresses={canEditAddresses}
canEditCustomer={false} canEditCustomer={false}
order={order} order={order as OrderSharedType}
errors={errors} errors={errors}
onBillingAddressEdit={onBillingAddressEdit} onBillingAddressEdit={onBillingAddressEdit}
onShippingAddressEdit={onShippingAddressEdit} onShippingAddressEdit={onShippingAddressEdit}

4
src/orders/components/OrderDetailsPage/Title.tsx
View file

@ -1,6 +1,6 @@
import { DateTime } from "@dashboard/components/Date"; import { DateTime } from "@dashboard/components/Date";
import { OrderDetailsFragment } from "@dashboard/graphql";
import { transformOrderStatus } from "@dashboard/misc"; import { transformOrderStatus } from "@dashboard/misc";
import { OrderSharedType } from "@dashboard/orders/types";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import { Skeleton } from "@material-ui/lab"; import { Skeleton } from "@material-ui/lab";
import { makeStyles, Pill } from "@saleor/macaw-ui"; import { makeStyles, Pill } from "@saleor/macaw-ui";
@ -9,7 +9,7 @@ import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
export interface TitleProps { export interface TitleProps {
order?: OrderDetailsFragment; order?: OrderSharedType;
} }
const useStyles = makeStyles( const useStyles = makeStyles(

6
src/orders/components/OrderDetailsPage/styles.ts
View file

@ -5,6 +5,12 @@ export const useStyles = makeStyles(
date: { date: {
marginBottom: theme.spacing(3), marginBottom: theme.spacing(3),
}, },
cardGrid: {
display: "grid",
gridTemplateColumns: "repeat(2, 1fr)",
gap: theme.spacing(2),
paddingRight: theme.spacing(4),
},
header: { header: {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",

4
src/orders/components/OrderDetailsPage/utils.ts
View file

@ -1,4 +1,4 @@
import { OrderDetailsFragment } from "@dashboard/graphql"; import { OrderSharedType } from "@dashboard/orders/types";
import { import {
getFulfilledFulfillemnts, getFulfilledFulfillemnts,
@ -6,7 +6,7 @@ import {
getWaitingFulfillments, getWaitingFulfillments,
} from "../OrderReturnPage/utils"; } from "../OrderReturnPage/utils";
export const hasAnyItemsReplaceable = (order?: OrderDetailsFragment) => { export const hasAnyItemsReplaceable = (order?: OrderSharedType) => {
if (!order) { if (!order) {
return false; return false;
} }

10
src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx
View file

@ -1,11 +1,7 @@
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import { import { ChannelUsabilityDataQuery, OrderLineInput } from "@dashboard/graphql";
ChannelUsabilityDataQuery, import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
OrderDetailsFragment,
OrderErrorFragment,
OrderLineInput,
} from "@dashboard/graphql";
import { import {
OrderDiscountContext, OrderDiscountContext,
OrderDiscountContextConsumerProps, OrderDiscountContextConsumerProps,
@ -19,7 +15,7 @@ import OrderDraftDetailsProducts from "../OrderDraftDetailsProducts";
import OrderDraftDetailsSummary from "../OrderDraftDetailsSummary"; import OrderDraftDetailsSummary from "../OrderDraftDetailsSummary";
interface OrderDraftDetailsProps { interface OrderDraftDetailsProps {
order: OrderDetailsFragment; order: OrderSharedType;
channelUsabilityData?: ChannelUsabilityDataQuery; channelUsabilityData?: ChannelUsabilityDataQuery;
errors: OrderErrorFragment[]; errors: OrderErrorFragment[];
onOrderLineAdd: () => void; onOrderLineAdd: () => void;

8
src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
View file

@ -1,7 +1,7 @@
import ResponsiveTable from "@dashboard/components/ResponsiveTable"; import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import TableRowLink from "@dashboard/components/TableRowLink"; import TableRowLink from "@dashboard/components/TableRowLink";
import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql"; import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
import { import {
OrderLineDiscountConsumer, OrderLineDiscountConsumer,
OrderLineDiscountContextConsumerProps, OrderLineDiscountContextConsumerProps,
@ -56,13 +56,15 @@ const useStyles = makeStyles(
); );
interface OrderDraftDetailsProductsProps { interface OrderDraftDetailsProductsProps {
order?: OrderDetailsFragment; order?: OrderSharedType;
errors: OrderErrorFragment[]; errors: OrderErrorFragment[];
onOrderLineChange: (id: string, data: FormData) => void; onOrderLineChange: (id: string, data: FormData) => void;
onOrderLineRemove: (id: string) => void; onOrderLineRemove: (id: string) => void;
} }
const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = props => { const OrderDraftDetailsProducts: React.FC<
OrderDraftDetailsProductsProps
> = props => {
const { order, errors, onOrderLineChange, onOrderLineRemove } = props; const { order, errors, onOrderLineChange, onOrderLineRemove } = props;
const lines = order?.lines ?? []; const lines = order?.lines ?? [];

7
src/orders/components/OrderDraftDetailsProducts/TableLine.tsx
View file

@ -3,11 +3,8 @@ import Money from "@dashboard/components/Money";
import TableCellAvatar from "@dashboard/components/TableCellAvatar"; import TableCellAvatar from "@dashboard/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@dashboard/components/TableCellAvatar/Avatar"; import { AVATAR_MARGIN } from "@dashboard/components/TableCellAvatar/Avatar";
import TableRowLink from "@dashboard/components/TableRowLink"; import TableRowLink from "@dashboard/components/TableRowLink";
import { import { OrderLineFragment, OrderLineInput } from "@dashboard/graphql";
OrderErrorFragment, import { OrderErrorFragment } from "@dashboard/orders/types";
OrderLineFragment,
OrderLineInput,
} from "@dashboard/graphql";
import { OrderLineDiscountContextConsumerProps } from "@dashboard/products/components/OrderDiscountProviders/OrderLineDiscountProvider"; import { OrderLineDiscountContextConsumerProps } from "@dashboard/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
import { TableCell, Typography } from "@material-ui/core"; import { TableCell, Typography } from "@material-ui/core";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";

3
src/orders/components/OrderDraftDetailsProducts/useLineAlerts.ts
View file

@ -1,4 +1,5 @@
import { OrderErrorFragment, OrderLineFragment } from "@dashboard/graphql"; import { OrderLineFragment } from "@dashboard/graphql";
import { OrderErrorFragment } from "@dashboard/orders/types";
import getOrderErrorMessage from "@dashboard/utils/errors/order"; import getOrderErrorMessage from "@dashboard/utils/errors/order";
import { useMemo } from "react"; import { useMemo } from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";

9
src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx
View file

@ -1,11 +1,8 @@
import HorizontalSpacer from "@dashboard/components/HorizontalSpacer"; import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
import Link from "@dashboard/components/Link"; import Link from "@dashboard/components/Link";
import Money from "@dashboard/components/Money"; import Money from "@dashboard/components/Money";
import { import { DiscountValueTypeEnum } from "@dashboard/graphql";
DiscountValueTypeEnum, import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
OrderDetailsFragment,
OrderErrorFragment,
} from "@dashboard/graphql";
import { OrderDiscountContextConsumerProps } from "@dashboard/products/components/OrderDiscountProviders/OrderDiscountProvider"; import { OrderDiscountContextConsumerProps } from "@dashboard/products/components/OrderDiscountProviders/OrderDiscountProvider";
import { OrderDiscountData } from "@dashboard/products/components/OrderDiscountProviders/types"; import { OrderDiscountData } from "@dashboard/products/components/OrderDiscountProviders/types";
import { getFormErrors } from "@dashboard/utils/errors"; import { getFormErrors } from "@dashboard/utils/errors";
@ -61,7 +58,7 @@ const PRICE_PLACEHOLDER = "---";
interface OrderDraftDetailsSummaryProps interface OrderDraftDetailsSummaryProps
extends OrderDiscountContextConsumerProps { extends OrderDiscountContextConsumerProps {
disabled?: boolean; disabled?: boolean;
order: OrderDetailsFragment; order: OrderSharedType;
errors: OrderErrorFragment[]; errors: OrderErrorFragment[];
onShippingMethodEdit: () => void; onShippingMethodEdit: () => void;
} }

10
src/orders/components/OrderDraftPage/OrderDraftAlert.tsx
View file

@ -1,7 +1,5 @@
import { import { ChannelUsabilityDataQuery } from "@dashboard/graphql";
ChannelUsabilityDataQuery, import { OrderSharedType } from "@dashboard/orders/types";
OrderDetailsFragment,
} from "@dashboard/graphql";
import { Alert, AlertProps } from "@saleor/macaw-ui"; import { Alert, AlertProps } from "@saleor/macaw-ui";
import React from "react"; import React from "react";
import { MessageDescriptor, useIntl } from "react-intl"; import { MessageDescriptor, useIntl } from "react-intl";
@ -11,7 +9,7 @@ import { alertMessages } from "./messages";
import { useAlertStyles } from "./styles"; import { useAlertStyles } from "./styles";
const getAlerts = ( const getAlerts = (
order?: OrderDetailsFragment, order?: OrderSharedType,
channelUsabilityData?: ChannelUsabilityDataQuery, channelUsabilityData?: ChannelUsabilityDataQuery,
) => { ) => {
const canDetermineShippingMethods = const canDetermineShippingMethods =
@ -38,7 +36,7 @@ const getAlerts = (
}; };
export type OrderDraftAlertProps = Omit<AlertProps, "variant" | "close"> & { export type OrderDraftAlertProps = Omit<AlertProps, "variant" | "close"> & {
order?: OrderDetailsFragment; order?: OrderSharedType;
channelUsabilityData?: ChannelUsabilityDataQuery; channelUsabilityData?: ChannelUsabilityDataQuery;
}; };

15
src/orders/components/OrderDraftPage/OrderDraftPage.tsx
View file

@ -7,14 +7,17 @@ import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import { import {
ChannelUsabilityDataQuery, ChannelUsabilityDataQuery,
OrderDetailsFragment,
OrderErrorFragment,
OrderLineInput, OrderLineInput,
SearchCustomersQuery, SearchCustomersQuery,
} from "@dashboard/graphql"; } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
import useNavigator from "@dashboard/hooks/useNavigator"; import useNavigator from "@dashboard/hooks/useNavigator";
import OrderChannelSectionCard from "@dashboard/orders/components/OrderChannelSectionCard"; import OrderChannelSectionCard from "@dashboard/orders/components/OrderChannelSectionCard";
import {
OrderBothTypes,
OrderErrorFragment,
OrderSharedType,
} from "@dashboard/orders/types";
import { orderDraftListUrl } from "@dashboard/orders/urls"; import { orderDraftListUrl } from "@dashboard/orders/urls";
import { FetchMoreProps, RelayToFlat } from "@dashboard/types"; import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
@ -30,7 +33,7 @@ import OrderDraftAlert from "./OrderDraftAlert";
export interface OrderDraftPageProps extends FetchMoreProps { export interface OrderDraftPageProps extends FetchMoreProps {
disabled: boolean; disabled: boolean;
order?: OrderDetailsFragment; order?: OrderBothTypes;
channelUsabilityData?: ChannelUsabilityDataQuery; channelUsabilityData?: ChannelUsabilityDataQuery;
users: RelayToFlat<SearchCustomersQuery["search"]>; users: RelayToFlat<SearchCustomersQuery["search"]>;
usersLoading: boolean; usersLoading: boolean;
@ -113,11 +116,11 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
</TopNav> </TopNav>
<DetailPageLayout.Content> <DetailPageLayout.Content>
<OrderDraftAlert <OrderDraftAlert
order={order} order={order as OrderSharedType}
channelUsabilityData={channelUsabilityData} channelUsabilityData={channelUsabilityData}
/> />
<OrderDraftDetails <OrderDraftDetails
order={order} order={order as OrderSharedType}
channelUsabilityData={channelUsabilityData} channelUsabilityData={channelUsabilityData}
errors={errors} errors={errors}
onOrderLineAdd={onOrderLineAdd} onOrderLineAdd={onOrderLineAdd}
@ -141,7 +144,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
hasMore={hasMore} hasMore={hasMore}
loading={usersLoading} loading={usersLoading}
errors={errors} errors={errors}
order={order} order={order as OrderSharedType}
users={users} users={users}
onBillingAddressEdit={onBillingAddressEdit} onBillingAddressEdit={onBillingAddressEdit}
onCustomerEdit={onCustomerEdit} onCustomerEdit={onCustomerEdit}

10
src/orders/components/OrderFulfillPage/messages.ts
View file

@ -1,16 +1,6 @@
import { defineMessages } from "react-intl"; import { defineMessages } from "react-intl";
export const messages = defineMessages({ export const messages = defineMessages({
headerOrder: {
id: "6u4K7e",
defaultMessage: "Order",
description: "page header",
},
headerOrderNumber: {
id: "kPIZ65",
defaultMessage: "Order #{orderNumber}",
description: "page header",
},
headerOrderNumberAddFulfillment: { headerOrderNumberAddFulfillment: {
id: "CJpx4E", id: "CJpx4E",
defaultMessage: "Order no. {orderNumber} - Add Fulfillment", defaultMessage: "Order no. {orderNumber} - Add Fulfillment",

11
src/orders/components/OrderFulfilledProductsCard/ActionButtons.tsx
View file

@ -1,6 +1,7 @@
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { FulfillmentStatus } from "@dashboard/graphql"; import { FulfillmentStatus } from "@dashboard/graphql";
import { buttonMessages, commonMessages } from "@dashboard/intl"; import { buttonMessages, commonMessages } from "@dashboard/intl";
import { orderPaymentRefundUrl } from "@dashboard/orders/urls";
import { CardActions, Typography } from "@material-ui/core"; import { CardActions, Typography } from "@material-ui/core";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -9,12 +10,13 @@ import { actionButtonsMessages } from "./messages";
import useStyles from "./styles"; import useStyles from "./styles";
interface AcionButtonsProps { interface AcionButtonsProps {
orderId: string;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber?: string; trackingNumber?: string;
orderIsPaid?: boolean; orderIsPaid?: boolean;
fulfillmentAllowUnpaid: boolean; fulfillmentAllowUnpaid: boolean;
hasTransactions: boolean;
onTrackingCodeAdd(); onTrackingCodeAdd();
onRefund();
onApprove(); onApprove();
} }
@ -25,12 +27,13 @@ const statusesToShow = [
]; ];
const ActionButtons: React.FC<AcionButtonsProps> = ({ const ActionButtons: React.FC<AcionButtonsProps> = ({
orderId,
status, status,
trackingNumber, trackingNumber,
orderIsPaid, orderIsPaid,
fulfillmentAllowUnpaid, fulfillmentAllowUnpaid,
hasTransactions,
onTrackingCodeAdd, onTrackingCodeAdd,
onRefund,
onApprove, onApprove,
}) => { }) => {
const classes = useStyles(); const classes = useStyles();
@ -58,10 +61,10 @@ const ActionButtons: React.FC<AcionButtonsProps> = ({
); );
} }
if (status === FulfillmentStatus.RETURNED) { if (status === FulfillmentStatus.RETURNED && !hasTransactions) {
return ( return (
<CardActions> <CardActions>
<Button variant="primary" onClick={onRefund}> <Button variant="primary" href={orderPaymentRefundUrl(orderId)}>
<FormattedMessage {...actionButtonsMessages.refund} /> <FormattedMessage {...actionButtonsMessages.refund} />
</Button> </Button>
</CardActions> </CardActions>

15
src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
View file

@ -1,7 +1,9 @@
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ResponsiveTable from "@dashboard/components/ResponsiveTable"; import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import { FulfillmentStatus, OrderDetailsFragment } from "@dashboard/graphql"; import { FulfillmentStatus, OrderDetailsFragment } from "@dashboard/graphql";
import { useFlags } from "@dashboard/hooks/useFlags";
import TrashIcon from "@dashboard/icons/Trash"; import TrashIcon from "@dashboard/icons/Trash";
import { orderHasTransactions, OrderSharedType } from "@dashboard/orders/types";
import { mergeRepeatedOrderLines } from "@dashboard/orders/utils/data"; import { mergeRepeatedOrderLines } from "@dashboard/orders/utils/data";
import { Card, CardContent, TableBody } from "@material-ui/core"; import { Card, CardContent, TableBody } from "@material-ui/core";
import { IconButton } from "@saleor/macaw-ui"; import { IconButton } from "@saleor/macaw-ui";
@ -18,11 +20,10 @@ import useStyles from "./styles";
interface OrderFulfilledProductsCardProps { interface OrderFulfilledProductsCardProps {
fulfillment: OrderDetailsFragment["fulfillments"][0]; fulfillment: OrderDetailsFragment["fulfillments"][0];
fulfillmentAllowUnpaid: boolean; fulfillmentAllowUnpaid: boolean;
order?: OrderDetailsFragment; order?: OrderSharedType;
onOrderFulfillmentApprove: () => void; onOrderFulfillmentApprove: () => void;
onOrderFulfillmentCancel: () => void; onOrderFulfillmentCancel: () => void;
onTrackingCodeAdd: () => void; onTrackingCodeAdd: () => void;
onRefund: () => void;
} }
const statusesToMergeLines = [ const statusesToMergeLines = [
@ -46,9 +47,11 @@ const OrderFulfilledProductsCard: React.FC<
onOrderFulfillmentApprove, onOrderFulfillmentApprove,
onOrderFulfillmentCancel, onOrderFulfillmentCancel,
onTrackingCodeAdd, onTrackingCodeAdd,
onRefund,
} = props; } = props;
const classes = useStyles(props); const classes = useStyles(props);
const { orderTransactions: transactionsFeatureFlag } = useFlags([
"orderTransactions",
]);
if (!fulfillment) { if (!fulfillment) {
return null; return null;
@ -96,13 +99,17 @@ const OrderFulfilledProductsCard: React.FC<
<ExtraInfoLines fulfillment={fulfillment} /> <ExtraInfoLines fulfillment={fulfillment} />
</ResponsiveTable> </ResponsiveTable>
<ActionButtons <ActionButtons
orderId={order?.id}
status={fulfillment?.status} status={fulfillment?.status}
trackingNumber={fulfillment?.trackingNumber} trackingNumber={fulfillment?.trackingNumber}
orderIsPaid={order?.isPaid} orderIsPaid={order?.isPaid}
fulfillmentAllowUnpaid={fulfillmentAllowUnpaid} fulfillmentAllowUnpaid={fulfillmentAllowUnpaid}
onTrackingCodeAdd={onTrackingCodeAdd} onTrackingCodeAdd={onTrackingCodeAdd}
onRefund={onRefund}
onApprove={onOrderFulfillmentApprove} onApprove={onOrderFulfillmentApprove}
hasTransactions={orderHasTransactions(
order,
transactionsFeatureFlag.enabled,
)}
/> />
</CardContent> </CardContent>
</Card> </Card>

261
src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.stories.tsx Normal file
View file

@ -0,0 +1,261 @@
import placeholderImage from "@assets/images/placeholder60x60.png";
import { FulfillmentStatus } from "@dashboard/graphql";
import Decorator from "@dashboard/storybook/Decorator";
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderGrantRefundPage, {
OrderGrantRefundPageProps,
} from "./OrderGrantRefundPage";
const props: OrderGrantRefundPageProps = {
submitState: "default",
order: {
id: "T3JkZXI6MjRhNmU0NWUtYzQ3Ny00Y2QxLTlhMDAtNmUzNTdjMDNmYTgz",
number: "20",
lines: [
{
id: "T3JkZXJMaW5lOjkyNTNmM2ZkLTA4NzktNDk2NC05YjY3LWYwNGNkNzM2MjI2Yw==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "Code Division T-shirt",
quantity: 2,
quantityToFulfill: 2,
variantName: "S",
unitPrice: {
gross: {
amount: 2.5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
{
id: "T3JkZXJMaW5lOjIxOTM0YTBjLWQ2NGQtNDdlMS05ZTc4LTJmMjIyYzU5NjQ5ZA==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "Seaman Lager",
quantity: 4,
quantityToFulfill: 2,
variantName: "98616712",
unitPrice: {
gross: {
amount: 5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
{
id: "T3JkZXJMaW5lOmU0N2UyN2IyLTQzZWYtNGY5OS05ZTU0LTkyZmZkZWE5MmY4OA==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "Yellow Plimsolls",
quantity: 2,
quantityToFulfill: 0,
variantName: "41",
unitPrice: {
gross: {
amount: 2.5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
{
id: "T3JkZXJMaW5lOmZjOWU1YzFlLWFiMDItNDU5MS05YTRmLTA5YmJiN2U0NmZlMg==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "T-shirt",
quantity: 4,
quantityToFulfill: 3,
variantName: "XXL",
unitPrice: {
gross: {
amount: 5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
],
fulfillments: [
{
id: "RnVsZmlsbG1lbnQ6MTQ=",
fulfillmentOrder: 1,
status: FulfillmentStatus.FULFILLED,
lines: [
{
id: "RnVsZmlsbG1lbnRMaW5lOjIw",
quantity: 1,
orderLine: {
id:
"T3JkZXJMaW5lOjIxOTM0YTBjLWQ2NGQtNDdlMS05ZTc4LTJmMjIyYzU5NjQ5ZA==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "Seaman Lager",
quantity: 4,
quantityToFulfill: 2,
variantName: "98616712",
unitPrice: {
gross: {
amount: 5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
__typename: "FulfillmentLine",
},
],
__typename: "Fulfillment",
},
{
id: "RnVsZmlsbG1lbnQ6MTU=",
fulfillmentOrder: 2,
status: FulfillmentStatus.REFUNDED,
lines: [
{
id: "RnVsZmlsbG1lbnRMaW5lOjIx",
quantity: 1,
orderLine: {
id:
"T3JkZXJMaW5lOjIxOTM0YTBjLWQ2NGQtNDdlMS05ZTc4LTJmMjIyYzU5NjQ5ZA==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "Seaman Lager",
quantity: 4,
quantityToFulfill: 2,
variantName: "98616712",
unitPrice: {
gross: {
amount: 5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
__typename: "FulfillmentLine",
},
],
__typename: "Fulfillment",
},
{
id: "RnVsZmlsbG1lbnQ6MTY=",
fulfillmentOrder: 3,
status: FulfillmentStatus.FULFILLED,
lines: [
{
id: "RnVsZmlsbG1lbnRMaW5lOjIy",
quantity: 2,
orderLine: {
id:
"T3JkZXJMaW5lOmU0N2UyN2IyLTQzZWYtNGY5OS05ZTU0LTkyZmZkZWE5MmY4OA==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "Yellow Plimsolls",
quantity: 2,
quantityToFulfill: 0,
variantName: "41",
unitPrice: {
gross: {
amount: 2.5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
__typename: "FulfillmentLine",
},
{
id: "RnVsZmlsbG1lbnRMaW5lOjIz",
quantity: 1,
orderLine: {
id:
"T3JkZXJMaW5lOmZjOWU1YzFlLWFiMDItNDU5MS05YTRmLTA5YmJiN2U0NmZlMg==",
thumbnail: {
url: placeholderImage,
__typename: "Image",
},
productName: "T-shirt",
quantity: 4,
quantityToFulfill: 3,
variantName: "XXL",
unitPrice: {
gross: {
amount: 5,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "OrderLine",
},
__typename: "FulfillmentLine",
},
],
__typename: "Fulfillment",
},
],
shippingPrice: {
gross: {
amount: 85.23,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
total: {
gross: {
amount: 135.23,
currency: "USD",
__typename: "Money",
},
__typename: "TaxedMoney",
},
__typename: "Order",
},
loading: false,
// eslint-disable-next-line no-console
onSubmit: data => console.log("onSubmit", data),
};
storiesOf("Views / Orders / Grant refund order", module)
.addDecorator(Decorator)
.add("grant refund", () => <OrderGrantRefundPage {...props} />)
.add("loading", () => (
<OrderGrantRefundPage
submitState="loading"
order={null}
loading={true}
onSubmit={() => undefined}
/>
));

175
src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx Normal file
View file

@ -0,0 +1,175 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Skeleton from "@dashboard/components/Skeleton";
import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
import { orderUrl } from "@dashboard/orders/urls";
import { Card, CardContent, TextField, Typography } from "@material-ui/core";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import { Text } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { getOrderTitleMessage } from "../OrderCardTitle/utils";
import { ProductsCard, RefundCard } from "./components";
import { GrantRefundContext } from "./context";
import { OrderGrantRefundFormData, useGrantRefundForm } from "./form";
import { grantRefundPageMessages } from "./messages";
import {
getGrantRefundReducerInitialState,
grantRefundDefaultState,
grantRefundReducer,
} from "./reducer";
import { useStyles } from "./styles";
import { calculateTotalPrice, getFulfilmentSubtitle } from "./utils";
export interface OrderGrantRefundPageProps {
order: OrderDetailsGrantRefundFragment;
loading: boolean;
submitState: ConfirmButtonTransitionState;
onSubmit: (data: OrderGrantRefundFormData) => void;
isEdit?: boolean;
initialData?: OrderGrantRefundFormData;
}
const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
order,
loading,
submitState,
onSubmit,
isEdit,
initialData,
}) => {
const classes = useStyles();
const intl = useIntl();
const unfulfilledLines = (order?.lines ?? []).filter(
line => line.quantityToFulfill > 0,
);
const [state, dispatch] = React.useReducer(
grantRefundReducer,
grantRefundDefaultState,
);
React.useEffect(() => {
if (order?.id) {
dispatch({
type: "initState",
state: getGrantRefundReducerInitialState(order),
});
}
}, [order]);
const { set, change, data, submit } = useGrantRefundForm({
onSubmit,
initialData,
});
const amount = parseFloat(data.amount);
const submitDisabled = Number.isNaN(amount) || amount <= 0;
const totalSelectedPrice = calculateTotalPrice(state, order);
const handleSubmit = (e: React.FormEvent<any>) => {
e.stopPropagation();
e.preventDefault();
submit();
};
return (
<DetailPageLayout>
<TopNav
href={orderUrl(order?.id)}
title={
<FormattedMessage
{...(isEdit
? grantRefundPageMessages.pageHeaderEdit
: grantRefundPageMessages.pageHeader)}
/>
}
></TopNav>
<form onSubmit={handleSubmit} className={classes.form}>
<GrantRefundContext.Provider
value={{
dispatch,
state,
form: { change, data, set },
totalSelectedPrice,
}}
>
<DetailPageLayout.Content>
<Card>
<CardContent>
<Text variant="bodyEmp" as="p">
<FormattedMessage {...grantRefundPageMessages.pageSubtitle} />
</Text>
</CardContent>
</Card>
<CardSpacer />
<div className={classes.cardsContainer}>
{loading && <Skeleton className={classes.cardLoading} />}
<ProductsCard
title={
<FormattedMessage
{...grantRefundPageMessages.unfulfilledProducts}
/>
}
lines={unfulfilledLines}
/>
{order?.fulfillments?.map?.(fulfillment => (
<ProductsCard
title={intl.formatMessage(
getOrderTitleMessage(fulfillment.status),
)}
subtitle={
<Typography
variant="body1"
className={classes.fulfilmentNumber}
>
{getFulfilmentSubtitle(order, fulfillment)}
</Typography>
}
lines={fulfillment.lines.map(
({ orderLine, id, quantity }) => ({
...orderLine,
id,
quantity,
}),
)}
/>
))}
<Card>
<CardContent>
<TextField
label={intl.formatMessage(
grantRefundPageMessages.reasonForRefund,
)}
disabled={loading}
value={data.reason}
fullWidth
name={"reason" as keyof OrderGrantRefundFormData}
onChange={change}
type="text"
/>
</CardContent>
</Card>
</div>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<RefundCard
order={order}
loading={loading}
submitState={submitState}
isEdit={isEdit}
submitDisabled={submitDisabled}
/>
</DetailPageLayout.RightSidebar>
</GrantRefundContext.Provider>
</form>
</DetailPageLayout>
);
};
export default OrderGrantRefundPage;

145
src/orders/components/OrderGrantRefundPage/components/ProductCard.tsx Normal file
View file

@ -0,0 +1,145 @@
import { Button } from "@dashboard/components/Button";
import CardTitle from "@dashboard/components/CardTitle";
import TableCellAvatar from "@dashboard/components/TableCellAvatar";
import TableRowLink from "@dashboard/components/TableRowLink";
import { OrderLineGrantRefundFragment } from "@dashboard/graphql/transactions";
import { renderCollection } from "@dashboard/misc";
import {
Card,
Table,
TableBody,
TableCell,
TableHead,
TextField,
} from "@material-ui/core";
import React from "react";
import { FormattedMessage } from "react-intl";
import { useGrantRefundContext } from "../context";
import { grantRefundPageMessages, productCardMessages } from "../messages";
import { useProductsCardStyles } from "../styles";
interface ProductsCardProps {
title: React.ReactNode;
subtitle?: React.ReactNode;
lines: OrderLineGrantRefundFragment[];
}
export const ProductsCard: React.FC<ProductsCardProps> = ({
title,
subtitle,
lines,
}) => {
const classes = useProductsCardStyles();
const { dispatch, state } = useGrantRefundContext();
if (lines.length === 0) {
return null;
}
const getHandleAmountChange = (line: OrderLineGrantRefundFragment) => (
e: React.ChangeEvent<HTMLInputElement>,
) => {
const parsedValue = parseInt(e.target.value, 10);
const value = Number.isNaN(parsedValue) ? 0 : parsedValue;
dispatch({
type: "setQuantity",
lineId: line.id,
amount: value,
});
};
const handleSetMaxQuanity = () => {
dispatch({
type: "setMaxQuantity",
lineIds: lines.map(line => line.id),
});
};
return (
<Card>
<CardTitle
title={
<>
{title}
{subtitle}
</>
}
toolbar={
<Button variant="secondary" onClick={handleSetMaxQuanity}>
<FormattedMessage {...grantRefundPageMessages.setMaxQuantity} />
</Button>
}
></CardTitle>
<Table>
<TableHead>
<TableCell className={classes.colProduct}>
<FormattedMessage {...productCardMessages.product} />
</TableCell>
<TableCell className={classes.colQuantity}>
<FormattedMessage {...productCardMessages.quantity} />
</TableCell>
<TableCell className={classes.colQuantityInput}>
<FormattedMessage {...productCardMessages.qtyToRefund} />
</TableCell>
</TableHead>
<TableBody>
{renderCollection(
lines,
line => (
<TableRowLink key={line?.id}>
<TableCellAvatar
thumbnail={line?.thumbnail?.url}
className={classes.colProduct}
>
<div className={classes.productName}>
<span>{line?.productName}</span>
<span className={classes.productVariantName}>
{line.variantName}
</span>
</div>
</TableCellAvatar>
<TableCell className={classes.colQuantity}>
{line.quantity}
</TableCell>
<TableCell className={classes.colQuantityInput}>
<TextField
type="number"
inputProps={{
className: classes.quantityInnerInput,
"data-test-id": "quantityInput" + line?.id,
max: (line?.quantity).toString(),
min: 0,
style: { textAlign: "right" },
}}
fullWidth
value={state.lines.get(line.id)?.selectedQuantity}
onChange={getHandleAmountChange(line)}
InputProps={{
endAdornment: line?.quantity && (
<div className={classes.remainingQuantity}>
/ {line?.quantity}
</div>
),
}}
/>
</TableCell>
</TableRowLink>
),
() => (
<TableRowLink>
<TableCell colSpan={3}>
<FormattedMessage
id="Q1Uzbb"
defaultMessage="No products found"
/>
</TableCell>
</TableRowLink>
),
)}
</TableBody>
</Table>
</Card>
);
};

140
src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx Normal file
View file

@ -0,0 +1,140 @@
import CardTitle from "@dashboard/components/CardTitle";
import Checkbox from "@dashboard/components/Checkbox";
import ConfirmButton from "@dashboard/components/ConfirmButton";
import { formatMoneyAmount } from "@dashboard/components/Money";
import PriceField from "@dashboard/components/PriceField";
import Skeleton from "@dashboard/components/Skeleton";
import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
import useLocale from "@dashboard/hooks/useLocale";
import { buttonMessages } from "@dashboard/intl";
import { Card, CardContent, Typography } from "@material-ui/core";
import { useId } from "@reach/auto-id";
import { ConfirmButtonTransitionState, LayoutButton } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useGrantRefundContext } from "../context";
import { OrderGrantRefundFormData } from "../form";
import { grantRefundPageMessages } from "../messages";
import { useRefundCardStyles } from "../styles";
interface RefundCardProps {
order: OrderDetailsGrantRefundFragment | null;
loading: boolean;
submitState: ConfirmButtonTransitionState;
isEdit: boolean;
submitDisabled: boolean;
}
export const RefundCard = ({
order,
loading,
submitState,
isEdit,
submitDisabled,
}: RefundCardProps) => {
const intl = useIntl();
const { locale } = useLocale();
const classes = useRefundCardStyles();
const id = useId();
const { state, dispatch, form, totalSelectedPrice } = useGrantRefundContext();
const currency = order?.total?.gross?.currency ?? "";
return (
<Card>
<CardTitle
className={classes.refundCardHeader}
title={<FormattedMessage {...grantRefundPageMessages.refundTitle} />}
/>
<CardContent className={classes.cardContent}>
<Typography variant="body2">
<FormattedMessage {...grantRefundPageMessages.refundSubtitle} />
</Typography>
{order ? (
<div className={classes.shippingCostLine}>
<Checkbox
id={`checkbox-${id}`}
value={state.refundShipping}
onChange={() => dispatch({ type: "toggleRefundShipping" })}
/>
<label htmlFor={`checkbox-${id}`}>
{!currency ? (
<Skeleton />
) : (
<FormattedMessage
{...grantRefundPageMessages.refundShipment}
values={{
currency,
amount: formatMoneyAmount(
order?.shippingPrice?.gross,
locale,
),
}}
/>
)}
</label>
</div>
) : (
<div className={classes.shippingCostLineLoading}>
<Skeleton />
</div>
)}
<div className={classes.suggestedValue}>
<span>
<FormattedMessage
{...grantRefundPageMessages.refundSelectedValue}
/>
</span>
<span className={classes.totalMoney}>
{currency}{" "}
{formatMoneyAmount(
{
amount: totalSelectedPrice ?? 0,
currency,
},
locale,
)}
</span>
<LayoutButton
state={!loading && "hover"}
disabled={loading}
className={classes.applyButton}
onClick={() => form.set({ amount: totalSelectedPrice.toString() })}
>
<FormattedMessage {...buttonMessages.apply} />
</LayoutButton>
</div>
<div>
<PriceField
label={intl.formatMessage(
grantRefundPageMessages.refundAmountLabel,
)}
onChange={form.change}
disabled={loading}
name={"amount" as keyof OrderGrantRefundFormData}
currencySymbol={currency}
value={form.data.amount}
inputProps={{ "data-test-id": "amountInput" }}
/>
</div>
<div className={classes.submitLine}>
<ConfirmButton
disabled={submitDisabled || loading}
transitionState={submitState}
variant="primary"
type="submit"
>
{isEdit ? (
<FormattedMessage {...grantRefundPageMessages.editRefundBtn} />
) : (
<FormattedMessage {...grantRefundPageMessages.grantRefundBtn} />
)}
</ConfirmButton>
</div>
</CardContent>
</Card>
);
};

2
src/orders/components/OrderGrantRefundPage/components/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./ProductCard";
export * from "./RefundCard";

29
src/orders/components/OrderGrantRefundPage/context.ts Normal file
View file

@ -0,0 +1,29 @@
import { UseFormResult } from "@dashboard/hooks/useForm";
import { createContext, useContext } from "react";
import { OrderGrantRefundFormData } from "./form";
import { GrantRefundAction, GrantRefundState } from "./reducer";
interface GrantRefundContext {
state: GrantRefundState;
dispatch: React.Dispatch<GrantRefundAction>;
form: Pick<
UseFormResult<OrderGrantRefundFormData>,
"set" | "data" | "change"
>;
totalSelectedPrice: number;
}
export const GrantRefundContext = createContext<GrantRefundContext | null>(
null,
);
export const useGrantRefundContext = () => {
const context = useContext(GrantRefundContext);
if (context === null) {
throw new Error("useGrantRefundContext used outside of context provider");
}
return context;
};

47
src/orders/components/OrderGrantRefundPage/form.ts Normal file
View file

@ -0,0 +1,47 @@
import { useExitFormDialog } from "@dashboard/components/Form/useExitFormDialog";
import useForm from "@dashboard/hooks/useForm";
import useHandleFormSubmit from "@dashboard/hooks/useHandleFormSubmit";
import React from "react";
export interface OrderGrantRefundFormData {
amount: string;
reason: string;
}
const defaultInitialData: OrderGrantRefundFormData = {
amount: "",
reason: "",
};
interface GrantRefundFormHookProps {
onSubmit: (data: OrderGrantRefundFormData) => void;
initialData?: OrderGrantRefundFormData;
}
export const useGrantRefundForm = ({
onSubmit,
initialData,
}: GrantRefundFormHookProps) => {
const { set, change, data, formId } = useForm(
initialData ?? defaultInitialData,
undefined,
{
confirmLeave: true,
},
);
const { setExitDialogSubmitRef } = useExitFormDialog({
formId,
});
const handleFormSubmit = useHandleFormSubmit({
formId,
onSubmit,
});
const submit = () => handleFormSubmit(data);
React.useEffect(() => setExitDialogSubmitRef(submit), [submit]);
return { set, change, data, submit };
};

2
src/orders/components/OrderGrantRefundPage/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./OrderGrantRefundPage";
export { default } from "./OrderGrantRefundPage";

132
src/orders/components/OrderGrantRefundPage/messages.ts Normal file
View file

@ -0,0 +1,132 @@
import { FulfillmentStatus } from "@dashboard/graphql";
import { defineMessages, IntlShape } from "react-intl";
export const grantRefundPageMessages = defineMessages({
pageHeader: {
defaultMessage: "Grant refund",
id: "+mmPxn",
description: "page header",
},
pageHeaderEdit: {
defaultMessage: "Edit grant refund",
id: "TxYWkD",
description: "page header, edit view",
},
pageSubtitle: {
defaultMessage:
"Refunded amount will not be automatically returned to the customer. You’ll need to decide on a method and refund via balance sheet section of the order.",
id: "Ys86kI",
},
reasonForRefund: {
defaultMessage: "Reason for refund",
id: "cBVHN5",
description: "grant refund, reason input field placeholder",
},
refundTitle: {
defaultMessage: "Refund",
id: "sFynTT",
description: "grant refund, refund card title",
},
refundSubtitle: {
defaultMessage:
"How much money do you want to return to the customer for the order?",
id: "iFM716",
description: "grant refund, refund card subtitle",
},
refundShipment: {
defaultMessage: "Refund shipment: {currency} {amount}",
id: "Tenl9A",
description: "grant refund, refund card toggle",
},
refundSelectedValue: {
defaultMessage: "Selected refund value:",
id: "kJYa8Y",
description: "grant refund, refund card calculated refund value",
},
refundStepExplanation: {
defaultMessage: "Funds will be returned in a separate step",
id: "C035fF",
description: "grant refund, refund card explanation next to submit button",
},
setMaxQuantity: {
defaultMessage: "Set max. quantities",
id: "xGC2Ge",
description: "grant refund, button",
},
unfulfilledProducts: {
defaultMessage: "Unfulfilled products",
id: "zfjAc7",
description: "grant refund, card header",
},
fulfilment: {
defaultMessage: "Fulfillment",
id: "WK62MN",
},
refundAmountLabel: {
defaultMessage: "Refund amount",
id: "5JUEIh",
description: "field label, refund amount",
},
grantRefundBtn: {
defaultMessage: "Grant refund",
id: "fsBsMy",
description: "button, form submit, grant refund create",
},
editRefundBtn: {
defaultMessage: "Edit granted refund",
id: "TBftMD",
description: "button. form submit, grant refund edit",
},
});
export const productCardMessages = defineMessages({
quantity: {
defaultMessage: "Quantity",
id: "S5/nSq",
description: "grant refund table, column header",
},
product: {
defaultMessage: "Product",
id: "rxlJJ/",
description: "grant refund table, column header",
},
qtyToRefund: {
defaultMessage: "Qty to refund",
id: "1/oauz",
description: "grant refund table, column header",
},
});
export const fulfilmentStatusMessages = defineMessages({
fulfillment: {
id: "MewrtN",
defaultMessage: "Fulfillment",
description: "section header",
},
fulfillmentReturned: {
id: "H/f9KR",
defaultMessage: "Fulfillment returned",
description: "section header returned",
},
fulfillmentWaitingForApproval: {
id: "i/ZhxL",
defaultMessage: "Fulfillment waiting for approval",
description: "section header returned",
},
});
export const getTitle = (
fulfillmentStatus: FulfillmentStatus,
intl: IntlShape,
) => {
switch (fulfillmentStatus) {
case FulfillmentStatus.RETURNED:
return intl.formatMessage(fulfilmentStatusMessages.fulfillmentReturned);
case FulfillmentStatus.WAITING_FOR_APPROVAL:
return intl.formatMessage(
fulfilmentStatusMessages.fulfillmentWaitingForApproval,
);
default:
return intl.formatMessage(fulfilmentStatusMessages.fulfillment);
}
};

127
src/orders/components/OrderGrantRefundPage/reducer.ts Normal file
View file

@ -0,0 +1,127 @@
import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
import { exhaustiveCheck } from "@dashboard/utils/ts";
export interface ReducerOrderLine {
selectedQuantity: number;
availableQuantity: number;
unitPrice: number;
}
export interface GrantRefundState {
lines: Map<string, ReducerOrderLine>;
refundShipping: boolean;
}
export type GrantRefundLineKeyValue = [string, ReducerOrderLine];
export type GrantRefundAction =
| {
type: "setQuantity";
lineId: string;
amount: number;
}
| {
type: "setMaxQuantity";
lineIds: string[];
}
| {
type: "initState";
state: GrantRefundState;
}
| {
type: "toggleRefundShipping";
};
export const getGrantRefundReducerInitialState = (
order: OrderDetailsGrantRefundFragment,
): GrantRefundState => {
const unfulfilledLines = order?.lines
.filter(line => line.quantityToFulfill > 0)
.map<GrantRefundLineKeyValue>(line => [
line.id,
{
availableQuantity: line.quantity,
unitPrice: line.unitPrice.gross.amount,
selectedQuantity: 0,
},
]);
const fulfilmentLines = order.fulfillments
.flatMap(fulfilment => fulfilment.lines)
.map<GrantRefundLineKeyValue>(line => [
line.id,
{
availableQuantity: line.quantity,
unitPrice: line.orderLine.unitPrice.gross.amount,
selectedQuantity: 0,
},
]);
return {
lines: new Map([...unfulfilledLines, ...fulfilmentLines]),
refundShipping: false,
};
};
export const grantRefundDefaultState: GrantRefundState = {
lines: new Map(),
refundShipping: false,
};
export function grantRefundReducer(
state: GrantRefundState,
action: GrantRefundAction,
): GrantRefundState {
switch (action.type) {
case "setQuantity": {
if (!state.lines.has(action.lineId)) {
return state;
}
const line = state.lines.get(action.lineId);
const newLines = new Map(state.lines);
newLines.set(action.lineId, {
...line,
selectedQuantity: action.amount,
});
return {
...state,
lines: newLines,
};
}
case "setMaxQuantity": {
const newLines = new Map(state.lines);
action.lineIds.forEach(lineId => {
const line = state.lines.get(lineId);
newLines.set(lineId, {
...line,
selectedQuantity: line.availableQuantity,
});
});
return {
...state,
lines: newLines,
};
}
case "initState": {
return action.state;
}
case "toggleRefundShipping": {
return {
...state,
refundShipping: !state.refundShipping,
};
}
default:
exhaustiveCheck(action);
}
}

107
src/orders/components/OrderGrantRefundPage/styles.ts Normal file
View file

@ -0,0 +1,107 @@
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
fulfilmentNumber: {
display: "inline",
marginLeft: theme.spacing(1),
},
cardsContainer: {
display: "flex",
flexDirection: "column",
gap: theme.spacing(2),
},
cardLoading: {
height: "20em",
background: "white",
},
form: {
display: "contents",
},
}),
{ name: "OrderGrantRefund" },
);
export const useRefundCardStyles = makeStyles(
theme => ({
cardContent: {
display: "flex",
flexDirection: "column",
gap: theme.spacing(1.5),
},
refundCardHeader: {
paddingBottom: theme.spacing(1),
},
suggestedValue: {
display: "flex",
alignItems: "baseline",
gap: theme.spacing(1),
flexWrap: "wrap",
},
totalMoney: {
fontWeight: 600,
},
applyButton: {
height: "auto",
padding: 0,
},
shippingCostLine: {
display: "flex",
gap: theme.spacing(1),
"& .MuiCheckbox-root": {
padding: 0,
},
},
submitLine: {
display: "flex",
"& button": {
// when line overflows
marginLeft: "auto",
},
},
shippingCostLineLoading: {
height: "21px",
},
}),
{ name: "RefundCard" },
);
export const useProductsCardStyles = makeStyles(
theme => {
const inputPadding = {
paddingBottom: theme.spacing(2),
paddingTop: theme.spacing(2),
};
return {
colProduct: {
width: "auto",
},
productVariantName: {},
productName: {
display: "flex",
flexDirection: "column",
"& $productVariantName": {
color: theme.palette.saleor.main[3],
fontSize: "1.25rem",
},
},
colQuantityInput: {
textAlign: "right",
width: `${100 + 32 + 32}px`, // 32 = td padding
},
colQuantity: {
textAlign: "right",
width: `${75 + 32 + 32}px`,
},
quantityInnerInput: {
...inputPadding,
},
remainingQuantity: {
...inputPadding,
color: theme.palette.text.secondary,
whiteSpace: "nowrap",
},
};
},
{ name: "ProductsCard" },
);

28
src/orders/components/OrderGrantRefundPage/utils.ts Normal file
View file

@ -0,0 +1,28 @@
import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
import currency from "currency.js";
import { GrantRefundState } from "./reducer";
export const calculateTotalPrice = (
state: GrantRefundState,
order: OrderDetailsGrantRefundFragment,
): number => {
const shippingCost = order?.shippingPrice?.gross?.amount ?? 0;
const lines = Array.from(state.lines.values());
const linesValue = lines.reduce((total, line) => {
const price = currency(line.unitPrice).multiply(line.selectedQuantity);
return total.add(price.value);
}, currency(0));
if (state.refundShipping) {
return linesValue.add(currency(shippingCost)).value;
}
return linesValue.value;
};
export const getFulfilmentSubtitle = (
order: OrderDetailsGrantRefundFragment,
fulfillment: OrderDetailsGrantRefundFragment["fulfillments"][0],
) => `#${order.number}-${fulfillment.fulfillmentOrder}`;

101
src/orders/components/OrderGrantedRefunds/OrderGrantedRefunds.tsx Normal file
View file

@ -0,0 +1,101 @@
import { Button } from "@dashboard/components/Button";
import CardTitle from "@dashboard/components/CardTitle";
import EventTime from "@dashboard/components/EventTime";
import Money, { formatMoney } from "@dashboard/components/Money";
import OverflowTooltip from "@dashboard/components/OverflowTooltip";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
import useLocale from "@dashboard/hooks/useLocale";
import { buttonMessages } from "@dashboard/intl";
import { getUserInitials, renderCollection } from "@dashboard/misc";
import { orderGrantRefundEditUrl } from "@dashboard/orders/urls";
import { Card, TableCell, TableRow } from "@material-ui/core";
import { Avatar, Pill } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { orderGrantedRefundsMessages } from "./messages";
import { useStyles } from "./styles";
interface OrderGrantedRefundsProps {
order: OrderDetailsFragment;
}
const OrderGrantedRefunds: React.FC<OrderGrantedRefundsProps> = ({ order }) => {
const classes = useStyles();
const intl = useIntl();
const { locale } = useLocale();
if (!order || order?.grantedRefunds?.length === 0) {
return null;
}
const unsettled = order.totalRemainingGrant;
return (
<Card>
<CardTitle
className={classes.cardTitleWrapper}
title={
<div className={classes.cardTitleContent}>
<span>
<FormattedMessage
{...orderGrantedRefundsMessages.grantedRefunds}
/>
</span>
<div>
{unsettled.amount > 0 && (
<Pill
color="error"
label={intl.formatMessage(
orderGrantedRefundsMessages.unsettled,
{
money: formatMoney(unsettled, locale),
},
)}
/>
)}
</div>
</div>
}
></CardTitle>
<ResponsiveTable className={classes.table}>
{renderCollection(order?.grantedRefunds, grantedRefund => (
<TableRow>
<TableCell className={classes.colMoney}>
<Money money={grantedRefund.amount} />
</TableCell>
<TableCell className={classes.colReason}>
{grantedRefund.reason}
</TableCell>
<TableCell>
<EventTime date={grantedRefund.createdAt} />
</TableCell>
<TableCell className={classes.colRequester}>
{grantedRefund.app ? (
grantedRefund.app.name
) : grantedRefund.user ? (
<div className={classes.avatarContainer}>
<Avatar
avatar={grantedRefund.user.avatar?.url}
initials={getUserInitials(grantedRefund.user)}
/>
<OverflowTooltip>{grantedRefund.user.email}</OverflowTooltip>
</div>
) : null}
</TableCell>
<TableCell className={classes.colAction}>
<Button
href={orderGrantRefundEditUrl(order.id, grantedRefund.id)}
>
<FormattedMessage {...buttonMessages.edit} />
</Button>
</TableCell>
</TableRow>
))}
</ResponsiveTable>
</Card>
);
};
export default OrderGrantedRefunds;

2
src/orders/components/OrderGrantedRefunds/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./OrderGrantedRefunds";
export { default } from "./OrderGrantedRefunds";

14
src/orders/components/OrderGrantedRefunds/messages.ts Normal file
View file

@ -0,0 +1,14 @@
import { defineMessages } from "react-intl";
export const orderGrantedRefundsMessages = defineMessages({
grantedRefunds: {
defaultMessage: "Granted refunds",
id: "OAcl78",
description: "order, granted refunds card, title",
},
unsettled: {
defaultMessage: "Unsettled {money}",
id: "7t+oJp",
description: "orde, granted refunds card, unsettled amount",
},
});

55
src/orders/components/OrderGrantedRefunds/styles.ts Normal file
View file

@ -0,0 +1,55 @@
import { makeStyles } from "@material-ui/core";
const buttonWidth = 64;
export const useStyles = makeStyles(
theme => ({
table: {
"&& td": {
// gap = 24px
paddingLeft: "12px",
paddingRight: "12px",
"&:first-child": {
// Override for Material first td
paddingRight: "12px",
},
},
},
cardTitleWrapper: {
paddingRight: theme.spacing(2),
},
cardTitleContent: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
},
avatarContainer: {
display: "flex",
alignItems: "center",
gap: theme.spacing(1),
overflow: "hidden",
},
colMoney: {
[theme.breakpoints.up("md")]: {
width: "124px",
},
},
colReason: {
[theme.breakpoints.up("md")]: {
width: "21%",
},
},
colRequester: {
[theme.breakpoints.up("md")]: {
width: "23%",
},
},
colAction: {
width: `calc(${buttonWidth}px + 12px + ${theme.spacing(2)})`, // width + left padding + right padding
"&&&": {
paddingRight: theme.spacing(2),
},
},
}),
{ name: "OrderGrantedRefunds" },
);

2
src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx
View file

@ -2,7 +2,7 @@ import CardSpacer from "@dashboard/components/CardSpacer";
import HorizontalSpacer from "@dashboard/components/HorizontalSpacer"; import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
import { TimelineEvent } from "@dashboard/components/Timeline"; import { TimelineEvent } from "@dashboard/components/Timeline";
import { TitleElement } from "@dashboard/components/Timeline/TimelineEventHeader"; import { TitleElement } from "@dashboard/components/Timeline/TimelineEventHeader";
import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql"; import { OrderEventFragment, OrderEventsEnum } from "@dashboard/orders/types";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import React from "react"; import React from "react";

2
src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx
View file

@ -1,6 +1,6 @@
import Money from "@dashboard/components/Money"; import Money from "@dashboard/components/Money";
import { TimelineEvent } from "@dashboard/components/Timeline"; import { TimelineEvent } from "@dashboard/components/Timeline";
import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql"; import { OrderEventFragment, OrderEventsEnum } from "@dashboard/orders/types";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import camelCase from "lodash/camelCase"; import camelCase from "lodash/camelCase";

5
src/orders/components/OrderHistory/LinkedTimelineEvent.tsx
View file

@ -1,6 +1,9 @@
import { TimelineEvent } from "@dashboard/components/Timeline"; import { TimelineEvent } from "@dashboard/components/Timeline";
import { TitleElement } from "@dashboard/components/Timeline/TimelineEventHeader"; import { TitleElement } from "@dashboard/components/Timeline/TimelineEventHeader";
import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql"; import {
OrderEventFragment,
OrderEventsEnum,
} from "@dashboard/graphql/transactions";
import { orderUrl } from "@dashboard/orders/urls"; import { orderUrl } from "@dashboard/orders/urls";
import React from "react"; import React from "react";
import { defineMessages, useIntl } from "react-intl"; import { defineMessages, useIntl } from "react-intl";

2
src/orders/components/OrderHistory/OrderHistory.tsx
View file

@ -8,8 +8,8 @@ import {
TimelineEventProps, TimelineEventProps,
TimelineNote, TimelineNote,
} from "@dashboard/components/Timeline"; } from "@dashboard/components/Timeline";
import { OrderEventFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
import { OrderEventFragment } from "@dashboard/orders/types";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";

48
src/orders/components/OrderHistory/messages.ts
View file

@ -1,20 +1,20 @@
import { import { OrderEventsEmailsEnum } from "@dashboard/graphql";
OrderEventFragment, import { OrderEventFragment, OrderEventsEnum } from "@dashboard/orders/types";
OrderEventsEmailsEnum,
OrderEventsEnum,
} from "@dashboard/graphql";
import { IntlShape } from "react-intl"; import { IntlShape } from "react-intl";
export const getEventMessage = (event: OrderEventFragment, intl: IntlShape) => { const getUserOrApp = (event: OrderEventFragment) => {
const getUserOrApp = () => { if (event.user) {
if (event.user) { return event.user.email;
return event.user.email; }
} if (event.app) {
if (event.app) { return event.app.name;
return event.app.name; }
} };
};
export const getEventMessage = (
event: OrderEventFragment,
intl: IntlShape,
): string => {
switch (event.type) { switch (event.type) {
case OrderEventsEnum.CANCELED: case OrderEventsEnum.CANCELED:
return intl.formatMessage({ return intl.formatMessage({
@ -111,7 +111,7 @@ export const getEventMessage = (event: OrderEventFragment, intl: IntlShape) => {
description: "order history message", description: "order history message",
}, },
{ {
requestedBy: getUserOrApp(), requestedBy: getUserOrApp(event),
}, },
); );
case OrderEventsEnum.INVOICE_GENERATED: case OrderEventsEnum.INVOICE_GENERATED:
@ -123,7 +123,7 @@ export const getEventMessage = (event: OrderEventFragment, intl: IntlShape) => {
description: "order history message", description: "order history message",
}, },
{ {
generatedBy: getUserOrApp(), generatedBy: getUserOrApp(event),
invoiceNumber: event.invoiceNumber, invoiceNumber: event.invoiceNumber,
}, },
); );
@ -146,7 +146,7 @@ export const getEventMessage = (event: OrderEventFragment, intl: IntlShape) => {
description: "order history message", description: "order history message",
}, },
{ {
sentBy: getUserOrApp(), sentBy: getUserOrApp(event),
}, },
); );
case OrderEventsEnum.FULFILLMENT_AWAITS_APPROVAL: case OrderEventsEnum.FULFILLMENT_AWAITS_APPROVAL:
@ -174,7 +174,7 @@ export const getEventMessage = (event: OrderEventFragment, intl: IntlShape) => {
description: "order history message", description: "order history message",
}, },
{ {
refundedBy: getUserOrApp(), refundedBy: getUserOrApp(event),
}, },
); );
case OrderEventsEnum.FULFILLMENT_RESTOCKED_ITEMS: case OrderEventsEnum.FULFILLMENT_RESTOCKED_ITEMS:
@ -297,6 +297,18 @@ export const getEventMessage = (event: OrderEventFragment, intl: IntlShape) => {
defaultMessage: "Transaction capture requested", defaultMessage: "Transaction capture requested",
description: "order history message", description: "order history message",
}); });
case OrderEventsEnum.TRANSACTION_CHARGE_REQUESTED:
return intl.formatMessage({
id: "UxOcKE",
defaultMessage: "Transaction charge requested",
description: "order history message",
});
case OrderEventsEnum.TRANSACTION_CANCEL_REQUESTED:
return intl.formatMessage({
id: "f/Drvo",
defaultMessage: "Transaction cancel requested",
description: "order history message",
});
case OrderEventsEnum.EXTERNAL_SERVICE_NOTIFICATION: case OrderEventsEnum.EXTERNAL_SERVICE_NOTIFICATION:
return event.message; return event.message;
} }

5
src/orders/components/OrderHistory/utils.tsx
View file

@ -1,4 +1,7 @@
import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql"; import {
OrderEventFragment,
OrderEventsEnum,
} from "@dashboard/graphql/transactions";
import { getFullName } from "@dashboard/misc"; import { getFullName } from "@dashboard/misc";
import { orderUrl } from "@dashboard/orders/urls"; import { orderUrl } from "@dashboard/orders/urls";
import { staffMemberDetailsUrl } from "@dashboard/staff/urls"; import { staffMemberDetailsUrl } from "@dashboard/staff/urls";

88
src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx Normal file
View file

@ -0,0 +1,88 @@
import BackButton from "@dashboard/components/BackButton";
import { commonMessages } from "@dashboard/intl";
import { DialogProps } from "@dashboard/types";
import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import {
OrderManualTransactionForm,
OrderManualTransactionFormProps,
} from "../OrderManualTransactionForm";
import { manualTransactionMessages } from "./messages";
const useStyles = makeStyles(
theme => ({
form: {
display: "contents",
},
formWrapper: {
display: "flex",
flexDirection: "column",
gap: theme.spacing(2),
},
}),
{ name: "OrderManualTransactionDialog" },
);
type OrderManualTransactionDialogProps = {
dialogProps: DialogProps;
} & OrderManualTransactionFormProps;
export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialogProps> = ({
dialogProps,
...props
}) => {
const intl = useIntl();
const classes = useStyles();
const { onClose } = dialogProps;
return (
<OrderManualTransactionForm {...props}>
<Dialog onClose={onClose} {...dialogProps} fullWidth maxWidth="xs">
<DialogTitle>
<FormattedMessage {...manualTransactionMessages.dialogTitle} />
</DialogTitle>
<OrderManualTransactionForm.Form className={classes.form}>
<DialogContent>
<DialogContentText>
<FormattedMessage
{...manualTransactionMessages.dialogDescription}
/>
</DialogContentText>
<div className={classes.formWrapper}>
<OrderManualTransactionForm.DescriptionField
label={intl.formatMessage(commonMessages.description)}
fullWidth
/>
<OrderManualTransactionForm.PspReferenceField
label={intl.formatMessage(commonMessages.pspReferenceOptional)}
fullWidth
/>
<OrderManualTransactionForm.PriceInputField
label={intl.formatMessage(
manualTransactionMessages.transactionAmount,
)}
/>
<OrderManualTransactionForm.ErrorText />
</div>
</DialogContent>
<DialogActions>
<BackButton onClick={onClose} />
<OrderManualTransactionForm.SubmitButton>
<FormattedMessage {...manualTransactionMessages.submitButton} />
</OrderManualTransactionForm.SubmitButton>
</DialogActions>
</OrderManualTransactionForm.Form>
</Dialog>
</OrderManualTransactionForm>
);
};

Some files were not shown because too many files have changed in this diff Show more