feat: open purchase flow

app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx

@@ -1,23 +1,63 @@
 import { FunctionalComponent } from "preact";
 import { Text } from '@/preferences/components';
 import { Button } from '@/components/Button';
+import { WebApplication } from "@/ui_models/application";
+import { useState } from "preact/hooks";
+import { isDesktopApplication } from "@/utils";
 
-export const NoSubscription: FunctionalComponent = () => (
-  <>
-    <Text>You don't have a Standard Notes subscription yet.</Text>
-    <div className="flex">
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Refresh"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3"
-        type="primary"
-        label="Purchase subscription"
-        onClick={() => null}
-      />
-    </div>
-  </>
-);
+export const NoSubscription: FunctionalComponent<{
+  application: WebApplication;
+}> = ({ application }) => {
+  const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false);
+  const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined);
+
+  const onPurchaseClick = async () => {
+    const errorMessage = 'There was an error when attempting to redirect you to the subscription page.';
+    setIsLoadingPurchaseFlow(true);
+    try {
+      const url = await application.getPurchaseFlowUrl();
+      if (url) {
+        const currentUrl = window.location.href;
+        const successUrl = isDesktopApplication() ? `standardnotes://${currentUrl}` : currentUrl;
+        console.log(successUrl);
+        window.location.assign(`${url}&success_url=${successUrl}`);
+      } else {
+        setPurchaseFlowError(errorMessage);
+      }
+    } catch (e) {
+      setPurchaseFlowError(errorMessage);
+    } finally {
+      setIsLoadingPurchaseFlow(false);
+    }
+  };
+
+  return (
+    <>
+      <Text>You don't have a Standard Notes subscription yet.</Text>
+      {isLoadingPurchaseFlow && (
+        <Text>
+          Redirecting you to the subscription page...
+        </Text>
+      )}
+      {purchaseFlowError && (
+        <Text className="color-danger">
+          {purchaseFlowError}
+        </Text>
+      )}
+      <div className="flex">
+        <Button
+          className="min-w-20 mt-3 mr-3"
+          type="normal"
+          label="Refresh"
+          onClick={() => null}
+        />
+        <Button
+          className="min-w-20 mt-3"
+          type="primary"
+          label="Purchase subscription"
+          onClick={onPurchaseClick}
+        />
+      </div>
+    </>
+  );
+};

app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx

@@ -77,7 +77,7 @@ export const Subscription: FunctionComponent<Props> = observer(({
             ) : userSubscription && userSubscription.endsAt > now ? (
               <SubscriptionInformation subscriptionState={subscriptionState} />
             ) : (
-              <NoSubscription />
+              <NoSubscription application={application} />
             )}
           </div>
         </div>