move selfservice tables to medreport schema

add base medusa store frontend

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-button/index.tsx

@@ -0,0 +1,5 @@
+const SkeletonButton = () => {
+  return <div className="w-full min-h-[50px] px-5 py-[10px] bg-gray-100"></div>
+}
+
+export default SkeletonButton

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-card-details/index.tsx

@@ -0,0 +1,10 @@
+const SkeletonCardDetails = () => {
+  return (
+    <div className="flex flex-col gap-1 my-4 transition-all duration-150 ease-in-out">
+      <div className="h-4 bg-ui-bg-component-pressed rounded-md w-1/4 animate-pulse mb-1"></div>
+      <div className="pt-3 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none border-ui-border-base animate-pulse" />
+    </div>
+  )
+}
+
+export default SkeletonCardDetails

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-cart-item/index.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonCartItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="!pl-0 p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 rounded-large animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell className="!pr-0 text-right">
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonCartItem

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-cart-totals/index.tsx

@@ -0,0 +1,30 @@
+const SkeletonCartTotals = ({ header = true }) => {
+  return (
+    <div className="flex flex-col">
+      {header && <div className="w-32 h-4 bg-gray-100 mb-4"></div>}
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-3 bg-gray-100"></div>
+        <div className="w-32 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between my-4">
+        <div className="w-24 h-3 bg-gray-100"></div>
+        <div className="w-24 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-28 h-3 bg-gray-100 "></div>
+        <div className="w-20 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="w-full border-b border-gray-200 border-dashed my-4"></div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-6 bg-gray-100 mb-4"></div>
+        <div className="w-24 h-6 bg-gray-100 mb-4"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartTotals

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-code-form/index.tsx

@@ -0,0 +1,13 @@
+const SkeletonCodeForm = () => {
+  return (
+    <div className="w-full flex flex-col">
+      <div className="bg-gray-100 h-7 w-24 mb-4"></div>
+      <div className="grid grid-cols-[1fr_80px] gap-x-2">
+        <div className="bg-gray-100 h-12"></div>
+        <div className="bg-gray-100 h-12"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCodeForm

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-line-item/index.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonLineItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonLineItem

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-order-confirmed-header/index.tsx

@@ -0,0 +1,14 @@
+const SkeletonOrderConfirmedHeader = () => {
+  return (
+    <div className="flex flex-col gap-y-2 pb-10 animate-pulse">
+      <div className="w-2/5 h-4 bg-gray-100"></div>
+      <div className="w-3/6 h-6 bg-gray-100"></div>
+      <div className="flex gap-x-4">
+        <div className="w-16 h-4 bg-gray-100"></div>
+        <div className="w-12 h-4 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmedHeader

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-order-information/index.tsx

@@ -0,0 +1,36 @@
+import SkeletonCartTotals from "@modules/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderInformation = () => {
+  return (
+    <div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10 border-b border-gray-200">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-2"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-1/6 h-3 bg-gray-100 mt-2"></div>
+          <div className="w-32 h-4 bg-gray-100 my-4"></div>
+          <div className="w-1/6 h-3 bg-gray-100"></div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-10">
+        <div className="flex flex-col">
+          <div className="w-32 h-4 bg-gray-100 mb-4"></div>
+          <div className="w-2/6 h-3 bg-gray-100"></div>
+          <div className="w-3/6 h-3 bg-gray-100 my-4"></div>
+        </div>
+
+        <SkeletonCartTotals />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderInformation

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-order-items/index.tsx

@@ -0,0 +1,43 @@
+const SkeletonOrderItems = () => {
+  return (
+    <div className="flex flex-col gap-y-4 py-10 border-y border-gray-200">
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[122px_1fr] gap-x-4">
+        <div className="w-full aspect-[29/34] bg-gray-100"></div>
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-y-2">
+            <div className="w-48 h-6 bg-gray-100"></div>
+            <div className="w-24 h-4 bg-gray-100"></div>
+            <div className="w-32 h-4 bg-gray-100"></div>
+          </div>
+          <div className="w-32 h-6 bg-gray-100"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderItems

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-order-summary/index.tsx

@@ -0,0 +1,15 @@
+import SkeletonButton from "@modules/skeletons/components/skeleton-button"
+import SkeletonCartTotals from "@modules/skeletons/components/skeleton-cart-totals"
+
+const SkeletonOrderSummary = () => {
+  return (
+    <div className="grid-cols-1">
+      <SkeletonCartTotals header={false} />
+      <div className="mt-4">
+        <SkeletonButton />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderSummary

packages/features/medusa-storefront/src/modules/skeletons/components/skeleton-product-preview/index.tsx

@@ -0,0 +1,15 @@
+import { Container } from "@medusajs/ui"
+
+const SkeletonProductPreview = () => {
+  return (
+    <div className="animate-pulse">
+      <Container className="aspect-[9/16] w-full bg-gray-100 bg-ui-bg-subtle" />
+      <div className="flex justify-between text-base-regular mt-2">
+        <div className="w-2/5 h-6 bg-gray-100"></div>
+        <div className="w-1/5 h-6 bg-gray-100"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonProductPreview

packages/features/medusa-storefront/src/modules/skeletons/templates/skeleton-cart-page/index.tsx

@@ -0,0 +1,65 @@
+import { Table } from "@medusajs/ui"
+
+import repeat from "@lib/util/repeat"
+import SkeletonCartItem from "@modules/skeletons/components/skeleton-cart-item"
+import SkeletonCodeForm from "@modules/skeletons/components/skeleton-code-form"
+import SkeletonOrderSummary from "@modules/skeletons/components/skeleton-order-summary"
+
+const SkeletonCartPage = () => {
+  return (
+    <div className="py-12">
+      <div className="content-container">
+        <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40">
+          <div className="flex flex-col bg-white p-6 gap-y-6">
+            <div className="bg-white flex items-start justify-between">
+              <div className="flex flex-col gap-y-2">
+                <div className="w-60 h-8 bg-gray-200 animate-pulse" />
+                <div className="w-48 h-6 bg-gray-200 animate-pulse" />
+              </div>
+              <div>
+                <div className="w-14 h-8 bg-gray-200 animate-pulse" />
+              </div>
+            </div>
+            <div>
+              <div className="pb-3 flex items-center">
+                <div className="w-20 h-12 bg-gray-200 animate-pulse" />
+              </div>
+              <Table>
+                <Table.Header className="border-t-0">
+                  <Table.Row>
+                    <Table.HeaderCell className="!pl-0">
+                      <div className="w-10 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell></Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-16 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell>
+                      <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell className="!pr-0">
+                      <div className="flex justify-end">
+                        <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+                      </div>
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {repeat(4).map((index) => (
+                    <SkeletonCartItem key={index} />
+                  ))}
+                </Table.Body>
+              </Table>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-8">
+            <SkeletonOrderSummary />
+            <SkeletonCodeForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartPage

packages/features/medusa-storefront/src/modules/skeletons/templates/skeleton-order-confirmed/index.tsx

@@ -0,0 +1,21 @@
+import SkeletonOrderConfirmedHeader from "@modules/skeletons/components/skeleton-order-confirmed-header"
+import SkeletonOrderInformation from "@modules/skeletons/components/skeleton-order-information"
+import SkeletonOrderItems from "@modules/skeletons/components/skeleton-order-items"
+
+const SkeletonOrderConfirmed = () => {
+  return (
+    <div className="bg-gray-50 py-6 min-h-[calc(100vh-64px)] animate-pulse">
+      <div className="content-container flex justify-center">
+        <div className="max-w-4xl h-full bg-white w-full p-10">
+          <SkeletonOrderConfirmedHeader />
+
+          <SkeletonOrderItems />
+
+          <SkeletonOrderInformation />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonOrderConfirmed

packages/features/medusa-storefront/src/modules/skeletons/templates/skeleton-product-grid/index.tsx

@@ -0,0 +1,23 @@
+import repeat from "@lib/util/repeat"
+import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
+
+const SkeletonProductGrid = ({
+  numberOfProducts = 8,
+}: {
+  numberOfProducts?: number
+}) => {
+  return (
+    <ul
+      className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1"
+      data-testid="products-list-loader"
+    >
+      {repeat(numberOfProducts).map((index) => (
+        <li key={index}>
+          <SkeletonProductPreview />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default SkeletonProductGrid

packages/features/medusa-storefront/src/modules/skeletons/templates/skeleton-related-products/index.tsx

@@ -0,0 +1,25 @@
+import repeat from "@lib/util/repeat"
+import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
+
+const SkeletonRelatedProducts = () => {
+  return (
+    <div className="product-page-constraint">
+      <div className="flex flex-col gap-8 items-center text-center mb-8">
+        <div className="w-20 h-6 animate-pulse bg-gray-100"></div>
+        <div className="flex flex-col gap-4 items-center text-center mb-16">
+          <div className="w-96 h-10 animate-pulse bg-gray-100"></div>
+          <div className="w-48 h-10 animate-pulse bg-gray-100"></div>
+        </div>
+      </div>
+      <ul className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-6 gap-y-8 flex-1">
+        {repeat(3).map((index) => (
+          <li key={index}>
+            <SkeletonProductPreview />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default SkeletonRelatedProducts