wip: add buttons to scanner and fix groupId bug

src/locales/en/en.json

@@ -1016,6 +1016,13 @@
         "middle": "Remember to scan everyone else’s QR code too!"
       }
     },
+    "scan": {
+      "confirm": "Confirm",
+      "pasteoobi": "Paste OOBI",
+      "initiate": "Initiate multi-sig",
+      "scanqrcode": "Scan QR code",
+      "pastecontents": "Paste contents"
+    },
     "connections": {
       "title": "Connections",
       "subtitle": "These are the members you scanned. Please review before proceeding.",

src/ui/App.scss

@@ -27,7 +27,7 @@ body {
   }
 
   &.scanner-active {
-    background-color: transparent;
+    background-color: var(--ion-color-secondary);
 
     > div:last-child {
       display: block;

src/ui/App.tsx

@@ -88,7 +88,12 @@ const App = () => {
       <AppWrapper>
         <StrictMode>
           {isPreviewMode && <MobileHeaderPreview />}
-          {showScan && <FullPageScanner setShowScan={setShowScan} />}
+          {showScan && (
+            <FullPageScanner
+              showScan={showScan}
+              setShowScan={setShowScan}
+            />
+          )}
           <Routes />
           <SetUserName
             isOpen={showSetUserName}

src/ui/components/CreateIdentifier/CreateIdentifier.tsx

@@ -85,6 +85,7 @@ const CreateIdentifier = ({
     setModalIsOpen(false);
     setState(initialState);
     setResumeMultiSig && setResumeMultiSig(null);
+    setMultiSigGroup && setMultiSigGroup(undefined);
     dispatch(setMultiSigGroupCache(undefined));
   };
 

src/ui/components/PageHeader/PageHeader.tsx

@@ -17,6 +17,7 @@ import { getBackRoute } from "../../../routes/backRoute";
 import "./PageHeader.scss";
 
 const PageHeader = ({
+  translucent,
   backButton,
   beforeBack,
   onBack,
@@ -67,7 +68,6 @@ const PageHeader = ({
 
   return (
     <IonHeader
-      translucent={true}
       className={`ion-no-border page-header ${
         hasContent ? "show-header" : "hide-header"
       }`}

src/ui/components/PageHeader/PageHeader.types.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 
 interface PageHeaderProps {
+  translucent?: boolean;
   backButton?: boolean;
   beforeBack?: () => void;
   onBack?: () => void;

src/ui/components/Scanner/Scanner.tsx

@@ -63,6 +63,7 @@ const Scanner = forwardRef(
       await BarcodeScanner.stopScan();
       await BarcodeScanner.showBackground();
       document?.querySelector("body")?.classList.remove("scanner-active");
+      setGroupId("");
     };
 
     useImperativeHandle(ref, () => ({

src/ui/pages/FullPageScanner/FullPageScanner.scss

@@ -1,12 +1,38 @@
 .qr-code-scanner-full-page {
-  .page-header {
-    position: absolute;
-    top: 0;
-    left: 0;
+  &.responsive-page-layout {
+    background: transparent;
+
+    ion-toolbar {
+      margin-top: 0;
+      --background: transparent;
+    }
   }
 
-  .qr-code-scanner-icon {
-    padding-bottom: 4rem;
-    margin: 0;
+  .responsive-page-content {
+    justify-content: flex-end;
+
+    .qr-code-scanner {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .qr-code-scanner-icon {
+      padding-bottom: 4rem;
+      margin: 0;
+    }
+
+    ion-toolbar.page-footer {
+      display: flex !important;
+      flex-direction: column-reverse !important;
+
+      .primary-button {
+        order: 2;
+      }
+
+      .secondary-button {
+        order: 2;
+      }
+    }
   }
 }

src/ui/pages/FullPageScanner/FullPageScanner.tsx

@@ -9,17 +9,26 @@ import {
 } from "@ionic/react";
 import { useEffect, useRef } from "react";
 import { Scanner } from "../../components/Scanner";
-import { setCurrentOperation } from "../../../store/reducers/stateCache";
-import { useAppDispatch } from "../../../store/hooks";
+import {
+  getCurrentOperation,
+  setCurrentOperation,
+} from "../../../store/reducers/stateCache";
+import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
   FullPageScannerProps,
   ScannerRefComponent,
 } from "./FullPageScanner.types";
 import { OperationType } from "../../globals/types";
 import "./FullPageScanner.scss";
+import { ResponsivePageLayout } from "../../components/layout/ResponsivePageLayout";
+import { PageHeader } from "../../components/PageHeader";
+import { PageFooter } from "../../components/PageFooter";
+import { i18n } from "../../../i18n";
 
-const FullPageScanner = ({ setShowScan }: FullPageScannerProps) => {
+const FullPageScanner = ({ showScan, setShowScan }: FullPageScannerProps) => {
+  const pageId = "qr-code-scanner-full-page";
   const dispatch = useAppDispatch();
+  const currentOperation = useAppSelector(getCurrentOperation);
   const scannerRef = useRef<ScannerRefComponent>(null);
 
   useEffect(() => {
@@ -35,34 +44,50 @@ const FullPageScanner = ({ setShowScan }: FullPageScannerProps) => {
       ?.querySelector("body.scanner-active > div:last-child")
       ?.classList.add("hide");
   };
+
+  const handlePrimaryButtonAction = () => {
+    //
+  };
+
+  const handleSecondaryButtonAction = () => {
+    //
+  };
+
   return (
-    <IonPage
-      className="qr-code-scanner-full-page"
-      data-testid="qr-code-scanner-full-page"
+    <ResponsivePageLayout
+      pageId={pageId}
+      activeStatus={showScan}
+      header={
+        <PageHeader
+          closeButton={true}
+          closeButtonAction={handleReset}
+          closeButtonIcon={arrowBackOutline}
+        />
+      }
     >
-      <IonHeader className="ion-no-border page-header">
-        <IonToolbar color="transparent">
-          <IonButtons slot="start">
-            <IonButton
-              slot="icon-only"
-              fill="clear"
-              onClick={() => handleReset()}
-              className="back-button"
-              data-testid="back-button"
-            >
-              <IonIcon
-                icon={arrowBackOutline}
-                color="primary"
-              />
-            </IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
       <Scanner
         ref={scannerRef}
         handleReset={handleReset}
       />
-    </IonPage>
+      {currentOperation === OperationType.MULTI_SIG_INITIATOR_SCAN && (
+        <PageFooter
+          pageId={pageId}
+          primaryButtonText={`${i18n.t("createidentifier.scan.initiate")}`}
+          primaryButtonAction={() => handlePrimaryButtonAction()}
+          secondaryButtonText={`${i18n.t("createidentifier.scan.pasteoobi")}`}
+          secondaryButtonAction={() => handleSecondaryButtonAction()}
+        />
+      )}
+      {currentOperation === OperationType.MULTI_SIG_RECEIVER_SCAN && (
+        <PageFooter
+          pageId={pageId}
+          secondaryButtonText={`${i18n.t(
+            "createidentifier.scan.pastecontents"
+          )}`}
+          secondaryButtonAction={() => handleSecondaryButtonAction()}
+        />
+      )}
+    </ResponsivePageLayout>
   );
 };
 

src/ui/pages/FullPageScanner/FullPageScanner.types.ts

@@ -1,4 +1,5 @@
 interface FullPageScannerProps {
+  showScan: boolean;
   setShowScan: (value: boolean) => void;
 }