feat(Onboarding/Upload): update viewer when reaching final step

components/core/ApplicationHeader.js

@@ -157,7 +157,7 @@ export default function ApplicationHeader({ viewer, page, data, onAction }) {
             {/**TODO: update Search component */}
             <Search.Input viewer={viewer} data={data} onAction={onAction} page={page} />
           </div>
-          <UploadOnboarding viewer={viewer}>
+          <UploadOnboarding onAction={onAction} viewer={viewer}>
             <Upload.Provider page={page} data={data} viewer={viewer}>
               <Upload.Root data={data}>
                 <div css={STYLES_RIGHT}>

components/core/Onboarding/Popup.js

@@ -7,7 +7,7 @@ import { ModalPortal } from "../ModalPortal";
 const STYLES_ONBOARDING_POPUP = (theme) => css`
   position: fixed;
   right: 25px;
-  bottom: 44px;
+  bottom: 32px;
   width: 320px;
   border-radius: 16px;
   box-shadow: ${theme.shadow.lightLarge};

components/core/Onboarding/Upload.js

@@ -2,11 +2,12 @@ import * as React from "react";
 import * as Styles from "~/common/styles";
 import * as System from "~/components/system";
 import * as SVG from "~/common/svg";
-import * as Jumper from "~/components/core/Jumper";
+import * as Jumper from "~/components/system/components/fragments/Jumper";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
 import { ModalPortal } from "~/components/core/ModalPortal";
+import { useIsomorphicLayoutEffect } from "~/common/hooks";
 
 import ProfilePhoto from "~/components/core/ProfilePhoto";
 import OnboardingPopup from "~/components/core/Onboarding/Popup";
@@ -16,7 +17,7 @@ import OnboardingOverlay from "~/components/core/Onboarding/Overlay";
  * Provider
  * -----------------------------------------------------------------------------------------------*/
 
-const UploadOnboardingContext = React.createContext({});
+const UploadOnboardingContext = React.createContext();
 export const useUploadOnboardingContext = () => React.useContext(UploadOnboardingContext);
 
 const steps = {
@@ -26,7 +27,7 @@ const steps = {
   finish: "finish",
 };
 
-function Provider({ children, viewer, ...props }) {
+function Provider({ children, viewer, onAction, ...props }) {
   const [currentStep, setCurrentStep] = React.useState(
     viewer?.onboarding?.upload ? steps.finish : steps.welcome
   );
@@ -42,6 +43,15 @@ function Provider({ children, viewer, ...props }) {
     setCurrentStep((prev) => nextStep[prev]);
   }, [currentStep]);
 
+  useIsomorphicLayoutEffect(() => {
+    if (currentStep === steps.finish) {
+      onAction({
+        type: "UPDATE_VIEWER",
+        viewer: { onboarding: { ...viewer.onboarding, upload: true } },
+      });
+    }
+  }, [currentStep]);
+
   return (
     <UploadOnboardingContext.Provider value={{ currentStep, steps, goToNextStep }} {...props}>
       {children}
@@ -102,15 +112,6 @@ function Welcome({ viewer }) {
 /* -------------------------------------------------------------------------------------------------
  *  UploadWalkthrough
  * -----------------------------------------------------------------------------------------------*/
-
-const STYLES_POPUP_HEADER = css`
-  padding: 13px 16px 8px;
-`;
-
-const STYLES_POPUP_CONTENT = css`
-  padding: 16px;
-`;
-
 const STYLES_OVERLAY_ZINDEX = css`
   z-index: 1;
 `;
@@ -229,9 +230,9 @@ function UploadWalkthrough() {
   );
 }
 
-export function UploadOnboarding({ viewer, children }) {
+export function UploadOnboarding({ viewer, onAction, children }) {
   return (
-    <Provider viewer={viewer}>
+    <Provider viewer={viewer} onAction={onAction}>
       <Welcome viewer={viewer} />
       <UploadWalkthrough />
       {children}

components/core/Upload/Provider.js

@@ -6,7 +6,7 @@ import { useEventListener } from "~/common/hooks";
 import { useUploadStore } from "~/components/core/Upload/store";
 import { useUploadOnboardingContext } from "~/components/core/Onboarding/Upload";
 
-const UploadContext = React.createContext({});
+const UploadContext = React.createContext();
 export const useUploadContext = () => React.useContext(UploadContext);
 
 export const Provider = ({ children, page, data, viewer }) => {