From 53f60aaa6506bb2cd802a904ef34167cd69649b4 Mon Sep 17 00:00:00 2001
From: fPolic <mainacc.polic@gmail.com>
Date: Thu, 9 Jan 2025 09:35:12 +0100
Subject: [PATCH] feat: product details sidebar, refactor sidebar link

---
 .../components/common/sidebar-link/indext.ts  |  1 +
 .../common/sidebar-link/sidebar-link.tsx      | 47 ++++++++++++++++
 .../src/i18n/translations/$schema.json        | 13 +++++
 .../dashboard/src/i18n/translations/en.json   |  3 ++
 .../locations/location-list/location-list.tsx | 42 +--------------
 .../product-organization-section.tsx          |  2 +
 .../product-shipping-profile-section/index.ts |  1 +
 .../product-shipping-profile-section.tsx      | 53 +++++++++++++++++++
 .../product-detail/product-detail.tsx         |  2 +
 9 files changed, 123 insertions(+), 41 deletions(-)
 create mode 100644 packages/admin/dashboard/src/components/common/sidebar-link/indext.ts
 create mode 100644 packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx
 create mode 100644 packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/index.ts
 create mode 100644 packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/product-shipping-profile-section.tsx

diff --git a/packages/admin/dashboard/src/components/common/sidebar-link/indext.ts b/packages/admin/dashboard/src/components/common/sidebar-link/indext.ts
new file mode 100644
index 0000000000000..e5d1811287e4d
--- /dev/null
+++ b/packages/admin/dashboard/src/components/common/sidebar-link/indext.ts
@@ -0,0 +1 @@
+export * from "./sidebar-link"
diff --git a/packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx b/packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx
new file mode 100644
index 0000000000000..cb2f9ffba6f2f
--- /dev/null
+++ b/packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx
@@ -0,0 +1,47 @@
+import { ReactNode } from "react"
+import { Link } from "react-router-dom"
+
+import { IconAvatar } from "../icon-avatar"
+import { Text } from "@medusajs/ui"
+import { TriangleRightMini } from "@medusajs/icons"
+
+export interface SidebarLinkProps {
+  to: string
+  labelKey: string
+  descriptionKey: string
+  icon: ReactNode
+}
+
+export const SidebarLink = ({
+  to,
+  labelKey,
+  descriptionKey,
+  icon,
+}: SidebarLinkProps) => {
+  return (
+    <Link to={to} className="group outline-none">
+      <div className="flex flex-col gap-2 px-2 pb-2">
+        <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2">
+          <div className="flex items-center gap-4">
+            <IconAvatar>{icon}</IconAvatar>
+            <div className="flex flex-1 flex-col">
+              <Text size="small" leading="compact" weight="plus">
+                {labelKey}
+              </Text>
+              <Text
+                size="small"
+                leading="compact"
+                className="text-ui-fg-subtle"
+              >
+                {descriptionKey}
+              </Text>
+            </div>
+            <div className="flex size-7 items-center justify-center">
+              <TriangleRightMini className="text-ui-fg-muted" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
diff --git a/packages/admin/dashboard/src/i18n/translations/$schema.json b/packages/admin/dashboard/src/i18n/translations/$schema.json
index fe647e7469d96..45598156ad6d8 100644
--- a/packages/admin/dashboard/src/i18n/translations/$schema.json
+++ b/packages/admin/dashboard/src/i18n/translations/$schema.json
@@ -2666,6 +2666,18 @@
           ],
           "additionalProperties": false
         },
+        "shippingProfile": {
+          "type": "object",
+          "properties": {
+            "header": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "header"
+          ],
+          "additionalProperties": false
+        },
         "toasts": {
           "type": "object",
           "properties": {
@@ -2738,6 +2750,7 @@
         "variant",
         "options",
         "organization",
+        "shippingProfile",
         "toasts"
       ],
       "additionalProperties": false
diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json
index b12d95003e1d4..eb7dd482ed96b 100644
--- a/packages/admin/dashboard/src/i18n/translations/en.json
+++ b/packages/admin/dashboard/src/i18n/translations/en.json
@@ -649,6 +649,9 @@
         }
       }
     },
