Merge remote-tracking branch 'origin/feat/multiSigEnhanced' into feat…

…/DTIS-755-Scan-Members-QR-Codes
cardano-foundation · Apr 25, 2024 · 7fb9f71 · 7fb9f71
2 parents 9e1a9d1 + 1e5435a
commit 7fb9f71
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 100 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -1010,7 +1010,11 @@
     },
     "receive": {
       "title": "Setup identifier",
-      "confirmbutton": "Add identifier"
+      "confirmbutton": "Add identifier",
+      "notes": {
+        "top": "Before proceeding, please make sure everyone included as a member scans this QR code.",
+        "middle": "Remember to scan everyone else’s QR code too!"
+      }
     },
     "connections": {
       "title": "Connections",

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.scss b/src/ui/components/CreateIdentifier/CreateIdentifier.scss
@@ -139,6 +139,8 @@ ion-modal.create-identifier-modal {
   }
 
   .create-identifier-modal-content {
+    padding-top: 0;
+
     .page-header {
       margin-top: 0.625rem;
     }

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.tsx b/src/ui/components/CreateIdentifier/CreateIdentifier.tsx
@@ -59,6 +59,7 @@ const CreateIdentifier = ({
     setModalIsOpen(false);
     setState(initialState);
     setResumeMultiSig && setResumeMultiSig(null);
+    setInvitationReceived && setInvitationReceived(false);
   };
 
   const handleResetInvitationReceived = () => {
@@ -85,25 +86,17 @@ const CreateIdentifier = ({
           <IonSpinner name="circular" />
         </div>
       )}
-      {modalIsOpen &&
-        (invitationReceived ? (
-          <IdentifierReceiveInvitation
-            state={state}
-            setState={setState}
-            componentId={componentId}
-            resetModal={() => handleResetInvitationReceived()}
-            setBlur={setBlur}
-          />
-        ) : (
-          <CurrentStage
-            state={state}
-            setState={setState}
-            componentId={componentId}
-            resetModal={resetModal}
-            setBlur={setBlur}
-            resumeMultiSig={resumeMultiSig}
-          />
-        ))}
+      {modalIsOpen && (
+        <CurrentStage
+          state={state}
+          setState={setState}
+          componentId={componentId}
+          resetModal={resetModal}
+          setBlur={setBlur}
+          resumeMultiSig={resumeMultiSig}
+          invitationReceived={invitationReceived}
+        />
+      )}
     </IonModal>
   );
 };

diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.types.ts b/src/ui/components/CreateIdentifier/CreateIdentifier.types.ts
@@ -42,12 +42,18 @@ interface IdentifierStageProps {
   setBlur?: (value: boolean) => void;
   resetModal: () => void;
   resumeMultiSig?: IdentifierShortDetails | null;
+  invitationReceived?: boolean;
 }
 
 interface IdentifierStage1BodyProps {
   componentId: string;
   handleDone: () => void;
   oobi: string;
+  groupMetadata?: {
+    groupId: string;
+    groupInitiator: boolean;
+    groupCreated: boolean;
+  };
   handleScanButton: () => void;
 }
 

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx
@@ -1,14 +1,13 @@
 import { Keyboard } from "@capacitor/keyboard";
 import { Capacitor } from "@capacitor/core";
 import { IonGrid, IonRow, IonCol } from "@ionic/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { i18n } from "../../../../i18n";
 import { CustomInput } from "../../CustomInput";
 import { ErrorMessage } from "../../ErrorMessage";
 import { PageFooter } from "../../PageFooter";
 import { PageHeader } from "../../PageHeader";
-import { IdentifierThemeSelector } from "./IdentifierThemeSelector";
 import { TypeItem } from "./TypeItem";
 import { useAppDispatch, useAppSelector } from "../../../../store/hooks";
 import {
@@ -20,17 +19,23 @@ import {
   getIdentifiersCache,
   setIdentifiersCache,
 } from "../../../../store/reducers/identifiersCache";
-import { setToastMsg } from "../../../../store/reducers/stateCache";
+import {
+  getQueueIncomingRequest,
+  setCurrentOperation,
+  setToastMsg,
+} from "../../../../store/reducers/stateCache";
 import { IdentifierStageProps } from "../CreateIdentifier.types";
-import { ToastMsgType } from "../../../globals/types";
+import { OperationType, ToastMsgType } from "../../../globals/types";
 import { ScrollablePageLayout } from "../../layout/ScrollablePageLayout";
+import { IdentifierThemeSelector } from "./IdentifierThemeSelector";
 
 const IdentifierStage0 = ({
   state,
   setState,
   componentId,
   setBlur,
   resetModal,
+  invitationReceived,
 }: IdentifierStageProps) => {
   const dispatch = useAppDispatch();
   const identifiersData = useAppSelector(getIdentifiersCache);
@@ -42,6 +47,14 @@ const IdentifierStage0 = ({
   const [selectedTheme, setSelectedTheme] = useState(state.selectedTheme);
   const displayNameValueIsValid =
     displayNameValue.length > 0 && displayNameValue.length <= 32;
+  const queueIncomingRequest = useAppSelector(getQueueIncomingRequest);
+  const incomingRequest = useMemo(() => {
+    return !queueIncomingRequest.isProcessing
+      ? { id: "" }
+      : queueIncomingRequest.queues.length > 0
+        ? queueIncomingRequest.queues[0]
+        : { id: "" };
+  }, [queueIncomingRequest]);
 
   useEffect(() => {
     if (Capacitor.isNativePlatform()) {
@@ -74,14 +87,20 @@ const IdentifierStage0 = ({
       theme: state.selectedTheme,
     };
     let groupMetadata;
-    if (state.selectedAidType == 1) {
+    if (invitationReceived) {
+      groupMetadata = {
+        groupId: incomingRequest.id,
+        groupInitiator: false,
+        groupCreated: false,
+      };
+    } else if (state.selectedAidType == 1) {
       groupMetadata = {
         groupId: uuidv4(),
         groupInitiator: true,
         groupCreated: false,
       };
-      metadata.groupMetadata = groupMetadata;
     }
+    metadata.groupMetadata = groupMetadata;
     const { identifier, signifyName } =
       await Agent.agent.identifiers.createIdentifier(metadata);
     if (identifier) {
@@ -97,12 +116,13 @@ const IdentifierStage0 = ({
         newIdentifier.groupMetadata = groupMetadata;
       }
       dispatch(setIdentifiersCache([...identifiersData, newIdentifier]));
-      if (state.selectedAidType !== 0) {
+      if (state.selectedAidType !== 0 || invitationReceived) {
         setState((prevState: IdentifierStageProps) => ({
           ...prevState,
           identifierCreationStage: 1,
           newIdentifier,
         }));
+        invitationReceived && dispatch(setCurrentOperation(OperationType.IDLE));
       }
     }
   };
@@ -111,15 +131,24 @@ const IdentifierStage0 = ({
     setBlur && setBlur(true);
     setTimeout(async () => {
       await handleCreateIdentifier();
-      if (state.selectedAidType !== 0) {
+      if (state.selectedAidType !== 0 || invitationReceived) {
         setBlur && setBlur(false);
       } else {
-        dispatch(setToastMsg(ToastMsgType.IDENTIFIER_CREATED));
         resetModal && resetModal();
       }
+      dispatch(setToastMsg(ToastMsgType.IDENTIFIER_CREATED));
     }, CREATE_IDENTIFIER_BLUR_TIMEOUT);
   };
 
+  const handleCancel = async () => {
+    // @TODO - sdisalvo: Placeholder for deleting the notification record
+    // await Agent.agent.credentials.deleteKeriNotificationRecordById(
+    //   incomingRequest.id
+    // );
+    invitationReceived && dispatch(setCurrentOperation(OperationType.IDLE));
+    resetModal && resetModal();
+  };
+
   return (
     <>
       <ScrollablePageLayout
@@ -128,9 +157,17 @@ const IdentifierStage0 = ({
         header={
           <PageHeader
             closeButton={true}
-            closeButtonAction={() => resetModal && resetModal()}
-            closeButtonLabel={`${i18n.t("createidentifier.cancel")}`}
-            title={`${i18n.t("createidentifier.add.title")}`}
+            closeButtonAction={() => handleCancel()}
+            closeButtonLabel={`${i18n.t(
+              invitationReceived
+                ? "createidentifier.back"
+                : "createidentifier.cancel"
+            )}`}
+            title={`${i18n.t(
+              invitationReceived
+                ? "createidentifier.receive.title"
+                : "createidentifier.add.title"
+            )}`}
           />
         }
       >
@@ -160,60 +197,62 @@ const IdentifierStage0 = ({
             )}
           </div>
         </div>
-        <div className="aid-type">
-          <div className="type-input-title">{`${i18n.t(
-            "createidentifier.aidtype.title"
-          )}`}</div>
-          <IonGrid
-            className="aid-type-selector"
-            data-testid="aid-type-selector"
-          >
-            <IonRow>
-              <IonCol>
-                <TypeItem
-                  dataTestId="identifier-aidtype-default"
-                  index={0}
-                  text={i18n.t("createidentifier.aidtype.default.label")}
-                  clickEvent={() =>
-                    setState((prevState: IdentifierStageProps) => ({
-                      ...prevState,
-                      selectedAidType: 0,
-                    }))
-                  }
-                  selectedType={state.selectedAidType}
-                />
-              </IonCol>
-              <IonCol>
-                <TypeItem
-                  dataTestId="identifier-aidtype-multisig"
-                  index={1}
-                  text={i18n.t("createidentifier.aidtype.multisig.label")}
-                  clickEvent={() =>
-                    setState((prevState: IdentifierStageProps) => ({
-                      ...prevState,
-                      selectedAidType: 1,
-                    }))
-                  }
-                  selectedType={state.selectedAidType}
-                />
-              </IonCol>
-              <IonCol>
-                <TypeItem
-                  dataTestId="identifier-aidtype-delegated"
-                  index={2}
-                  text={i18n.t("createidentifier.aidtype.delegated.label")}
-                  clickEvent={() =>
-                    setState((prevState: IdentifierStageProps) => ({
-                      ...prevState,
-                      selectedAidType: 2,
-                    }))
-                  }
-                  selectedType={state.selectedAidType}
-                />
-              </IonCol>
-            </IonRow>
-          </IonGrid>
-        </div>
+        {!invitationReceived && (
+          <div className="aid-type">
+            <div className="type-input-title">{`${i18n.t(
+              "createidentifier.aidtype.title"
+            )}`}</div>
+            <IonGrid
+              className="aid-type-selector"
+              data-testid="aid-type-selector"
+            >
+              <IonRow>
+                <IonCol>
+                  <TypeItem
+                    dataTestId="identifier-aidtype-default"
+                    index={0}
+                    text={i18n.t("createidentifier.aidtype.default.label")}
+                    clickEvent={() =>
+                      setState((prevState: IdentifierStageProps) => ({
+                        ...prevState,
+                        selectedAidType: 0,
+                      }))
+                    }
+                    selectedType={state.selectedAidType}
+                  />
+                </IonCol>
+                <IonCol>
+                  <TypeItem
+                    dataTestId="identifier-aidtype-multisig"
+                    index={1}
+                    text={i18n.t("createidentifier.aidtype.multisig.label")}
+                    clickEvent={() =>
+                      setState((prevState: IdentifierStageProps) => ({
+                        ...prevState,
+                        selectedAidType: 1,
+                      }))
+                    }
+                    selectedType={state.selectedAidType}
+                  />
+                </IonCol>
+                <IonCol>
+                  <TypeItem
+                    dataTestId="identifier-aidtype-delegated"
+                    index={2}
+                    text={i18n.t("createidentifier.aidtype.delegated.label")}
+                    clickEvent={() =>
+                      setState((prevState: IdentifierStageProps) => ({
+                        ...prevState,
+                        selectedAidType: 2,
+                      }))
+                    }
+                    selectedType={state.selectedAidType}
+                  />
+                </IonCol>
+              </IonRow>
+            </IonGrid>
+          </div>
+        )}
         <div className="identifier-theme">
           <div className="theme-input-title">{`${i18n.t(
             "createidentifier.theme.title"
@@ -227,7 +266,11 @@ const IdentifierStage0 = ({
       <PageFooter
         pageId={componentId}
         customClass={keyboardIsOpen ? "ion-hide" : ""}
-        primaryButtonText={`${i18n.t("createidentifier.add.confirmbutton")}`}
+        primaryButtonText={`${i18n.t(
+          invitationReceived
+            ? "createidentifier.receive.confirmbutton"
+            : "createidentifier.add.confirmbutton"
+        )}`}
         primaryButtonAction={async () => handleContinue()}
         primaryButtonDisabled={!displayNameValueIsValid}
       />

diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx
@@ -10,7 +10,6 @@ import { i18n } from "../../../../i18n";
 
 const IdentifierStage1 = ({
   state,
-  setState,
   componentId,
   resetModal,
   resumeMultiSig,
@@ -23,6 +22,8 @@ const IdentifierStage1 = ({
   const groupId =
     resumeMultiSig?.groupMetadata?.groupId ||
     state.newIdentifier.groupMetadata?.groupId;
+  const groupMetadata =
+    resumeMultiSig?.groupMetadata || state.newIdentifier.groupMetadata;
   const [alertIsOpen, setAlertIsOpen] = useState(false);
 
   useEffect(() => {
@@ -59,13 +60,15 @@ const IdentifierStage1 = ({
           componentId={componentId}
           handleDone={handleDone}
           oobi={oobi}
+          groupMetadata={groupMetadata}
           handleScanButton={() => setAlertIsOpen(true)}
         />
       ) : (
         <IdentifierStage1BodyResume
           componentId={componentId}
           handleDone={handleDone}
           oobi={oobi}
+          groupMetadata={groupMetadata}
           handleScanButton={() => setAlertIsOpen(true)}
         />
       )}