From e8c953de25b9807935ebb8c9c0ef84d81aa2bd38 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 26 Feb 2025 13:03:55 +0200
Subject: [PATCH] docs: add new cards to recipe section (#11615)

---
 .../Homepage/RecipesSection/index.tsx         | 20 +++-
 www/apps/resources/generated/sidebar.mjs      |  2 +-
 www/apps/resources/sidebars/recipes.mjs       |  2 +-
 .../src/components/Icons/Erp/index.tsx        | 92 +++++++++++++++++++
 .../src/components/Icons/Restock/index.tsx    | 55 +++++++++++
 .../docs-ui/src/components/Icons/index.tsx    |  2 +
 6 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 www/packages/docs-ui/src/components/Icons/Erp/index.tsx
 create mode 100644 www/packages/docs-ui/src/components/Icons/Restock/index.tsx

diff --git a/www/apps/book/components/Homepage/RecipesSection/index.tsx b/www/apps/book/components/Homepage/RecipesSection/index.tsx
index 67be258bfc..bd77badf7e 100644
--- a/www/apps/book/components/Homepage/RecipesSection/index.tsx
+++ b/www/apps/book/components/Homepage/RecipesSection/index.tsx
@@ -4,19 +4,28 @@ import {
   Card,
   CardProps,
   ChefHatIcon,
+  ErpIcon,
   IconHeadline,
   ImageBinaryIcon,
   Link,
+  RestockIcon,
   ScrollTextIcon,
   ShopIcon,
 } from "docs-ui"
 
 const HomepageRecipesSection = () => {
   const cards: CardProps[] = [
+    {
+      type: "large",
+      title: "ERP",
+      text: "Integrate an ERP system to manage custom product prices, purchase rules, syncing orders, and more.",
+      href: "https://docs.medusajs.com/resources/recipes/erp",
+      icon: ErpIcon,
+    },
     {
       type: "large",
       title: "Marketplace",
-      text: "Build a marketplace with multiple vendors",
+      text: "Build a marketplace with multiple vendors.",
       href: "https://docs.medusajs.com/resources/recipes/marketplace/examples/vendors",
       icon: ShopIcon,
     },
@@ -30,7 +39,7 @@ const HomepageRecipesSection = () => {
     {
       type: "large",
       title: "Restaurant-Delivery",
-      text: "Build a restaurant marketplace inspired by UberEats, with real-time delivery handling",
+      text: "Build a restaurant marketplace inspired by UberEats, with real-time delivery handling.",
       href: "https://docs.medusajs.com/resources/recipes/marketplace/examples/restaurant-delivery",
       icon: ChefHatIcon,
     },
@@ -41,6 +50,13 @@ const HomepageRecipesSection = () => {
       href: "https://docs.medusajs.com/resources/recipes/digital-products/examples/standard",
       icon: ImageBinaryIcon,
     },
+    {
+      type: "large",
+      title: "Restock Notifications",
+      text: "Notify customers when a product is back in stock.",
+      href: "https://docs.medusajs.com/resources/recipes/commerce-automation/restock-notification",
+      icon: RestockIcon,
+    },
   ]
   return (
     <div className={clsx("py-4 w-full")}>
diff --git a/www/apps/resources/generated/sidebar.mjs b/www/apps/resources/generated/sidebar.mjs
index 5751386f32..1a249778c2 100644
--- a/www/apps/resources/generated/sidebar.mjs
+++ b/www/apps/resources/generated/sidebar.mjs
@@ -164,7 +164,7 @@ export const generatedSidebar = [
             "isPathHref": true,
             "type": "link",
             "path": "/recipes/erp/odoo",
-            "title": "Odoo Integration",
+            "title": "Example: Odoo Integration",
             "children": []
           }
         ]
diff --git a/www/apps/resources/sidebars/recipes.mjs b/www/apps/resources/sidebars/recipes.mjs
index aa43266647..db648a430b 100644
--- a/www/apps/resources/sidebars/recipes.mjs
+++ b/www/apps/resources/sidebars/recipes.mjs
@@ -49,7 +49,7 @@ export const recipesSidebar = [
       {
         type: "link",
         path: "/recipes/erp/odoo",
-        title: "Odoo Integration",
+        title: "Example: Odoo Integration",
       },
     ],
   },
diff --git a/www/packages/docs-ui/src/components/Icons/Erp/index.tsx b/www/packages/docs-ui/src/components/Icons/Erp/index.tsx
new file mode 100644
index 0000000000..7a2c9b2958
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/Erp/index.tsx
@@ -0,0 +1,92 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const ErpIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        opacity="0.3"
+        d="M15 13.6666C16.7182 13.6666 18.1111 12.2737 18.1111 10.5554C18.1111 8.83722 16.7182 7.44434 15 7.44434C13.2818 7.44434 11.8889 8.83722 11.8889 10.5554C11.8889 12.2737 13.2818 13.6666 15 13.6666Z"
+        fill="currentColor"
+      />
+      <path
+        opacity="0.3"
+        d="M15 27.889C16.4727 27.889 17.6666 26.695 17.6666 25.2223C17.6666 23.7496 16.4727 22.5557 15 22.5557C13.5272 22.5557 12.3333 23.7496 12.3333 25.2223C12.3333 26.695 13.5272 27.889 15 27.889Z"
+        fill="currentColor"
+      />
+      <path
+        opacity="0.3"
+        d="M4.77775 26.1112C6.25051 26.1112 7.44442 24.9172 7.44442 23.4445C7.44442 21.9718 6.25051 20.7778 4.77775 20.7778C3.30499 20.7778 2.11108 21.9718 2.11108 23.4445C2.11108 24.9172 3.30499 26.1112 4.77775 26.1112Z"
+        fill="currentColor"
+      />
+      <path
+        opacity="0.3"
+        d="M25.2222 26.1112C26.6949 26.1112 27.8889 24.9172 27.8889 23.4445C27.8889 21.9718 26.6949 20.7778 25.2222 20.7778C23.7495 20.7778 22.5555 21.9718 22.5555 23.4445C22.5555 24.9172 23.7495 26.1112 25.2222 26.1112Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15 13.6666C16.7182 13.6666 18.1111 12.2737 18.1111 10.5554C18.1111 8.83722 16.7182 7.44434 15 7.44434C13.2818 7.44434 11.8889 8.83722 11.8889 10.5554C11.8889 12.2737 13.2818 13.6666 15 13.6666Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 27.889C16.4727 27.889 17.6666 26.695 17.6666 25.2223C17.6666 23.7496 16.4727 22.5557 15 22.5557C13.5272 22.5557 12.3333 23.7496 12.3333 25.2223C12.3333 26.695 13.5272 27.889 15 27.889Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.77775 26.1112C6.25052 26.1112 7.44442 24.9172 7.44442 23.4445C7.44442 21.9718 6.25052 20.7778 4.77775 20.7778C3.30499 20.7778 2.11108 21.9718 2.11108 23.4445C2.11108 24.9172 3.30499 26.1112 4.77775 26.1112Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.55554 10.5555C6.55554 5.89242 10.3369 2.11108 15 2.11108C19.6631 2.11108 23.4444 5.89242 23.4444 10.5555"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.56088 14.4756L6.48444 15.7396C5.42488 16.3849 4.77777 17.5351 4.77777 18.776V20.7778"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M25.2222 26.1112C26.6949 26.1112 27.8889 24.9172 27.8889 23.4445C27.8889 21.9718 26.6949 20.7778 25.2222 20.7778C23.7495 20.7778 22.5555 21.9718 22.5555 23.4445C22.5555 24.9172 23.7495 26.1112 25.2222 26.1112Z"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21.4391 14.4756L23.5156 15.7396C24.5751 16.3849 25.2223 17.5351 25.2223 18.776V20.7778"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 18.1111V22.5555"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/Restock/index.tsx b/www/packages/docs-ui/src/components/Icons/Restock/index.tsx
new file mode 100644
index 0000000000..43b2bf3293
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/Restock/index.tsx
@@ -0,0 +1,55 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const RestockIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="26"
+      height="30"
+      viewBox="0 0 26 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        opacity="0.3"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.44447 7.33325H20.5556C22.5193 7.33325 24.1111 8.92513 24.1111 10.8888V21.5555C24.1111 22.6783 23.5906 23.6796 22.7778 24.3311V19.7777C22.7778 17.5686 20.9869 15.7777 18.7778 15.7777C16.5687 15.7777 14.7778 17.5686 14.7778 19.7777V24.6666C14.7778 24.8168 14.7862 24.9651 14.8022 25.111H5.44447C3.48079 25.111 1.88892 23.5192 1.88892 21.5555V10.8888C1.88892 8.92513 3.48079 7.33325 5.44447 7.33325Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13 2V12.6667"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.33337 9.17156L4.90937 3.97689C5.51026 2.76622 6.74404 2 8.09515 2H17.9049C19.256 2 20.4898 2.76622 21.0907 3.97689L23.6667 9.17333"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M23.2222 23.8844C23.768 23.2586 24.1111 22.4515 24.1111 21.5555V10.8888C24.1111 8.92614 22.52 7.33325 20.5556 7.33325H5.44447C3.48003 7.33325 1.88892 8.92614 1.88892 10.8888V21.5555C1.88892 23.5181 3.48003 25.111 5.44447 25.111H14.3334"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.7778 24.6667V19.7778"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.7778 29.9999C19.5141 29.9999 20.1111 29.4029 20.1111 28.6666C20.1111 27.9302 19.5141 27.3333 18.7778 27.3333C18.0414 27.3333 17.4445 27.9302 17.4445 28.6666C17.4445 29.4029 18.0414 29.9999 18.7778 29.9999Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/Icons/index.tsx b/www/packages/docs-ui/src/components/Icons/index.tsx
index d33254ed11..a4e85a5d8d 100644
--- a/www/packages/docs-ui/src/components/Icons/index.tsx
+++ b/www/packages/docs-ui/src/components/Icons/index.tsx
@@ -3,9 +3,11 @@ export * from "./CalendarRefresh"
 export * from "./ChefHat"
 export * from "./CircleDottedLine"
 export * from "./DecisionProcess"
+export * from "./Erp"
 export * from "./ImageBinary"
 export * from "./PuzzleColored"
 export * from "./QuestionMark"
+export * from "./Restock"
 export * from "./ScrollText"
 export * from "./ShadedBg"
 export * from "./Shop"