Home page information tiles (#5271)

* feature: add information tiles to new homepage

* i18n

* adjust border radius

* adjust gap, padding and margin of the tile container

.changeset/swift-fans-warn.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now see information tiles regarding Saleor Docs, community, and technical help in the home page.

locale/defaultMessages.json

@@ -228,6 +228,9 @@
   "/Fa+RP": {
     "string": "Couldn't load top products"
   },
+  "/H9LeU": {
+    "string": "Explore Saleor App Store"
+  },
   "/ILyIf": {
     "context": "tax classes menu header",
     "string": "Tax class label"
@@ -2189,6 +2192,9 @@
   "CZmloB": {
     "string": "Fulfillment successfully updated"
   },
+  "Cc3Z40": {
+    "string": "Learn Saleor checkout process flow"
+  },
   "CcEwXH": {
     "context": "dialog header",
     "string": "Delete Page Types"
@@ -2716,6 +2722,9 @@
   "FuAV5G": {
     "string": "This name is already taken. Please provide another."
   },
+  "FvmV6q": {
+    "string": "Discord"
+  },
   "Fvvgoi": {
     "string": "Your session has expired. Please log in again to continue."
   },
@@ -4487,6 +4496,12 @@
     "context": "OrderCustomer Fulfillment from All Warehouses",
     "string": "Fulfill from All Warehouses"
   },
+  "RABrGb": {
+    "string": "Save hours of evaluating Saleor on your own by speaking with our solution engineer."
+  },
+  "RBkNPr": {
+    "string": "Full coverage of advanced checkout cases like split payments, split fulfillments, and orchestrated payments."
+  },
   "RBxYJf": {
     "context": "sale status",
     "string": "Expired"
@@ -4905,6 +4920,9 @@
     "context": "PageTypeDeleteWarningDialog with items multiple description",
     "string": "You are about to delete multiple page types. Some of them are assigned to pages. Deleting those page types will also delete those pages"
   },
+  "Tp5T7U": {
+    "string": "Join our OS community of industry experts and learn more about open source at Saleor."
+  },
   "TpPx7V": {
     "context": "navigator placeholder",
     "string": "Search Customer"
@@ -5364,6 +5382,9 @@
     "context": "helper text",
     "string": "All items refunded"
   },
+  "Wk00wL": {
+    "string": "Join the open source community"
+  },
   "WkxE8/": {
     "context": "percentage or fixed, header",
     "string": "Discount Type"
@@ -5518,6 +5539,9 @@
     "context": "section header",
     "string": "All Media"
   },
+  "XVQpjm": {
+    "string": "Add new functionalities on top of Saleor and integrate it with third-party services. They can be installed, managed, and rendered in here in Saleor Dashboard."
+  },
   "XVuPMw": {
     "string": "Are you sure you want to delete this rule?"
   },
@@ -5879,6 +5903,10 @@
   "Zz67wc": {
     "string": "View and update your webhooks and events."
   },
+  "a+WuZg": {
+    "context": "cta button label",
+    "string": "View Documentation"
+  },
   "a+iRI1": {
     "context": "single gift card title",
     "string": "{selectedItemsCount,plural,one{Delete Gift Card} other{Delete Gift Cards}}"
@@ -6789,6 +6817,9 @@
     "context": "swatch attribute",
     "string": "Swatch"
   },
+  "g9HrbF": {
+    "string": "Need technical help?"
+  },
   "g9Mb+U": {
     "context": "change warehouse dialog title",
     "string": "Change warehouse"
@@ -8649,6 +8680,9 @@
     "context": "variant pricing section subtitle",
     "string": "There is no channel to define prices for. You need to first add variant to channels to define prices."
   },
+  "swOKYO": {
+    "string": "Discover the latest enhancements, new features, fixes, and performance improvements that make your dashboard experience even better."
+  },
   "szXISP": {
     "context": "permission group name",
     "string": "Permission Group Name"
@@ -9196,6 +9230,9 @@
   "wNQzS/": {
     "string": "The primary address of this customer."
   },
+  "wO9wb5": {
+    "string": "GitHub"
+  },
   "wOeIR4": {
     "context": "order history message",
     "string": "Restocked {quantity} items"
@@ -9581,6 +9618,9 @@
   "z9c6/C": {
     "string": "Deprecated"
   },
+  "z9f2oQ": {
+    "string": "Recent Dashboard Updates"
+  },
   "z9wQ/U": {
     "context": "no variant stock in warehouse",
     "string": "No Stock"
@@ -9696,6 +9736,10 @@
     "context": "product available for purchase date",
     "string": "Will become available on {date}"
   },
+  "zp9VHt": {
+    "context": "cta button label",
+    "string": "Explore Updates"
+  },
   "zqarUF": {
     "context": "modal information under title",
     "string": "Select an address you want to use from the list below"

src/newHome/HomePage.tsx

@@ -6,6 +6,7 @@ import { PermissionEnum } from "@dashboard/graphql";
 import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 
+import { HomeTilesContainer } from "./homeInfoTiles/TilesContainer";
 import HomeOnboarding from "./homeOnboarding/HomeOnboarding";
 import { HomeSidebar } from "./HomeSidebar";
 import { HomeTitle } from "./HomeTitle";
@@ -25,6 +26,7 @@ export const HomePage = () => {
       <DetailPageLayout.Content marginTop={6} paddingLeft={8}>
         <HomeTitle />
         <HomeOnboarding />
+        <HomeTilesContainer />
       </DetailPageLayout.Content>
       <DetailPageLayout.RightSidebar borderLeftStyle="none">
         <HomeSidebar

src/newHome/homeInfoTiles/HomeInfoTile.tsx

@@ -0,0 +1,36 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import * as React from "react";
+
+export type InfoTile = {
+  id: string;
+  header: React.ReactNode;
+  content: React.ReactNode;
+  bottomActions: React.ReactNode;
+};
+
+export const HomeInfoTile: React.FC<InfoTile> = ({ id, bottomActions, content, header }) => (
+  <DashboardCard
+    backgroundColor="default1"
+    borderStyle="solid"
+    borderColor="default1"
+    borderRadius={3}
+    borderWidth={1}
+    display="flex"
+    flexDirection="column"
+    gap={4}
+    key={id}
+    margin={0}
+  >
+    <DashboardCard.Header>
+      <DashboardCard.Title display="flex" alignItems="center" gap={3}>
+        {header}
+      </DashboardCard.Title>
+    </DashboardCard.Header>
+
+    <DashboardCard.Content>{content}</DashboardCard.Content>
+
+    <DashboardCard.BottomActions paddingTop={2} marginTop="auto">
+      {bottomActions}
+    </DashboardCard.BottomActions>
+  </DashboardCard>
+);

src/newHome/homeInfoTiles/TilesContainer.tsx

@@ -0,0 +1,29 @@
+import { Box } from "@saleor/macaw-ui-next";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { HomeInfoTile } from "./HomeInfoTile";
+import { getTilesData } from "./tileData";
+
+export const HomeTilesContainer: React.FC = () => {
+  const intl = useIntl();
+
+  const tiles = getTilesData({ intl });
+
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={{
+        mobile: 1,
+        desktop: 2,
+      }}
+      gap={6}
+      marginTop={6}
+      marginRight={6}
+    >
+      {tiles.map(tile => (
+        <HomeInfoTile key={tile.id} {...tile} />
+      ))}
+    </Box>
+  );
+};

src/newHome/homeInfoTiles/links.ts

@@ -0,0 +1,7 @@
+export const SALEOR_GITHUB_URL = "https://github.com/saleor/saleor";
+export const SALEOR_DISCORD_URL = "https://discord.com/invite/H52JTZAtSH";
+export const TECHNICAL_HELP_CTA_URL =
+  "https://www.getclockwise.com/c/rian-dillon-saleor-io/short-call-with-saleor";
+export const APPS_DOCS_URL = "https://docs.saleor.io/developer/extending/apps/overview";
+export const CHECKOUT_DOCS_URL = "https://docs.saleor.io/developer/checkout/overview#introduction";
+export const DASHBOARD_DOCS_URL = "https://github.com/saleor/saleor-dashboard/releases";