Add version update component

src/components/TopWarning/Container.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@saleor/macaw-ui-next";
+import React from "react";
+
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+export const Container = ({ children }: ContainerProps) => {
+  return (
+    <Box
+      backgroundColor="warning1"
+      paddingX={3}
+      paddingY={0.5}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+    >{children}</Box>
+  )
+}

src/components/NewVersionBar/NewVersionBar.tsx → src/components/TopWarning/NewVersionAvailable.tsx

@@ -1,27 +1,18 @@
-import { Box, Button, Text } from "@saleor/macaw-ui-next";
+import { Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useRegisterSW } from "virtual:pwa-register/react";
+import { Container } from "./Container";
 
-export const NewVersionBar = () => {
-  const {
-    needRefresh: [needRefresh],
-    updateServiceWorker,
-  } = useRegisterSW();
+export const NewVersionAvailable = () => {
+  const { updateServiceWorker } = useRegisterSW();
 
-  if (!needRefresh) {
-    return null;
-  }
+  const handleReloadClick = () => {
+    updateServiceWorker()
+  };
 
   return (
-    <Box
-      backgroundColor="warning1"
-      paddingX={3}
-      paddingY={0.5}
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-    >
+    <Container>
       <Text size={1} fontWeight="medium">
         <FormattedMessage
           id="sngdVO"
@@ -30,7 +21,7 @@ export const NewVersionBar = () => {
         />
       </Text>
       <Button
-        onClick={() => updateServiceWorker(true)}
+        onClick={handleReloadClick}
         size="small"
         variant="tertiary"
         color="accent1"
@@ -44,6 +35,6 @@ export const NewVersionBar = () => {
           description="Click here to reload."
         />
       </Button>
-    </Box>
+    </Container>
   );
 };

src/components/TopWarning/YouAreOffline.tsx

@@ -0,0 +1,18 @@
+import { Text } from "@saleor/macaw-ui-next";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Container } from "./Container";
+
+export const YouAreOffline = () => {
+  return (
+    <Container>
+      <Text size={1} fontWeight="medium">
+        <FormattedMessage
+          id="cLnkZn"
+          defaultMessage="You are currently offline. Some features may not be available."
+          description="You are currently offline. Some features may not be available."
+        />
+      </Text>
+    </Container>
+  );
+};

src/components/TopWarning/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { YouAreOffline } from "./YouAreOffline";
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { NewVersionAvailable } from "./NewVersionAvailable";
+
+export const TopWarning = () => {
+  const {
+    needRefresh: [needRefresh],
+    offlineReady: [offlineReady],
+  } = useRegisterSW();
+
+
+  if (offlineReady) {
+    return <YouAreOffline />
+  }
+
+  if (needRefresh) {
+    return <NewVersionAvailable />
+  }
+
+  return null
+};
+
+

src/index.tsx

@@ -38,10 +38,10 @@ import ExitFormDialogProvider from "./components/Form/ExitFormDialogProvider";
 import { LocaleProvider } from "./components/Locale";
 import MessageManagerProvider from "./components/messages";
 import { NavigatorSearchProvider } from "./components/NavigatorSearch/NavigatorSearchProvider";
-import { NewVersionBar } from "./components/NewVersionBar";
 import { ProductAnalytics } from "./components/ProductAnalytics";
 import { SavebarRefProvider } from "./components/Savebar/SavebarRefContext";
 import { ShopProvider } from "./components/Shop";
+import { TopWarning } from "./components/TopWarning";
 import { WindowTitle } from "./components/WindowTitle";
 import { DEMO_MODE, getAppMountUri, GTM_ID } from "./config";
 import ConfigurationSection from "./configuration";
@@ -122,7 +122,7 @@ const App: React.FC = () => (
                                 <NavigatorSearchProvider>
                                   <ProductAnalytics>
                                     <SavebarRefProvider>
-                                      <NewVersionBar />
+                                      <TopWarning />
                                       <Routes />
                                     </SavebarRefProvider>
                                   </ProductAnalytics>