Add information about missing apps on the apps listing page (#5270)

* Apps footer

* Update margin

.changeset/eight-pants-shave.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Now the list app page shows footer that allows the user to sumbmit a demanded app.

locale/defaultMessages.json

@@ -3941,6 +3941,10 @@
     "context": "weight",
     "string": "{value} {unit}"
   },
+  "Ntk3CQ": {
+    "context": "footer title",
+    "string": "Missing something?"
+  },
   "Nv/toB": {
     "context": "button",
     "string": "Assign and save"
@@ -5138,6 +5142,10 @@
   "VkYZQ8": {
     "string": "Current Permissions"
   },
+  "VlDG1B": {
+    "context": "Request integration",
+    "string": "Request integration"
+  },
   "VmMDLN": {
     "context": "permission list item description",
     "string": "This group is last source of that permission"
@@ -7437,6 +7445,10 @@
     "context": "replacement created order history message description",
     "string": "was created for replaced products"
   },
+  "kyNv+Y": {
+    "context": "footer description",
+    "string": "Are we missing an integration your project requires? Let us know here"
+  },
   "l1/Hwb": {
     "context": "invalid date in expirydate field header",
     "string": "Incorrect date entered"

src/apps/components/AppListPage/AppListPage.tsx

@@ -13,6 +13,7 @@ import InstalledAppList from "../InstalledAppList";
 import { InstallWithManifestFormButton } from "../InstallWithManifestFormButton";
 import MarketplaceAlert from "../MarketplaceAlert";
 import { messages } from "./messages";
+import { MissingAppsFooter } from "./MissingAppsFooter";
 import { useStyles } from "./styles";
 import { AppListPageSections } from "./types";
 import {
@@ -64,6 +65,9 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
     window.open(githubForkUrl, "_blank");
   }, []);
 
+  const showMissingAppsFooter =
+    !marketplaceError && verifiedInstallableMarketplaceApps && comingSoonMarketplaceApps;
+
   return (
     <>
       <TopNav title={intl.formatMessage(sectionNames.apps)}>
@@ -132,6 +136,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
             </Box>
           )}
         </Box>
+        {showMissingAppsFooter && <MissingAppsFooter />}
       </Box>
     </>
   );

src/apps/components/AppListPage/MissingAppsFooter.tsx

@@ -0,0 +1,36 @@
+import { MISSING_APPS_TYPEFORM_URL } from "@dashboard/links";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { messages } from "./messages";
+
+const CONST_TYPEFORM_URL = `${MISSING_APPS_TYPEFORM_URL}?utm_button=${encodeURIComponent("Request integration")}`;
+
+export const MissingAppsFooter = () => {
+  const intl = useIntl();
+
+  return (
+    <Box>
+      <Box
+        height="100%"
+        width="100%"
+        display="flex"
+        alignItems="center"
+        justifyContent="flex-start"
+        flexDirection="column"
+        marginBottom={20}
+      >
+        <Text marginTop={5} as="h1" fontSize={11} fontWeight="regular" marginBottom={7}>
+          {intl.formatMessage(messages.missingAppsHeader)}
+        </Text>
+        <Text size={5} marginBottom={7}>
+          {intl.formatMessage(messages.missingAppsDescription)}
+        </Text>
+        <Button target="_blank" as="a" size="large" paddingX={10} href={CONST_TYPEFORM_URL}>
+          {intl.formatMessage(messages.missingAppsButton)}
+        </Button>
+      </Box>
+    </Box>
+  );
+};

src/apps/components/AppListPage/messages.ts

@@ -26,4 +26,19 @@ export const messages = defineMessages({
     defaultMessage: "Upcoming Apps",
     description: "section header",
   },
+  missingAppsHeader: {
+    id: "Ntk3CQ",
+    defaultMessage: "Missing something?",
+    description: "footer title",
+  },
+  missingAppsDescription: {
+    id: "kyNv+Y",
+    defaultMessage: "Are we missing an integration your project requires? Let us know here",
+    description: "footer description",
+  },
+  missingAppsButton: {
+    id: "VlDG1B",
+    defaultMessage: "Request integration",
+    description: "Request integration",
+  },
 });

src/links.ts

@@ -5,3 +5,5 @@ export const DOCS_ULRS = {
   TRANSACTIONS_AUTOMATIC_CHECKOUT_COMPLETION:
     "https://docs.saleor.io/developer/payments/transactions#automatic-checkout-completion",
 };
+
+export const MISSING_APPS_TYPEFORM_URL = "https://saleor.typeform.com/to/ecR2msLk";