fix(mobile): show premium modal on iOS

packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx

@@ -14,22 +14,27 @@ const NoSubscriptionBanner = ({
   title: string
   message: string
   className?: string
-}) => (
-  <div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
-    <div className="flex items-center">
-      <Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
-      <h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
+}) => {
+  const onClick = () => {
+    if (application.isNativeIOS()) {
+      application.showPremiumModal()
+    } else {
+      application.openPurchaseFlow()
+    }
+  }
+
+  return (
+    <div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
+      <div className="flex items-center">
+        <Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
+        <h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
+      </div>
+      <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>
+      <Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start uppercase" onClick={onClick}>
+        Upgrade Features
+      </Button>
     </div>
-    <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>
-    <Button
-      primary
-      small
-      className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-      onClick={() => application.openPurchaseFlow()}
-    >
-      Upgrade Features
-    </Button>
-  </div>
-)
+  )
+}
 
 export default NoSubscriptionBanner