Change Vercel deployment button to fork on github button (#3119)

* Change vercel deployment button to fork on github button

* Extract translations

locale/defaultMessages.json

@@ -6771,10 +6771,6 @@
   "oYGfnY": {
     "string": "ZIP / Postal code"
   },
-  "ohQrzn": {
-    "context": "button",
-    "string": "Deploy to Vercel"
-  },
   "oiuwOl": {
     "context": "button",
     "string": "Assign"
@@ -8176,6 +8172,10 @@
     "context": "header",
     "string": "Translation Sale \"{saleName}\" - {languageCode}"
   },
+  "zmnGkp": {
+    "context": "button",
+    "string": "Fork on GitHub"
+  },
   "znbVYT": {
     "context": "product available for purchase date",
     "string": "Will become available on {date}"

src/new-apps/components/AllAppList/AllAppList.tsx

@@ -11,14 +11,14 @@ interface AllAppListProps {
   appList?: GetV2SaleorAppsResponse.SaleorApp[];
   appInstallationList?: AppInstallationFragment[];
   navigateToAppInstallPage?: (manifestUrl: string) => void;
-  navigateToVercelDeploymentPage?: (vercelDeploymentUrl: string) => void;
+  navigateToGithubForkPage?: (githubForkUrl: string) => void;
 }
 
 const AllAppList: React.FC<AllAppListProps> = ({
   appList,
   appInstallationList,
   navigateToAppInstallPage,
-  navigateToVercelDeploymentPage,
+  navigateToGithubForkPage,
 }) => {
   const classes = useStyles();
 
@@ -37,7 +37,7 @@ const AllAppList: React.FC<AllAppListProps> = ({
             appInstallationList,
           )}
           navigateToAppInstallPage={navigateToAppInstallPage}
-          navigateToVercelDeploymentPage={navigateToVercelDeploymentPage}
+          navigateToGithubForkPage={navigateToGithubForkPage}
         />
       ))}
     </div>

src/new-apps/components/AppListCard/AppListCard.test.tsx

