Release new version

src/components/InfoBanner.js

@@ -6,14 +6,15 @@ export default class InfoBanner extends React.Component {
     super();
 
     this.state = {
-      dismissed: false
+      dismissed: localStorage.getItem('developedBannerDismissed') === 'true' || false
     };
 
     this.dismissBanner = this.dismissBanner.bind(this);
   }
 
   dismissBanner() {
-    this.setState({dismissed: true});
+    this.setState({ dismissed: true });
+    localStorage.setItem('developedBannerDismissed', 'true');
   }
 
   render() {
@@ -22,14 +23,15 @@ export default class InfoBanner extends React.Component {
     }
 
     return (
-      <div style={{marginRight: '80px'}} >
-      <Banner
-        status="info"
-
-        onDismiss={this.dismissBanner}
-      >
-        <p>Please note that this app is not developed by Shopify. Please do not contact Shopify Support for help.</p>
-      </Banner>
+      <div style={{ display: 'flex', justifyContent: 'center' }} >
+        <div style={{ marginRight: '80px', marginLeft: '80px', maxWidth: 'fit-content' }} >
+          <Banner
+            status="info"
+            onDismiss={this.dismissBanner}
+          >
+            <p>Please note that this app is not developed by Shopify. Please do not contact Shopify Support for help.</p>
+          </Banner>
+        </div>
       </div>
     )
   }

src/components/WarningBanner.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Banner, Link } from '@shopify/polaris';
+
+export default class WarningBanner extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      dismissed: localStorage.getItem('warningBannerDismissed') === 'true' || false
+    };
+
+    this.dismissBanner = this.dismissBanner.bind(this);
+  }
+
+  dismissBanner() {
+    this.setState({ dismissed: true });
+    localStorage.setItem('warningBannerDismissed', 'true');
+  }
+
+  render() {
+    if (this.state.dismissed) {
+      return null;
+    }
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center' }} >
+        <div style={{ marginRight: '80px', marginLeft: '80px', maxWidth: 'fit-content' }} >
+          <Banner
+            status="warning"
+            onDismiss={this.dismissBanner}
+          >
+            <p>Shopify Scripts are deprecated and will be <Link external url='https://help.shopify.com/en/manual/checkout-settings/script-editor/migrating'>unavailable after August 28, 2025</Link>. Consider trying out the <Link external url='https://apps.shopify.com/checkout-blocks'>Checkout Blocks</Link> app.</p>
+          </Banner>
+        </div>
+      </div>
+    )
+  }
+}

src/index.js

@@ -5,6 +5,7 @@ import bugsnag from '@bugsnag/js'
 import bugsnagReact from '@bugsnag/plugin-react'
 import Versions from './versions';
 import InfoBanner from './components/InfoBanner';
+import WarningBanner from './components/WarningBanner';
 import ErrorPage from './components/ErrorPage'
 import App from './App';
 
@@ -23,6 +24,7 @@ ReactDOM.render(
   <AppProvider>
     <ErrorBoundary FallbackComponent={ErrorPage}>
       <InfoBanner />
+      <WarningBanner />
       <App />
     </ErrorBoundary>
   </AppProvider>,