medusa-ui-common 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medusa-ui-common",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Shared storefront UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "peerDependencies": {
     "@medusajs/types": ">=2",
     "@medusajs/ui": "*",
+    "@medusajs/icons": "^2.0.0",
     "lodash": ">=4",
     "lucide-react": "*",
     "medusa-contact-logic-plugin": "^2.0.0",
@@ -48,21 +49,6 @@
       "import": "./src/common/*",
       "default": "./src/common/*"
     },
-    "./providers": {
-      "types": "./src/storefront-providers.tsx",
-      "import": "./src/storefront-providers.tsx",
-      "default": "./src/storefront-providers.tsx"
-    },
-    "./context/wishlist-context": {
-      "types": "./src/context/wishlist-context.tsx",
-      "import": "./src/context/wishlist-context.tsx",
-      "default": "./src/context/wishlist-context.tsx"
-    },
-    "./context/modal-context": {
-      "types": "./src/context/modal-context.tsx",
-      "import": "./src/context/modal-context.tsx",
-      "default": "./src/context/modal-context.tsx"
-    },
     "./context/*": {
       "types": "./src/context/*",
       "import": "./src/context/*",
@@ -87,11 +73,6 @@
       "types": "./src/constants/*",
       "import": "./src/constants/*",
       "default": "./src/constants/*"
-    },
-    "./page-compose/types": {
-      "types": "./src/page-compose/types.ts",
-      "import": "./src/page-compose/types.ts",
-      "default": "./src/page-compose/types.ts"
     }
   },
   "typesVersions": {
@@ -102,17 +83,17 @@
     }
   },
   "devDependencies": {
-    "next": "^15.0.0",
-    "medusa-storefront-analytics": "workspace:*",
-    "medusa-storefront-core": "workspace:*",
-    "medusa-storefront-data": "workspace:*",
-    "medusa-storefront-theme-base": "workspace:*",
     "@headlessui/react": "^2.2.0",
     "@medusajs/icons": "^2.0.0",
     "@medusajs/ui": "^4.0.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "typescript": "^5.6.0",
+    "next": "^15.0.0",
+    "medusa-storefront-analytics": "workspace:*",
+    "medusa-storefront-core": "workspace:*",
+    "medusa-storefront-data": "workspace:*",
+    "medusa-storefront-theme-base": "workspace:*",
     "color": "^5.0.3",
     "react-razorpay": "^3.0.1"
   }

package/src/common/components/cart-totals/index.tsx

@@ -12,6 +12,12 @@ import { useSiteCompany } from "medusa-storefront-core"
 import { useButtonClassName } from "../../../context/button-theme-context"
 import { ThemedButton } from "../themed-button"
 
+type CartTotalsPriceSummaryCopy = {
+  title: string
+  itemSingular: string
+  itemPlural: string
+}
+
 type CartTotalsProps = {
   totals: {
     total?: number | null
@@ -25,9 +31,16 @@ type CartTotalsProps = {
   items?: HttpTypes.StoreCartLineItem[]
   checkoutStep?: string
   customer?: HttpTypes.StoreCustomer | null
+  priceSummaryCopy?: CartTotalsPriceSummaryCopy
 }
 
-const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutStep, customer }) => {
+const CartTotals: React.FC<CartTotalsProps> = ({
+  totals,
+  items = [],
+  checkoutStep,
+  customer,
+  priceSummaryCopy,
+}) => {
   const company = useSiteCompany()
   const primaryBtn = useButtonClassName("primary", { size: "lg", className: "w-full" })
   const secondaryBtn = useButtonClassName("secondary", { size: "lg", className: "w-full" })
@@ -277,7 +290,9 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutSte
     <div className="bg-[var(--sf-color-background)] rounded-lg p-3 min-[550px]:p-4 sm:p-5 md:p-6 min-[1023px]:p-4 min-[1150px]:p-5 min-[1360px]:p-6 border shadow-sm w-full" style={{ borderColor: '#C0C0C0' }}>
       <ProcessingOverlay isOpen={showOverlay} variant={processingVariant} />
       <h3 className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg font-bold text-[var(--sf-color-text)] mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
-        PRICE SUMMARY ({itemCount} {itemCount === 1 ? "ITEM" : "ITEMS"})
+        {priceSummaryCopy
+          ? `${priceSummaryCopy.title} (${itemCount} ${itemCount === 1 ? priceSummaryCopy.itemSingular : priceSummaryCopy.itemPlural})`
+          : `PRICE SUMMARY (${itemCount} ${itemCount === 1 ? "ITEM" : "ITEMS"})`}
       </h3>
 
       <div className="flex flex-col gap-y-2 min-[550px]:gap-y-2.5 sm:gap-y-3 min-[1023px]:gap-y-2 min-[1150px]:gap-y-3 min-[1360px]:gap-y-3 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-[var(--sf-color-text)]">

package/src/common/components/processing-overlay/index.tsx

@@ -6,16 +6,24 @@ const ProcessingOverlay = ({
   isOpen, 
   title,
   subtitle = "Please do not refresh or close this window",
-  variant = "payment"
+  variant = "payment",
+  gifSrc = "/uploads/profile-images/t-shirt.gif",
+  gifAlt = "Placing order...",
+  paymentMessages: paymentMessagesProp,
+  orderMessages: orderMessagesProp,
 }: { 
   isOpen: boolean
   title?: string
   subtitle?: string
   variant?: "payment" | "order"
+  gifSrc?: string
+  gifAlt?: string
+  paymentMessages?: string[]
+  orderMessages?: string[]
 }) => {
   const [messageIndex, setMessageIndex] = useState(0)
   
-  const paymentMessages = [
+  const paymentMessages = paymentMessagesProp ?? [
     "Securing your transaction...",
     "Verifying with payment provider...",
     "Finalizing your order...",
@@ -23,7 +31,7 @@ const ProcessingOverlay = ({
     "Finishing up..."
   ]
   
-  const orderMessages = [
+  const orderMessages = orderMessagesProp ?? [
     "Placing your order...",
     "Preparing your confirmation...",
     "Almost there...",
@@ -54,8 +62,8 @@ const ProcessingOverlay = ({
       <div className="bg-white p-8 rounded-2xl shadow-2xl border border-purple-100 flex flex-col items-center max-w-xs w-full mx-4 transform animate-in zoom-in-95 duration-300">
         <div className="relative mb-2">
           <img 
-            src="/uploads/profile-images/t-shirt.gif" 
-            alt="Placing order..."
+            src={gifSrc}
+            alt={gifAlt}
             className="w-32 h-32 object-contain mx-auto"
           />
         </div>