Merge pull request #558 from logion-network/feature/transaction-reque…

…st-screen

Request Transaction LOC in same way as Collection

src/loc/DataLocRequest.css

@@ -0,0 +1,3 @@
+.DataLocRequest .request-additional-id-loc-frame {
+    margin-top: 30px;
+}

src/loc/CollectionLocRequest.test.tsx → src/loc/DataLocRequest.test.tsx

@@ -5,7 +5,7 @@ import { setLocsState, setMutateLocsState } from "../wallet-user/__mocks__/UserC
 import { render, waitFor, screen, getByText } from "@testing-library/react";
 import { clickByName, typeByLabel } from "../tests";
 import { navigate } from "../__mocks__/ReactRouterMock";
-import CollectionLocRequest from "./CollectionLocRequest";
+import DataLocRequest from "./DataLocRequest";
 import userEvent from "@testing-library/user-event";
 import { LegalOfficerClass } from "@logion/client/dist/Types";
 
@@ -15,42 +15,61 @@ jest.mock('../common/CommonContext');
 
 const locId = new UUID("a2b9dfa7-cbde-414b-8cda-cdd221a57643");
 
-describe("CollectionLocRequest", () => {
+describe("DataLocRequest", () => {
+
+    it("should disable form submission when no valid identity locs", async  () => {
+
+        setupLocsState([]);
+        render(<DataLocRequest locType="Collection" iconId="collection" backPath="back" />);
+        await checkFormDisabled();
+    });
+
+    it("should disable form submission when no legal officer selected", async  () => {
+
+        setupLocsState(twoLegalOfficers);
+        render(<DataLocRequest locType="Collection" iconId="collection" backPath="back" />);
+        await checkFormDisabled();
+    });
+})
+
+describe("DataLocRequest (Transaction)", () => {
 
     it("should redirect when form is correctly filled in and submitted", async  () => {
 
         setupLocsState(twoLegalOfficers);
-        render(<CollectionLocRequest backPath="back" />);
+        render(<DataLocRequest locType="Transaction" iconId="loc" backPath="back" />);
 
         await selectLegalOfficer();
-        await fillInForm();
+        await fillInForm("Transaction");
+        expect(screen.getByRole("button", { name: "Create Draft" })).toBeEnabled();
         await clickByName("Create Draft");
 
-        await waitFor(() => expect(navigate).toBeCalledWith(`/user/loc/collection/${locId.toString()}`));
+        await waitFor(() => expect(navigate).toBeCalledWith(`/user/loc/transaction/${locId.toString()}`));
     });
+})
 
-    it("should disable form submission when no valid identity locs", async  () => {
+describe("DataLocRequest (Collection)", () => {
 
-        setupLocsState([]);
-        render(<CollectionLocRequest backPath="back" />);
-        await checkFormDisabled();
-    });
-
-    it("should disable form submission when no legal officer selected", async  () => {
+    it("should redirect when form is correctly filled in and submitted", async () => {
 
         setupLocsState(twoLegalOfficers);
-        render(<CollectionLocRequest backPath="back" />);
-        await checkFormDisabled();
+        render(<DataLocRequest locType="Collection" iconId="collection" backPath="back" />);
+
+        await selectLegalOfficer();
+        await fillInForm("Collection");
+        expect(screen.getByRole("button", { name: "Create Draft" })).toBeEnabled();
+        await clickByName("Create Draft");
+
+        await waitFor(() => expect(navigate).toBeCalledWith(`/user/loc/collection/${ locId.toString() }`));
     });
 
     it("should disable form submission when no collection limit selected", async  () => {
 
         setupLocsState(twoLegalOfficers);
-        render(<CollectionLocRequest backPath="back" />);
+        render(<DataLocRequest locType="Collection" iconId="collection" backPath="back" />);
         await selectLegalOfficer();
         await checkFormDisabled();
     });
-
 })
 
 async function checkFormDisabled() {
@@ -70,6 +89,7 @@ function setupLocsState(legalOfficersWithValidIdentityLoc: LegalOfficerClass[])
     } as DraftRequest;
     const locsState = {
         legalOfficersWithValidIdentityLoc,
+        requestTransactionLoc: () => Promise.resolve(draftRequest),
         requestCollectionLoc: () => Promise.resolve(draftRequest),
     } as unknown as LocsState;
     setLocsState(locsState);
@@ -85,12 +105,14 @@ async function selectLegalOfficer() {
     await waitFor(() => userEvent.click(getByText(legalOfficer1Select, "Patrick Gielen (workload: 1)")));
 }
 
-async function fillInForm() {
+async function fillInForm(locType: 'Transaction' | 'Collection') {
     await typeByLabel("Description", "description");
-    await typeByLabel("Value fee", "10");
-    await typeByLabel("Collection item fee", "10");
-    await typeByLabel("Tokens record fee", "10");
-    await selectAndEnterText(1, "Data number limit", "999");
+    if (locType === 'Collection') {
+        await typeByLabel("Value fee", "10");
+        await typeByLabel("Collection item fee", "10");
+        await typeByLabel("Tokens record fee", "10");
+        await selectAndEnterText(1, "Data number limit", "999");
+    }
 }
 
 async function selectAndEnterText(index: number, name: string, value: string) {

src/loc/CollectionLocRequest.tsx → src/loc/DataLocRequest.tsx

@@ -8,16 +8,20 @@ import { LegalOfficerClass } from "@logion/client";
 import { useUserContext } from "../wallet-user/UserContext";
 import { useCommonContext } from "../common/CommonContext";
 import CollectionLocRequestForm from "./CollectionLocRequestForm";
-import IdentityLocCreation from "../wallet-user/IdentityLocCreation";
-import "./CollectionLocRequest.css";
+import LocCreation from "../wallet-user/LocCreation";
+import "./DataLocRequest.css";
 import ButtonGroup from "../common/ButtonGroup";
+import TransactionLocRequestForm from "./TransactionLocRequestForm";
 
 export interface Props {
     backPath: string,
+    locType: 'Transaction' | 'Collection'
+    iconId: string,
 }
 
-export default function CollectionLocRequest(props: Props) {
+export default function DataLocRequest(props: Props) {
     const { colorTheme } = useCommonContext();
+    const { locType, iconId } = props;
     const [ legalOfficer, setLegalOfficer ] = useState<LegalOfficerClass | null>(null);
     const { locsState } = useUserContext();
     const navigate = useNavigate();
@@ -31,9 +35,9 @@ export default function CollectionLocRequest(props: Props) {
 
     return (
         <FullWidthPane
-            className="CollectionLocRequest"
-            mainTitle="Request a Collection Protection"
-            titleIcon={ { icon: { id: "collection" } } }
+            className="DataLocRequest"
+            mainTitle={ `Request a ${ locType } Protection` }
+            titleIcon={ { icon: { id: iconId } } }
             onBack={ () => navigate(props.backPath) }
         >
             <Row>
@@ -59,31 +63,39 @@ export default function CollectionLocRequest(props: Props) {
                                 please request an Identity LOC to the Logion Legal Officer of your choice by
                                 clicking on the related button below:</p>
                             <ButtonGroup>
-                                <IdentityLocCreation />
+                                <LocCreation locType="Identity"/>
                             </ButtonGroup>
                         </Frame>
                     }
                     { legalOfficersWithValidIdentityLoc.length === 0 &&
                         <Frame className="request-id-loc-frame">
-                            <p className="info-text">To submit a Collection LOC request, you must select a Logion Legal
+                            <p className="info-text">To submit a { locType } LOC request, you must select a Logion Legal
                                 Officer who already executed an Identity LOC linked to your Polkadot address.</p>
                             <p className="info-text">Please request an Identity LOC to the Logion Legal Officer of your
                                 choice:</p>
                             <ButtonGroup>
-                                <IdentityLocCreation />
+                                <LocCreation locType="Identity"/>
                             </ButtonGroup>
                         </Frame>
                     }
-            </Col>
-            <Col>
-                <Frame disabled={ legalOfficer === null }>
-                    <CollectionLocRequestForm
-                        colors={ colorTheme.frame }
-                        legalOfficer={ legalOfficer?.address }
-                    />
-                </Frame>
-            </Col>
-        </Row>
-</FullWidthPane>
-)
+                </Col>
+                <Col>
+                    <Frame disabled={ legalOfficer === null }>
+                        { locType === "Collection" &&
+                            <CollectionLocRequestForm
+                                colors={ colorTheme.frame }
+                                legalOfficer={ legalOfficer?.address }
+                            />
+                        }
+                        { locType === "Transaction" &&
+                            <TransactionLocRequestForm
+                                colors={ colorTheme.frame }
+                                legalOfficer={ legalOfficer?.address }
+                            />
+                        }
+                    </Frame>
+                </Col>
+            </Row>
+        </FullWidthPane>
+    )
 }