feat: save release version and remove saved product if the release ch…

…anges (#899)

* 1.0.0

* feat: remove saved product if release version changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "interface",
   "homepage": ".",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "repository": {
     "type": "git",

src/components/product/utils/useInitialValues.ts

@@ -8,6 +8,7 @@ import useProductByUuid, {
   ReturnUseProductByUuid
 } from "lib/utils/hooks/product/useProductByUuid";
 import { useCurrentSellers } from "lib/utils/hooks/useCurrentSellers";
+import { didReleaseVersionChange } from "lib/utils/release";
 import { useCoreSDK } from "lib/utils/useCoreSdk";
 import uniqBy from "lodash.uniqby";
 import { getDisputePeriodDurationFromSubgraphInDays } from "pages/create-product/utils/helpers";
@@ -70,10 +71,16 @@ export function useInitialValues() {
       }),
     [config.envConfig]
   );
-  const initialValues = useMemo(
-    () => getItemFromStorage<CreateProductForm | null>(MAIN_KEY, null),
-    []
-  );
+  const initialValues = useMemo(() => {
+    const savedProduct = getItemFromStorage<CreateProductForm | null>(
+      MAIN_KEY,
+      null
+    );
+    if (didReleaseVersionChange()) {
+      return null;
+    }
+    return savedProduct;
+  }, []);
 
   const { data: product } = useProductByUuid(sellerId, fromProductUuid, {
     enabled: !!fromProductUuid && !!sellerId

src/lib/utils/hooks/useLocalStorage.ts

@@ -23,6 +23,7 @@ export type GetItemFromStorageKey =
   | "isConnectWalletFromCommit"
   | "showCookies"
   | "showCookiesDrCenter"
+  | "release-version"
   | CreateProductImageProductImages
   | CreateProductImageCreateYourProfileLogo;
 
@@ -43,7 +44,7 @@ export function getItemFromStorage<T>(
   }
 }
 
-export function saveItemInStorage<T>(key: string, value: T) {
+export function saveItemInStorage<T>(key: GetItemFromStorageKey, value: T) {
   if (typeof window !== "undefined") {
     try {
       window.localStorage.setItem(key, JSON.stringify(value));
@@ -54,7 +55,7 @@ export function saveItemInStorage<T>(key: string, value: T) {
   }
 }
 
-export function removeItemInStorage(key: string) {
+export function removeItemInStorage(key: GetItemFromStorageKey) {
   if (typeof window !== "undefined") {
     try {
       Object.keys(localStorage)

src/lib/utils/release.ts

@@ -0,0 +1,16 @@
+import { CONFIG } from "lib/config";
+
+import { getItemFromStorage, saveItemInStorage } from "./hooks/useLocalStorage";
+
+export const didReleaseVersionChange = (): boolean => {
+  const releaseVersion = getItemFromStorage("release-version", undefined);
+  const currentReleaseVersion = CONFIG.releaseTag;
+  return releaseVersion !== currentReleaseVersion;
+};
+
+export const saveCurrentReleaseVersion = (): void => {
+  const currentReleaseVersion = CONFIG.releaseTag;
+  if (currentReleaseVersion) {
+    saveItemInStorage("release-version", currentReleaseVersion);
+  }
+};

src/router/AppRouter.tsx

@@ -1,18 +1,35 @@
 import { useConfigContext } from "components/config/ConfigContext";
+import { removeItemInStorage } from "lib/utils/hooks/useLocalStorage";
+import {
+  didReleaseVersionChange,
+  saveCurrentReleaseVersion
+} from "lib/utils/release";
 import { queryClient } from "queryClient";
 import { useEffect } from "react";
 import { HashRouter, Route } from "react-router-dom";
 
 import SentryProvider from "../components/SentryProvider";
 import ScrollToTop from "../components/utils/Scroll";
-import routes, { IRoutes } from "./routes";
+import routes from "./routes";
 import SuspenseRoute from "./SuspenseRoute";
+import { IRoutes } from "./types";
+
+const useHandleRelease = () => {
+  useEffect(() => {
+    if (didReleaseVersionChange()) {
+      removeItemInStorage("create-product");
+    }
+
+    saveCurrentReleaseVersion();
+  }, []);
+};
 
 export default function AppRouter() {
   const { config } = useConfigContext();
   useEffect(() => {
     queryClient.invalidateQueries();
   }, [config.envConfig.configId]);
+  useHandleRelease();
   return (
     <HashRouter>
       <ScrollToTop />

src/router/dappRoutes.ts

@@ -1,12 +1,12 @@
-import React, { lazy } from "react";
-import { RouteProps } from "react-router";
+import { lazy } from "react";
 
 import {
   BosonRoutes,
   OffersRoutes,
   ProductRoutes,
   SellerCenterRoutes
 } from "../lib/routing/routes";
+import { IRoutes } from "./types";
 const AboutPage = lazy(() => import("../pages/about/AboutPage"));
 const ChatPage = lazy(() => import("../pages/chat/Chat"));
 const CustomStorePage = lazy(
@@ -70,22 +70,6 @@ export const UserRoles = {
   Seller: "Seller",
   DisputeResolver: "DisputeResolver"
 } as const;
-export interface IRoutes extends RouteProps {
-  component:
-    | React.ComponentType<any> // eslint-disable-line
-    | React.LazyExoticComponent<React.ComponentType<any>>; // eslint-disable-line
-  role: Array<string | null>;
-  componentProps?: {
-    [key: string]: string;
-  };
-  app?: {
-    withLayout?: boolean;
-    withFooter?: boolean;
-    fluidHeader?: boolean;
-    withBosonStyles?: boolean;
-    withBanner?: boolean;
-  };
-}
 
 export default [
   {

src/router/drCenterRoutes.ts

@@ -1,7 +1,7 @@
-import React, { lazy } from "react";
-import { RouteProps } from "react-router";
+import { lazy } from "react";
 
 import { DrCenterRoutes } from "../lib/routing/drCenterRoutes";
+import { IRoutes } from "./types";
 
 const ChatPage = lazy(() => import("../pages/chat/Chat"));
 const DisputeCenterPage = lazy(
@@ -38,22 +38,6 @@ export const UserRoles = {
   Seller: "Seller",
   DisputeResolver: "DisputeResolver"
 } as const;
-export interface IRoutes extends RouteProps {
-  component:
-    | React.ComponentType<any> // eslint-disable-line
-    | React.LazyExoticComponent<React.ComponentType<any>>; // eslint-disable-line
-  role: Array<string | null>;
-  componentProps?: {
-    [key: string]: string;
-  };
-  app?: {
-    withLayout?: boolean;
-    withFooter?: boolean;
-    fluidHeader?: boolean;
-    withBosonStyles?: boolean;
-    withBanner?: boolean;
-  };
-}
 
 export default [
   {

src/router/routes.ts

@@ -1,11 +1,11 @@
-import React, { lazy } from "react";
-import { RouteProps } from "react-router";
+import { lazy } from "react";
 
 import { CONFIG } from "../lib/config";
 import { ViewMode } from "../lib/viewMode";
 import ViewModePage from "../pages/viewmode/ViewModePage";
 import dappRoutes from "./dappRoutes";
 import drCenterRoutes from "./drCenterRoutes";
+import { IRoutes } from "./types";
 const NotFoundPage = lazy(() => import("../pages/not-found/NotFound"));
 
 export const baseAppProps = {
@@ -28,21 +28,7 @@ export const UserRoles = {
   Seller: "Seller",
   DisputeResolver: "DisputeResolver"
 } as const;
-export interface IRoutes extends RouteProps {
-  component:
-    | React.ComponentType<any> // eslint-disable-line
-    | React.LazyExoticComponent<React.ComponentType<any>>; // eslint-disable-line
-  role: Array<string | null>;
-  componentProps?: {
-    [key: string]: string;
-  };
-  app?: {
-    withLayout?: boolean;
-    withFullLayout?: boolean;
-    withFooter?: boolean;
-    fluidHeader?: boolean;
-  };
-}
+
 const viewMode = CONFIG.envViewMode.current;
 
 const viewModeRoutes = {
@@ -74,7 +60,7 @@ const viewModeRoutes = {
       },
       component: NotFoundPage
     }
-  ]
+  ] as IRoutes[]
 } as const;
 
 export default viewModeRoutes[viewMode];

src/router/types.ts

@@ -0,0 +1,17 @@
+import { RouteProps } from "react-router";
+
+export type IRoutes = RouteProps & {
+  component:
+    | React.ComponentType<any> // eslint-disable-line
+    | React.LazyExoticComponent<React.ComponentType<any>>; // eslint-disable-line
+  role: Array<string | null>;
+  componentProps?: {
+    [key: string]: string;
+  };
+  app?: {
+    withLayout?: boolean;
+    withFullLayout?: boolean;
+    withFooter?: boolean;
+    fluidHeader?: boolean;
+  };
+};