Technical help section in homepage

.changeset/curvy-bikes-mate.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now see a new card in home page that can redirect you to Saleor solution engineers contact information if you need technical advice.

locale/defaultMessages.json

@@ -2965,6 +2965,10 @@
     "context": "staff member's account",
     "string": "Active"
   },
+  "HRXLYk": {
+    "context": "cta button label",
+    "string": "Get in touch"
+  },
   "HSmg1/": {
     "context": "gift cards section name",
     "string": "Gift Cards"
@@ -3243,6 +3247,10 @@
     "context": "link",
     "string": "View Orders"
   },
+  "J5R1SI": {
+    "context": "home get in touch card title",
+    "string": "Need technical help?"
+  },
   "J7mFhU": {
     "context": "currency code select",
     "string": "{code} - {countries}"
@@ -8717,6 +8725,10 @@
   "u0V06N": {
     "string": "Max. Order Weight"
   },
+  "u0hKaa": {
+    "context": "home get in touch card description",
+    "string": "Save hours of evaluating Saleor on your own by speaking with our solution engineer."
+  },
   "u24Ppd": {
     "string": "This attribute cannot be assigned to this product type"
   },

package.json

@@ -39,7 +39,7 @@
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
     "@saleor/macaw-ui": "npm:@saleor/[email protected]",
-    "@saleor/macaw-ui-next": "npm:@saleor/[email protected].10",
+    "@saleor/macaw-ui-next": "npm:@saleor/[email protected].11",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^8.21.0",
     "@sentry/vite-plugin": "^2.21.1",

src/home/components/HomePage/HomeGetInTouch.tsx

@@ -0,0 +1,53 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import { Button, HelpIcon, Text } from "@saleor/macaw-ui-next";
+import * as React from "react";
+import { FormattedMessage } from "react-intl";
+
+interface HomeGetInTouchCardProps {
+  externalHref: string;
+}
+
+export const HomeGetInTouchCard: React.FC<HomeGetInTouchCardProps> = ({ externalHref }) => (
+  <DashboardCard
+    backgroundColor="default2"
+    borderStyle="solid"
+    borderColor="default1"
+    borderRadius={4}
+    borderWidth={1}
+    margin={4}
+    display="flex"
+    flexDirection="column"
+    gap={4}
+  >
+    <DashboardCard.Header>
+      <DashboardCard.Title display="flex" alignItems="center" gap={3}>
+        <HelpIcon />
+        <FormattedMessage
+          defaultMessage="Need technical help?"
+          id="J5R1SI"
+          description="home get in touch card title"
+        />
+      </DashboardCard.Title>
+    </DashboardCard.Header>
+
+    <DashboardCard.Content>
+      <Text>
+        <FormattedMessage
+          defaultMessage="Save hours of evaluating Saleor on your own by speaking with our solution engineer."
+          id="u0hKaa"
+          description="home get in touch card description"
+        />
+      </Text>
+    </DashboardCard.Content>
+
+    <DashboardCard.BottomActions paddingTop={2}>
+      <Button as="a" target="_blank" href={externalHref} variant="secondary" alignSelf="start">
+        <FormattedMessage
+          defaultMessage="Get in touch"
+          id="HRXLYk"
+          description="cta button label"
+        />
+      </Button>
+    </DashboardCard.BottomActions>
+  </DashboardCard>
+);

src/home/components/HomePage/HomePage.tsx

@@ -11,14 +11,15 @@ import {
   Notifications,
   ProductTopToday,
 } from "@dashboard/home/types";
+import { TECHNICAL_HELP_CTA_URL } from "@dashboard/links";
 import { Box, Skeleton } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { HomeActivityCard } from "../HomeActivityCard";
 import { HomeAnalyticsCard } from "../HomeAnalyticsCard";
 import { HomeHeader } from "../HomeHeader";
 import { HomeProductList } from "../HomeProductList";
+import { HomePageRightSidebar } from "./HomePageRightSidebar";
 import { homePageMessages } from "./messages";
 
 export interface HomePageProps {
@@ -79,13 +80,8 @@ const HomePage: React.FC<HomePageProps> = props => {
           )}
         </Box>
       </DetailPageLayout.Content>
-      {activities && (
-        <DetailPageLayout.RightSidebar>
-          <RequirePermissions requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}>
-            <HomeActivityCard activities={activities} testId="activity-card" />
-          </RequirePermissions>
-        </DetailPageLayout.RightSidebar>
-      )}
+
+      <HomePageRightSidebar activities={activities} technicalHelpUrl={TECHNICAL_HELP_CTA_URL} />
     </DetailPageLayout>
   );
 };

src/home/components/HomePage/HomePageRightSidebar.tsx

@@ -0,0 +1,28 @@
+import { DetailPageLayout } from "@dashboard/components/Layouts";
+import RequirePermissions from "@dashboard/components/RequirePermissions";
+import { PermissionEnum } from "@dashboard/graphql";
+import { Activities, HomeData } from "@dashboard/home/types";
+import * as React from "react";
+
+import { HomeActivityCard } from "../HomeActivityCard";
+import { HomeGetInTouchCard } from "./HomeGetInTouch";
+
+export interface HomePageRightSidebarProps {
+  activities?: HomeData<Activities>;
+  technicalHelpUrl: string;
+}
+
+export const HomePageRightSidebar: React.FC<HomePageRightSidebarProps> = ({
+  technicalHelpUrl,
+  activities,
+}) => (
+  <DetailPageLayout.RightSidebar>
+    <HomeGetInTouchCard externalHref={technicalHelpUrl} />
+
+    {activities && (
+      <RequirePermissions requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}>
+        <HomeActivityCard activities={activities} testId="activity-card" />
+      </RequirePermissions>
+    )}
+  </DetailPageLayout.RightSidebar>
+);

src/links.ts

@@ -0,0 +1,2 @@
+export const TECHNICAL_HELP_CTA_URL =
+  "https://www.getclockwise.com/c/rian-dillon-saleor-io/short-call-with-saleor";