fix: add OptionModal component and hide otherIdentifierContacts when …

…empty
cardano-foundation · May 8, 2024 · 5015e3a · 5015e3a
1 parent f046ffc
commit 5015e3a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 48 deletions.
diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage4.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage4.tsx
@@ -123,42 +123,46 @@ const IdentifierStage4 = ({
             </IonItem>
           </IonCard>
         </div>
-        <div>
-          <div className="identifier-list-title">
-            {i18n.t("createidentifier.confirm.selectedmembers")}
+        {otherIdentifierContacts.length && (
+          <div>
+            <div className="identifier-list-title">
+              {i18n.t("createidentifier.confirm.selectedmembers")}
+            </div>
+            <IonCard>
+              {otherIdentifierContacts.map((connection, index) => {
+                return (
+                  <IonItem
+                    key={index}
+                    className="identifier-list-item"
+                  >
+                    <IonLabel>
+                      <img
+                        src={connection?.logo || KeriLogo}
+                        className="connection-logo"
+                        alt="connection-logo"
+                        data-testid={`identifier-stage-3-connection-logo-${index}`}
+                      />
+                      <span className="connection-name">
+                        {connection.label}
+                      </span>
+                      <IonIcon
+                        aria-hidden="true"
+                        icon={pencilOutline}
+                        slot="end"
+                        onClick={() =>
+                          setState((prevState: IdentifierStageProps) => ({
+                            ...prevState,
+                            identifierCreationStage: 2,
+                          }))
+                        }
+                      />
+                    </IonLabel>
+                  </IonItem>
+                );
+              })}
+            </IonCard>
           </div>
-          <IonCard>
-            {otherIdentifierContacts.map((connection, index) => {
-              return (
-                <IonItem
-                  key={index}
-                  className="identifier-list-item"
-                >
-                  <IonLabel>
-                    <img
-                      src={connection?.logo || KeriLogo}
-                      className="connection-logo"
-                      alt="connection-logo"
-                      data-testid={`identifier-stage-3-connection-logo-${index}`}
-                    />
-                    <span className="connection-name">{connection.label}</span>
-                    <IonIcon
-                      aria-hidden="true"
-                      icon={pencilOutline}
-                      slot="end"
-                      onClick={() =>
-                        setState((prevState: IdentifierStageProps) => ({
-                          ...prevState,
-                          identifierCreationStage: 2,
-                        }))
-                      }
-                    />
-                  </IonLabel>
-                </IonItem>
-              );
-            })}
-          </IonCard>
-        </div>
+        )}
         <div>
           <div className="identifier-list-title">
             {i18n.t("createidentifier.confirm.treshold")}

diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -36,6 +36,7 @@ import { PageFooter } from "../PageFooter";
 import { ResponsiveModal } from "../layout/ResponsiveModal";
 import { PageHeader } from "../PageHeader";
 import { CustomInput } from "../CustomInput";
+import { OptionModal } from "../OptionsModal";
 
 const Scanner = forwardRef(
   ({ setIsValueCaptured, handleReset }: ScannerProps, ref) => {
@@ -248,33 +249,33 @@ const Scanner = forwardRef(
           setModalIsOpen={setCreateIdentifierModalIsOpen}
           groupId={groupId}
         />
-        <ResponsiveModal
+        <OptionModal
           modalIsOpen={pasteModalIsOpen}
           componentId={componentId + "-input-modal"}
           customClasses={componentId + "-input-modal"}
           onDismiss={() => setPasteModalIsOpen(false)}
-        >
-          <PageHeader
-            closeButton={true}
-            closeButtonLabel={`${i18n.t("createidentifier.scan.cancel")}`}
-            closeButtonAction={() => setPasteModalIsOpen(false)}
-            title={
+          header={{
+            closeButton: true,
+            closeButtonAction: () => setPasteModalIsOpen(false),
+            closeButtonLabel: `${i18n.t("createidentifier.scan.cancel")}`,
+            title: `${
               currentOperation === OperationType.MULTI_SIG_INITIATOR_SCAN ||
               currentOperation === OperationType.MULTI_SIG_RECEIVER_SCAN
                 ? `${i18n.t("createidentifier.scan.pasteoobi")}`
                 : `${i18n.t("createidentifier.scan.pastecontents")}`
-            }
-            actionButton={true}
-            actionButtonAction={handleSubmitPastedValue}
-            actionButtonLabel={`${i18n.t("createidentifier.scan.confirm")}`}
-          />
+            }`,
+            actionButton: true,
+            actionButtonAction: handleSubmitPastedValue,
+            actionButtonLabel: `${i18n.t("createidentifier.scan.confirm")}`,
+          }}
+        >
           <CustomInput
             dataTestId={`${componentId}-input`}
             autofocus={true}
             onChangeInput={setPastedValue}
             value={pastedValue}
           />
-        </ResponsiveModal>
+        </OptionModal>
       </>
     );
   }