+    "shippingProfile": {
+      "header": "Shipping configuration"
+    },
     "toasts": {
       "delete": {
         "success": {
diff --git a/packages/admin/dashboard/src/routes/locations/location-list/location-list.tsx b/packages/admin/dashboard/src/routes/locations/location-list/location-list.tsx
index e95b0bca3f2d7..1f99f9241b39c 100644
--- a/packages/admin/dashboard/src/routes/locations/location-list/location-list.tsx
+++ b/packages/admin/dashboard/src/routes/locations/location-list/location-list.tsx
@@ -13,6 +13,7 @@ import { IconAvatar } from "../../../components/common/icon-avatar"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useDashboardExtension } from "../../../extensions"
 import { LocationListHeader } from "./components/location-list-header"
+import { SidebarLink } from "../../../components/common/sidebar-link/sidebar-link"
 
 export function LocationList() {
   const initialData = useLoaderData() as Awaited<
@@ -61,47 +62,6 @@ export function LocationList() {
   )
 }
 
-interface SidebarLinkProps {
-  to: string
-  labelKey: string
-  descriptionKey: string
-  icon: ReactNode
-}
-
-const SidebarLink = ({
-  to,
-  labelKey,
-  descriptionKey,
-  icon,
-}: SidebarLinkProps) => {
-  return (
-    <Link to={to} className="group outline-none">
-      <div className="flex flex-col gap-2 px-2 pb-2">
-        <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2">
-          <div className="flex items-center gap-4">
-            <IconAvatar>{icon}</IconAvatar>
-            <div className="flex flex-1 flex-col">
-              <Text size="small" leading="compact" weight="plus">
-                {labelKey}
-              </Text>
-              <Text
-                size="small"
-                leading="compact"
-                className="text-ui-fg-subtle"
-              >
-                {descriptionKey}
-              </Text>
-            </div>
-            <div className="flex size-7 items-center justify-center">
-              <TriangleRightMini className="text-ui-fg-muted" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Link>
-  )
-}
-
 const LinksSection = () => {
   const { t } = useTranslation()
 
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/components/product-organization-section/product-organization-section.tsx b/packages/admin/dashboard/src/routes/products/product-detail/components/product-organization-section/product-organization-section.tsx
index c8f722513de60..0543ca6220b89 100644
--- a/packages/admin/dashboard/src/routes/products/product-detail/components/product-organization-section/product-organization-section.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-detail/components/product-organization-section/product-organization-section.tsx
@@ -17,6 +17,8 @@ export const ProductOrganizationSection = ({
   const { t } = useTranslation()
   const { getDisplays } = useDashboardExtension()
 
+  console.log("product", product)
+
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/index.ts b/packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/index.ts
new file mode 100644
index 0000000000000..9ff25fe9b3ef3
--- /dev/null
+++ b/packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-shipping-profile-section"
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/product-shipping-profile-section.tsx b/packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/product-shipping-profile-section.tsx
new file mode 100644
index 0000000000000..23bead55d7bb9
--- /dev/null
+++ b/packages/admin/dashboard/src/routes/products/product-detail/components/product-shipping-profile-section/product-shipping-profile-section.tsx
@@ -0,0 +1,53 @@
+import { PencilSquare, ShoppingBag } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Container, Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+import { SidebarLink } from "../../../../../components/common/sidebar-link/sidebar-link"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+
+type ProductShippingProfileSectionProps = {
+  product: HttpTypes.AdminProduct & {
+    shipping_profile: HttpTypes.AdminShippingProfile
+  }
+}
+
+export const ProductShippingProfileSection = ({
+  product,
+}: ProductShippingProfileSectionProps) => {
+  const { t } = useTranslation()
+
+  const shippingProfile = product.shipping_profile
+
+  if (!shippingProfile) {
+    return null
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("products.shippingProfile.header")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "shipping-profile",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+
+      <SidebarLink
+        to={`/settings/locations/shipping-profiles/${shippingProfile.id}`}
+        labelKey={shippingProfile.name}
+        descriptionKey={shippingProfile.type}
+        icon={<ShoppingBag />}
+      />
+    </Container>
+  )
+}
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/product-detail.tsx b/packages/admin/dashboard/src/routes/products/product-detail/product-detail.tsx
index 4f8db3e2f55f6..78ece96f6007f 100644
--- a/packages/admin/dashboard/src/routes/products/product-detail/product-detail.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-detail/product-detail.tsx
@@ -14,6 +14,7 @@ import { PRODUCT_DETAIL_FIELDS } from "./constants"
 import { productLoader } from "./loader"
 
 import { useDashboardExtension } from "../../../extensions"
+import { ProductShippingProfileSection } from "./components/product-shipping-profile-section"
 
 export const ProductDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -71,6 +72,7 @@ export const ProductDetail = () => {
       </TwoColumnPage.Main>
       <TwoColumnPage.Sidebar>
         <ProductSalesChannelSection product={product} />
+        <ProductShippingProfileSection product={product} />
         <ProductOrganizationSection product={product} />
         <ProductAttributeSection product={product} />
       </TwoColumnPage.Sidebar>