@@ -64,14 +64,14 @@ describe("Apps AppListCard", () => {
         <AppListCard
           app={releasedApp}
           navigateToAppInstallPage={navigateToAppInstallPage}
-          navigateToVercelDeploymentPage={navigateToVercelDeploymentPage}
+          navigateToGithubForkPage={navigateToVercelDeploymentPage}
         />
       </Wrapper>,
     );
     const user = userEvent.setup();
     const installButton = screen.getByTestId("app-install-button");
     const deployToVercelButton = screen.getByTestId(
-      "app-deploy-to-vercel-button",
+      "app-fork-on-github-button",
     );
 
     // Act

src/new-apps/components/AppListCard/AppListCard.tsx

@@ -16,14 +16,14 @@ interface AppListCardProps {
   app: GetV2SaleorAppsResponse.SaleorApp;
   appInstallation?: AppInstallationFragment;
   navigateToAppInstallPage?: (manifestUrl: string) => void;
-  navigateToVercelDeploymentPage?: (vercelDeploymentUrl: string) => void;
+  navigateToGithubForkPage?: (githubForkUrl: string) => void;
 }
 
 const AppListCard: React.FC<AppListCardProps> = ({
   app,
   appInstallation,
   navigateToAppInstallPage,
-  navigateToVercelDeploymentPage,
+  navigateToGithubForkPage,
 }) => {
   const classes = useStyles();
   const intl = useIntl();
@@ -34,7 +34,7 @@ const AppListCard: React.FC<AppListCardProps> = ({
     app,
     appInstallation,
     navigateToAppInstallPage,
-    navigateToVercelDeploymentPage,
+    navigateToGithubForkPage,
     retryAppInstallation,
     removeAppInstallation,
   });
@@ -51,7 +51,7 @@ const AppListCard: React.FC<AppListCardProps> = ({
           releaseDate={details.releaseDate}
           installationPending={details.installationPending}
           installHandler={details.installHandler}
-          vercelDeployHandler={details.vercelDeployHandler}
+          githubForkHandler={details.githubForkHandler}
           retryInstallHandler={details.retryInstallHandler}
           removeInstallHandler={details.removeInstallHandler}
         />

src/new-apps/components/AppListCard/AppListCardActions.tsx

@@ -16,7 +16,7 @@ interface AppListCardActionsProps {
   installationPending?: boolean;
   appInstallation?: AppInstallationFragment;
   installHandler?: () => void;
-  vercelDeployHandler?: () => void;
+  githubForkHandler?: () => void;
   retryInstallHandler?: () => void;
   removeInstallHandler?: () => void;
 }
@@ -26,7 +26,7 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
   installationPending = false,
   appInstallation,
   installHandler,
-  vercelDeployHandler,
+  githubForkHandler,
   retryInstallHandler,
   removeInstallHandler,
 }) => {
@@ -34,7 +34,7 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
 
   if (
     !installHandler &&
-    !vercelDeployHandler &&
+    !githubForkHandler &&
     !releaseDate &&
     !retryInstallHandler &&
     !removeInstallHandler &&
@@ -47,13 +47,13 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
     <>
       <Hr />
       <CardActions className={classes.cardActions}>
-        {vercelDeployHandler && (
+        {githubForkHandler && (
           <Button
             variant="secondary"
-            onClick={vercelDeployHandler}
+            onClick={githubForkHandler}
-            data-test-id="app-deploy-to-vercel-button"
+            data-test-id="app-fork-on-github-button"
           >
-            <FormattedMessage {...messages.deployToVercel} />
+            <FormattedMessage {...messages.forkOnGithub} />
           </Button>
         )}
         {installHandler && (

src/new-apps/components/AppListCard/messages.ts

@@ -6,9 +6,9 @@ export const messages = defineMessages({
     defaultMessage: "Integrations",
     description: "header",
   },
-  deployToVercel: {
+  forkOnGithub: {
-    id: "ohQrzn",
+    id: "zmnGkp",
-    defaultMessage: "Deploy to Vercel",
+    defaultMessage: "Fork on GitHub",
     description: "button",
   },
   releaseComingSoon: {

src/new-apps/components/AppListPage/AppListPage.tsx

@@ -67,12 +67,9 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
     [navigate],
   );
 
-  const navigateToVercelDeploymentPage = useCallback(
+  const navigateToGithubForkPage = useCallback((githubForkUrl: string) => {
-    (vercelDeploymentUrl: string) => {
+    window.open(githubForkUrl, "_blank");
-      window.open(vercelDeploymentUrl, "_blank");
+  }, []);
-    },
-    [],
-  );
 
   return (
     <Container>
@@ -110,7 +107,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
               appList={verifiedInstallableMarketplaceApps}
               appInstallationList={appsInstallations}
               navigateToAppInstallPage={navigateToAppInstallPage}
-              navigateToVercelDeploymentPage={navigateToVercelDeploymentPage}
+              navigateToGithubForkPage={navigateToGithubForkPage}
             />
           </>
         )}

src/new-apps/components/AppListPage/utils.test.ts

@@ -9,6 +9,7 @@ import {
   installedAppsList,
   releasedApp,
 } from "@dashboard/new-apps/fixtures";
+import { GetV2SaleorAppsResponse } from "@dashboard/new-apps/marketplace.types";
 
 import { AppListPageSections } from "./types";
 import {
@@ -210,26 +211,27 @@ describe("App List verified installed apps util", () => {
         ],
       },
     ];
-    const installableMarketplaceApps = [
+    const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
-      {
+      [
-        name: {
+        {
-          en: "Test app",
+          name: {
+            en: "Test app",
+          },
+          description: {
+            en: "Test app description",
+          },
+          logo: {
+            source: "https://www.example.com/logo",
+            color: "#000000",
+          },
+          integrations: [],
+          manifestUrl: "https://www.example.com/manifest",
+          privacyUrl: "https://www.example.com/privacy",
+          supportUrl: "https://www.example.com/support",
+          repositoryUrl: "https://www.example.com/repository",
+          githubForkUrl: "https://www.example.com/repository/fork",
         },
-        description: {
+      ];
-          en: "Test app description",
-        },
-        logo: {
-          source: "https://www.example.com/logo",
-          color: "#000000",
-        },
-        integrations: [],
-        manifestUrl: "https://www.example.com/manifest",
-        privacyUrl: "https://www.example.com/privacy",
-        supportUrl: "https://www.example.com/support",
-        repositoryUrl: "https://www.example.com/repository",
-        vercelDeploymentUrl: "https://www.example.com/deployment",
-      },
-    ];
 
     // Act
     const verifiedInstalledApps = getVerifiedInstalledApps(
@@ -301,44 +303,45 @@ describe("App List verified installable marketplace apps util", () => {
         ],
       },
     ];
-    const installableMarketplaceApps = [
+    const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
-      {
+      [
-        name: {
+        {
-          en: "Test app",
+          name: {
+            en: "Test app",
+          },
+          description: {
+            en: "Test app description",
+          },
+          logo: {
+            source: "https://www.example.com/logo",
+            color: "#000000",
+          },
+          integrations: [],
+          manifestUrl: "https://www.example.com/manifest",
+          privacyUrl: "https://www.example.com/privacy",
+          supportUrl: "https://www.example.com/support",
+          repositoryUrl: "https://www.example.com/repository",
+          githubForkUrl: "https://www.example.com/repository/fork",
         },
-        description: {
+        {
-          en: "Test app description",
+          name: {
+            en: "Test app",
+          },
+          description: {
+            en: "Test app description",
+          },
+          logo: {
+            source: "https://www.example-2.com/logo",
+            color: "#000000",
+          },
+          integrations: [],
+          manifestUrl: "https://www.example-2.com/manifest",
+          privacyUrl: "https://www.example-2.com/privacy",
+          supportUrl: "https://www.example-2.com/support",
+          repositoryUrl: "https://www.example-2.com/repository",
+          githubForkUrl: "https://www.example-2.com/repository/fork",
         },
-        logo: {
+      ];
-          source: "https://www.example.com/logo",
-          color: "#000000",
-        },
-        integrations: [],
-        manifestUrl: "https://www.example.com/manifest",
-        privacyUrl: "https://www.example.com/privacy",
-        supportUrl: "https://www.example.com/support",
-        repositoryUrl: "https://www.example.com/repository",
-        vercelDeploymentUrl: "https://www.example.com/deployment",
-      },
-      {
-        name: {
-          en: "Test app",
-        },
-        description: {
-          en: "Test app description",
-        },
-        logo: {
-          source: "https://www.example-2.com/logo",
-          color: "#000000",
-        },
-        integrations: [],
-        manifestUrl: "https://www.example-2.com/manifest",
-        privacyUrl: "https://www.example-2.com/privacy",
-        supportUrl: "https://www.example-2.com/support",
-        repositoryUrl: "https://www.example-2.com/repository",
-        vercelDeploymentUrl: "https://www.example-2.com/deployment",
-      },
-    ];
 
     // Act
     const verifiedInstallableMarketplaceApps =

src/new-apps/fixtures.ts

@@ -130,7 +130,7 @@ export const releasedApp: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
   privacyUrl: "https://www.released-example.com/privacy",
   supportUrl: "https://www.released-example.com/support",
   repositoryUrl: "https://www.released-example.com/repository",
-  vercelDeploymentUrl: "https://www.released-example.com/deployment",
+  githubForkUrl: "https://www.released-example.com/repository/fork",
   integrations: [
     {
       name: "First released integration",

src/new-apps/marketplace.types.ts

@@ -29,7 +29,7 @@ export namespace GetV2SaleorAppsResponse {
     supportUrl: string;
     privacyUrl: string;
     manifestUrl: string;
-    vercelDeploymentUrl?: string;
+    githubForkUrl?: string;
   };
 
   export type ComingSoonSaleorApp = SaleorAppBase & {

src/new-apps/utils.test.ts

@@ -26,7 +26,7 @@ describe("App utils app details", () => {
       privacyUrl: "https://www.example.com/privacy",
       supportUrl: "https://www.example.com/support",
       repositoryUrl: "https://www.example.com/repository",
-      vercelDeploymentUrl: "https://www.example.com/deployment",
+      githubForkUrl: "https://www.example.com/repository/fork",
     };
 
     // Act
@@ -35,7 +35,7 @@ describe("App utils app details", () => {
       app,
       appInstallation: undefined,
       navigateToAppInstallPage: () => undefined,
-      navigateToVercelDeploymentPage: () => undefined,
+      navigateToGithubForkPage: () => undefined,
       removeAppInstallation: () => undefined,
       retryAppInstallation: () => undefined,
     });
@@ -44,7 +44,7 @@ describe("App utils app details", () => {
     const expectedDetails: AppDetails = {
       releaseDate: undefined,
       installHandler: expect.any(Function),
-      vercelDeployHandler: expect.any(Function),
+      githubForkHandler: expect.any(Function),
       installationPending: undefined,
       removeInstallHandler: undefined,
       retryInstallHandler: undefined,
@@ -89,7 +89,7 @@ describe("App utils app details", () => {
       app,
       appInstallation: undefined,
       navigateToAppInstallPage: () => undefined,
-      navigateToVercelDeploymentPage: () => undefined,
+      navigateToGithubForkPage: () => undefined,
       removeAppInstallation: () => undefined,
       retryAppInstallation: () => undefined,
     });
@@ -98,7 +98,7 @@ describe("App utils app details", () => {
     const expectedDetails: AppDetails = {
       releaseDate: "2019-12-16",
       installHandler: undefined,
-      vercelDeployHandler: undefined,
+      githubForkHandler: undefined,
       links: [],
       installationPending: undefined,
       removeInstallHandler: undefined,
@@ -125,7 +125,7 @@ describe("App utils app details", () => {
       privacyUrl: "https://www.example.com/privacy",
       supportUrl: "https://www.example.com/support",
       repositoryUrl: "https://www.example.com/repository",
-      vercelDeploymentUrl: "https://www.example.com/deployment",
+      githubForkUrl: "https://www.example.com/repository/fork",
     };
     const appInstallation: AppInstallationFragment = {
       __typename: "AppInstallation",
@@ -142,7 +142,7 @@ describe("App utils app details", () => {
       app,
       appInstallation,
       navigateToAppInstallPage: () => undefined,
-      navigateToVercelDeploymentPage: () => undefined,
+      navigateToGithubForkPage: () => undefined,
       removeAppInstallation: () => undefined,
       retryAppInstallation: () => undefined,
     });
@@ -151,7 +151,7 @@ describe("App utils app details", () => {
     const expectedDetails: AppDetails = {
       releaseDate: undefined,
       installHandler: undefined,
-      vercelDeployHandler: undefined,
+      githubForkHandler: undefined,
       links: [
         {
           name: expect.any(String),
@@ -191,7 +191,7 @@ describe("App utils app details", () => {
       privacyUrl: "https://www.example.com/privacy",
       supportUrl: "https://www.example.com/support",
       repositoryUrl: "https://www.example.com/repository",
-      vercelDeploymentUrl: "https://www.example.com/deployment",
+      githubForkUrl: "https://www.example.com/repository/fork",
     };
     const appInstallation: AppInstallationFragment = {
       __typename: "AppInstallation",
@@ -208,7 +208,7 @@ describe("App utils app details", () => {
       app,
       appInstallation,
       navigateToAppInstallPage: () => undefined,
-      navigateToVercelDeploymentPage: () => undefined,
+      navigateToGithubForkPage: () => undefined,
       removeAppInstallation: () => undefined,
       retryAppInstallation: () => undefined,
     });
@@ -217,7 +217,7 @@ describe("App utils app details", () => {
     const expectedDetails: AppDetails = {
       releaseDate: undefined,
       installHandler: undefined,
-      vercelDeployHandler: undefined,
+      githubForkHandler: undefined,
       links: [
         {
           name: expect.any(String),

src/new-apps/utils.ts

@@ -10,7 +10,7 @@ const getInstallableMarketplaceApps = (
   marketplaceAppList?: GetV2SaleorAppsResponse.SaleorApp[],
 ) =>
   marketplaceAppList?.filter(
-    app => "manifestUrl" in app || "vercelDeploymentUrl" in app,
+    app => "manifestUrl" in app || "githubForkUrl" in app,
   ) as GetV2SaleorAppsResponse.ReleasedSaleorApp[] | undefined;
 
 const getComingSoonMarketplaceApps = (
@@ -19,7 +19,7 @@ const getComingSoonMarketplaceApps = (
   marketplaceAppList?.filter(
     app =>
       !("manifestUrl" in app) &&
-      !("vercelDeploymentUrl" in app) &&
+      !("githubForkUrl" in app) &&
       "releaseDate" in app,
   ) as GetV2SaleorAppsResponse.ComingSoonSaleorApp[] | undefined;
 
@@ -92,7 +92,7 @@ interface GetAppDetailsOpts {
   app: GetV2SaleorAppsResponse.SaleorApp;
   appInstallation?: AppInstallationFragment;
   navigateToAppInstallPage?: (url: string) => void;
-  navigateToVercelDeploymentPage?: (url?: string) => void;
+  navigateToGithubForkPage?: (url?: string) => void;
   retryAppInstallation: (installationId: string) => void;
   removeAppInstallation: (installationId: string) => void;
 }
@@ -102,17 +102,15 @@ export const getAppDetails = ({
   app,
   appInstallation,
   navigateToAppInstallPage,
-  navigateToVercelDeploymentPage,
+  navigateToGithubForkPage,
   retryAppInstallation,
   removeAppInstallation,
 }: GetAppDetailsOpts) => {
-  const isAppComingSoon =
+  const isAppComingSoon = !("manifestUrl" in app);
-    !("manifestUrl" in app) &&
+
-    !("vercelDeploymentUrl" in app) &&
-    "releaseDate" in app;
   const isAppInstallable = "manifestUrl" in app && !!navigateToAppInstallPage;
-  const isAppVercelDeployable =
+  const isAppForkableOnGithub =
-    "vercelDeploymentUrl" in app && !!navigateToVercelDeploymentPage;
+    "githubForkUrl" in app && !!navigateToGithubForkPage;
   const installationPending =
     appInstallation && appInstallation.status === JobStatusEnum.PENDING;
 
@@ -123,9 +121,9 @@ export const getAppDetails = ({
       !appInstallation && isAppInstallable
         ? () => navigateToAppInstallPage(app.manifestUrl)
         : undefined,
-    vercelDeployHandler:
+    githubForkHandler:
-      !appInstallation && isAppVercelDeployable && !!app.vercelDeploymentUrl
+      !appInstallation && isAppForkableOnGithub && !!app.githubForkUrl
-        ? () => navigateToVercelDeploymentPage(app.vercelDeploymentUrl)
+        ? () => navigateToGithubForkPage(app.githubForkUrl)
         : undefined,
     installationPending,
     retryInstallHandler: