diff --git a/.changeset/eight-pants-shave.md b/.changeset/eight-pants-shave.md new file mode 100644 index 00000000000..8528a9688f2 --- /dev/null +++ b/.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. diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 8cf67d81405..c0bec843b62 100644 --- a/locale/defaultMessages.json +++ b/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" diff --git a/src/apps/components/AppListPage/AppListPage.tsx b/src/apps/components/AppListPage/AppListPage.tsx index 9492ca1f3a9..5b20a786662 100644 --- a/src/apps/components/AppListPage/AppListPage.tsx +++ b/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 = props => { window.open(githubForkUrl, "_blank"); }, []); + const showMissingAppsFooter = + !marketplaceError && verifiedInstallableMarketplaceApps && comingSoonMarketplaceApps; + return ( <> @@ -132,6 +136,7 @@ export const AppListPage: React.FC = props => { )} + {showMissingAppsFooter && } ); diff --git a/src/apps/components/AppListPage/MissingAppsFooter.tsx b/src/apps/components/AppListPage/MissingAppsFooter.tsx new file mode 100644 index 00000000000..c4d90237d7f --- /dev/null +++ b/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 ( + + + + {intl.formatMessage(messages.missingAppsHeader)} + + + {intl.formatMessage(messages.missingAppsDescription)} + + + + + ); +}; diff --git a/src/apps/components/AppListPage/messages.ts b/src/apps/components/AppListPage/messages.ts index e5ba8b9f7a9..be199f68ae6 100644 --- a/src/apps/components/AppListPage/messages.ts +++ b/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", + }, }); diff --git a/src/links.ts b/src/links.ts index 220e9c4e29c..943721383e6 100644 --- a/src/links.ts +++ b/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";