feat(Onboarding/Tags): add tags onboarding

components/core/Filter/Content.js

@@ -7,6 +7,7 @@ import * as Styles from "~/common/styles";
 import { FileTypeGroup } from "~/components/core/FileTypeIcon";
 import { css } from "@emotion/react";
 import { useFilterContext } from "~/components/core/Filter/Provider";
+import { TagsOnboarding } from "~/components/core/Onboarding/Tags";
 
 import DataView from "~/components/core/DataView";
 import EmptyState from "~/components/core/EmptyState";
@@ -41,11 +42,19 @@ export function Content({ viewer, onAction, page, ...props }) {
   const [{ filterState }] = useFilterContext();
   const { objects } = filterState;
 
+  const isOnboardingActive =
+    viewer?.onboarding?.upload &&
+    !viewer?.onboarding?.tags &&
+    filterState?.type === "library" &&
+    objects.length > 0;
+
   return (
     <div css={STYLES_DATAVIEWER_WRAPPER} {...props}>
       {objects.length ? (
+        <TagsOnboarding isActive={isOnboardingActive}>
           <DataView
             key="scene-files-folder"
+            /** TODO(amine): when updating filters, update isOwner prop */
             isOwner={true}
             items={objects}
             onAction={onAction}
@@ -53,6 +62,7 @@ export function Content({ viewer, onAction, page, ...props }) {
             page={page}
             view="grid"
           />
+        </TagsOnboarding>
       ) : (
         <EmptyState css={STYLES_EMPTY_STATE_WRAPPER}>
           <FileTypeGroup />

components/core/Onboarding/Tags.js

@@ -0,0 +1,106 @@
+import * as React from "react";
+import * as System from "~/components/system";
+
+import { ModalPortal } from "~/components/core/ModalPortal";
+
+import OnboardingPopup from "~/components/core/Onboarding/Popup";
+
+/* -------------------------------------------------------------------------------------------------
+ * Provider
+ * -----------------------------------------------------------------------------------------------*/
+
+const TagsOnboardingContext = React.createContext();
+export const useTagsOnboardingContext = () => React.useContext(TagsOnboardingContext);
+
+const steps = {
+  tagsTrigger: "tagsTrigger",
+  tagsJumper: "tagsJumper",
+  finish: "finish",
+};
+
+function Provider({ children, viewer, ...props }) {
+  const [currentStep, setCurrentStep] = React.useState(
+    viewer?.onboarding?.tags ? steps.finish : steps.tagsTrigger
+  );
+
+  const goToNextStep = React.useCallback(() => {
+    if (currentStep === steps.finish) return;
+
+    const nextStep = {
+      tagsTrigger: "tagsJumper",
+      tagsJumper: "finish",
+    };
+    setCurrentStep((prev) => nextStep[prev]);
+  }, [currentStep]);
+
+  return (
+    <TagsOnboardingContext.Provider value={{ currentStep, steps, goToNextStep }} {...props}>
+      {children}
+    </TagsOnboardingContext.Provider>
+  );
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * TagsWalkthrought
+ * -----------------------------------------------------------------------------------------------*/
+
+function TagsWalkthrought() {
+  const [isOrganizeTagsPopupVisible, setOrganizeTagsPopupVisiblity] = React.useState(true);
+  const hideOrganizeTagsPopup = () => setOrganizeTagsPopupVisiblity(false);
+
+  const [isTagsPrivacyPopupVisible, setTagsPrivacyPopupVisibility] = React.useState(true);
+  const hideTagsPrivacyPopup = () => setTagsPrivacyPopupVisibility(false);
+
+  const { currentStep, steps } = useTagsOnboardingContext();
+
+  if (currentStep === steps.tagsTrigger)
+    return isOrganizeTagsPopupVisible ? (
+      <ModalPortal>
+        <OnboardingPopup header={"Organize with tags"}>
+          <System.P2 color="textBlack">
+            Hover over the object and click on “#” button to apply tags to it.
+          </System.P2>
+          <System.ButtonPrimary
+            style={{ marginLeft: "auto", marginTop: 34, minHeight: "24px" }}
+            onClick={hideOrganizeTagsPopup}
+          >
+            Got it
+          </System.ButtonPrimary>
+        </OnboardingPopup>
+      </ModalPortal>
+    ) : null;
+
+  if (currentStep === steps.tagsJumper) {
+    return (
+      <ModalPortal>
+        {isTagsPrivacyPopupVisible ? (
+          <OnboardingPopup header="Tag privacy">
+            <System.P2 color="textBlack">
+              All your objects are link-access only by default. If you apply public tags on them,
+              they will show up on your profile.
+            </System.P2>
+            <System.ButtonPrimary
+              style={{ marginLeft: "auto", marginTop: 14, minHeight: "24px" }}
+              onClick={hideTagsPrivacyPopup}
+            >
+              Got it
+            </System.ButtonPrimary>
+          </OnboardingPopup>
+        ) : null}
+      </ModalPortal>
+    );
+  }
+
+  return null;
+}
+
+export function TagsOnboarding({ isActive, viewer, children }) {
+  if (!isActive) return children;
+
+  return (
+    <Provider viewer={viewer}>
+      <TagsWalkthrought />
+      {children}
+    </Provider>
+  );
+}