@evershop/evershop 2.1.0 → 2.1.2

package/dist/components/frontStore/checkout/ContactInformation.js

@@ -1,9 +1,14 @@
+import Area from '@components/common/Area.js';
 import { EmailField } from '@components/common/form/EmailField.js';
 import { PasswordField } from '@components/common/form/PasswordField.js';
+import { Button } from '@components/common/ui/Button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/common/ui/Card.js';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '@components/common/ui/Item.js';
 import { useCartState } from '@components/frontStore/cart/CartContext.js';
 import { useCheckout, useCheckoutDispatch } from '@components/frontStore/checkout/CheckoutContext.js';
 import { useCustomer, useCustomerDispatch } from '@components/frontStore/customer/CustomerContext.jsx';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { CircleUser } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 const LoggedIn = ({ uuid, fullName, email }) => {
@@ -35,23 +40,19 @@ const LoggedIn = ({ uuid, fullName, email }) => {
             setIsLoggingOut(false);
         }
     };
-    return (React.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
-        React.createElement("div", { className: "flex items-start justify-between" },
-            React.createElement("div", { className: "flex items-center space-x-3" },
-                React.createElement("div", { className: "flex-shrink-0" },
-                    React.createElement("div", { className: "w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center" },
-                        React.createElement("svg", { className: "w-6 h-6 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
-                            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" })))),
-                React.createElement("div", { className: "flex-1 min-w-0" },
-                    React.createElement("div", { className: "flex items-center space-x-2" },
-                        React.createElement("svg", { className: "w-4 h-4 text-blue-500", fill: "currentColor", viewBox: "0 0 20 20" },
-                            React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" })),
-                        React.createElement("h3", { className: "text-sm font-medium text-blue-800" },
-                            _('Logged in as'),
-                            " ",
-                            fullName)),
-                    React.createElement("p", { className: "text-sm text-blue-600 mt-1" }, email))),
-            React.createElement("button", { type: "button", onClick: handleLogout, disabled: isLoggingOut, className: "ml-3 text-sm text-blue-700 hover:text-blue-900 underline disabled:opacity-50 disabled:cursor-not-allowed" }, isLoggingOut ? _('Logging out...') : _('Logout')))));
+    return (React.createElement(Item, { variant: 'outline' },
+        React.createElement(ItemContent, null,
+            React.createElement(ItemTitle, null,
+                React.createElement("div", { className: "flex items-center space-x-2" },
+                    React.createElement("svg", { className: "w-4 h-4 text-primary", fill: "currentColor", viewBox: "0 0 20 20" },
+                        React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" })),
+                    React.createElement("span", { className: "text-sm font-medium text-primary" },
+                        _('Logged in as'),
+                        " ",
+                        fullName))),
+            React.createElement(ItemDescription, null, email)),
+        React.createElement(ItemActions, null,
+            React.createElement(Button, { onClick: handleLogout, disabled: isLoggingOut }, isLoggingOut ? _('Logging out...') : _('Logout')))));
 };
 const Guest = ({ email }) => {
     const [showLogin, setShowLogin] = useState(false);
@@ -84,7 +85,10 @@ const Guest = ({ email }) => {
             const formData = form.getValues();
             const loginEmail = (_a = formData === null || formData === void 0 ? void 0 : formData.contact) === null || _a === void 0 ? void 0 : _a.email;
             const password = (_b = formData === null || formData === void 0 ? void 0 : formData.contact) === null || _b === void 0 ? void 0 : _b.password;
-            await login(loginEmail, password, window.location.href);
+            await login({
+                email: loginEmail,
+                password: password
+            }, window.location.href);
             toast.success(_('Successfully logged in'));
             setShowLogin(false);
         }
@@ -110,18 +114,26 @@ const Guest = ({ email }) => {
                     required: _('Password is required')
                 }, placeholder: _('Enter your password') }),
             React.createElement("div", { className: "mt-4 flex gap-2" },
-                React.createElement("button", { type: "button", onClick: handleLogin, disabled: isLogging, className: "bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" }, isLogging ? _('Logging in...') : _('Log in')),
-                React.createElement("button", { type: "button", onClick: handleCancelLogin, className: "bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400" }, _('Cancel'))))),
+                React.createElement(Button, { onClick: handleLogin, disabled: isLogging, className: "disabled:opacity-50 disabled:cursor-not-allowed" }, isLogging ? _('Logging in...') : _('Log in')),
+                React.createElement(Button, { variant: 'outline', onClick: handleCancelLogin }, _('Cancel'))))),
         !showLogin && (React.createElement("p", { className: "mt-2" },
             _('Already have an account?'),
             ' ',
-            React.createElement("button", { type: "button", onClick: handleLoginClick, className: "underline text-blue-600 hover:text-blue-800" }, _('Log in'))))));
+            React.createElement("button", { type: "button", onClick: handleLoginClick, className: "underline text-primary hover:cursor-pointer" }, _('Log in'))))));
 };
 export function ContactInformation() {
     const { customer } = useCustomer();
     const { data: cart } = useCartState();
-    return (React.createElement("div", { className: "checkout-contact checkout-step" },
-        React.createElement("h1", { className: "checkout-step-title" }, _('Contact Information')),
-        customer ? (React.createElement(LoggedIn, { fullName: customer.fullName, email: customer.email, uuid: customer.uuid })) : (React.createElement(Guest, { email: cart.customerEmail || '' }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Area, { id: "checkoutContactInformationBefore" }),
+        React.createElement("div", { className: "checkout-contact checkout-step" },
+            React.createElement(Card, null,
+                React.createElement(CardHeader, null,
+                    React.createElement(CardTitle, null,
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement(CircleUser, { className: "w-5 h-5" }),
+                            React.createElement("span", null, _('Contact Information'))))),
+                React.createElement(CardContent, null, customer ? (React.createElement(LoggedIn, { fullName: customer.fullName, email: customer.email, uuid: customer.uuid })) : (React.createElement(Guest, { email: cart.customerEmail || '' }))))),
+        React.createElement(Area, { id: "checkoutContactInformationAfter" })));
 }
 //# sourceMappingURL=ContactInformation.js.map

package/dist/components/frontStore/checkout/ContactInformation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactInformation.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/ContactInformation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EACL,WAAW,EACX,mBAAmB,EACpB,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EACL,WAAW,EACX,mBAAmB,EACpB,MAAM,qDAAqD,CAAC;AAC7D,OAAO,EAAE,CAAC,EAAE,MAAM,2CAA2C,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,QAAQ,GAIT,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC;YACjB,QAAQ,EAAE;gBACR,EAAE,EAAE,IAAI;gBACR,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,QAAQ;aACnB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE;QAC9B,IAAI,YAAY;YAAE,OAAO;QAEzB,IAAI,CAAC;YACH,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,MAAM,MAAM,EAAE,CAAC;YACf,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC;QAC9C,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,YAAY,GAChB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;YAC9D,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC5B,CAAC;gBAAS,CAAC;YACT,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,kDAAkD;QAC/D,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,6BAA6B;gBAC1C,6BAAK,SAAS,EAAC,eAAe;oBAC5B,6BAAK,SAAS,EAAC,qEAAqE;wBAClF,6BACE,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW;4BAEnB,8BACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,qEAAqE,GACvE,CACE,CACF,CACF;gBACN,6BAAK,SAAS,EAAC,gBAAgB;oBAC7B,6BAAK,SAAS,EAAC,6BAA6B;wBAC1C,6BACE,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW;4BAEnB,8BACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uIAAuI,EACzI,QAAQ,EAAC,SAAS,GAClB,CACE;wBACN,4BAAI,SAAS,EAAC,mCAAmC;4BAC9C,CAAC,CAAC,cAAc,CAAC;;4BAAG,QAAQ,CAC1B,CACD;oBACN,2BAAG,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAK,CACjD,CACF;YACN,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,0GAA0G,IAEnH,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC1C,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,KAAK,GAEN,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC;YACjB,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;aACpB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;;QAC7B,IAAI,SAAS;YAAE,OAAO;QAEtB,IAAI,CAAC;YACH,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YACD,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAClC,MAAM,UAAU,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,KAAK,CAAC;YAC5C,MAAM,QAAQ,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,QAAQ,CAAC;YAC7C,MAAM,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACxD,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC;YAC3C,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,YAAY,GAChB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;YAC7D,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC5B,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,uBAAuB;QACvB,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,UAAU,IACT,YAAY,EAAE,KAAK,EACnB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EACjB,QAAQ,QACR,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC,CAAC,mBAAmB,CAAC;aACjC,EACD,WAAW,EAAE,CAAC,CAAC,kBAAkB,CAAC,GAClC;QAED,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,MAAM;YACnB,oBAAC,aAAa,IACZ,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EACpB,QAAQ,QACR,UAAU,EAAE;oBACV,QAAQ,EAAE,CAAC,CAAC,sBAAsB,CAAC;iBACpC,EACD,WAAW,EAAE,CAAC,CAAC,qBAAqB,CAAC,GACrC;YACF,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAC,4GAA4G,IAErH,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAC,+DAA+D,IAExE,CAAC,CAAC,QAAQ,CAAC,CACL,CACL,CACF,CACP;QAEA,CAAC,SAAS,IAAI,CACb,2BAAG,SAAS,EAAC,MAAM;YAChB,CAAC,CAAC,0BAA0B,CAAC;YAAE,GAAG;YACnC,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAC,6CAA6C,IAEtD,CAAC,CAAC,QAAQ,CAAC,CACL,CACP,CACL,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,UAAU,kBAAkB;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC;QAC7C,4BAAI,SAAS,EAAC,qBAAqB,IAAE,CAAC,CAAC,qBAAqB,CAAC,CAAM;QAClE,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,QAAQ,IACP,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,IAAI,EAAE,QAAQ,CAAC,IAAI,GACnB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,EAAE,GAAI,CAC3C,CACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ContactInformation.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/ContactInformation.tsx"],"names":[],"mappings":"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"}

package/dist/components/frontStore/checkout/OrderSummaryItems.js

@@ -7,13 +7,15 @@ const OrderSummaryItems = ({ items }) => {
     if (items.length === 0) {
         return null;
     }
-    return (React.createElement("ul", { className: "order__item__summary__list divide-y divide-gray-200 border-b mb-3" }, items.map((item) => (React.createElement("li", { key: item.uuid, className: "flex items-start py-3" },
+    return (React.createElement("ul", { className: "order__item__summary__list divide-y divide-border border-b border-border mb-3" }, items.map((item) => (React.createElement("li", { key: item.uuid, className: "flex items-start py-3" },
         React.createElement("div", { className: "relative mr-4 self-center" },
-            item.thumbnail && (React.createElement(Image, { width: 100, height: 100, src: item.thumbnail, alt: item.productName, className: "w-16 h-16 object-cover rounded border p-2 box-border" })),
-            !item.thumbnail && (React.createElement(ProductNoThumbnail, { className: "w-16 h-16 rounded border p-2 box-border" })),
-            React.createElement("span", { className: "absolute -top-2 -right-2 bg-gray-200 rounded-full w-6 h-6 flex items-center justify-center text-gray-700 text-sm" }, item.qty)),
+            item.thumbnail && (React.createElement(Image, { width: 100, height: 100, src: item.thumbnail, alt: item.productName, className: "w-16 h-16 object-cover rounded border p-2 box-border border-border" })),
+            !item.thumbnail && (React.createElement(ProductNoThumbnail, { className: "w-16 h-16 rounded border border-border p-2 box-border" })),
+            React.createElement("span", { className: "absolute -top-2 -right-2 bg-muted rounded-full w-6 h-6 flex items-center justify-center text-muted-foreground text-sm" }, item.qty)),
         React.createElement("div", { className: "flex-1 min-w-0 items-start align-top" },
-            React.createElement("div", { className: "font-semibold text-sm mb-1" }, item.productName),
+            React.createElement("div", { className: "font-semibold text-sm mb-1", title: item.productName }, item.productName.length > 50
+                ? `${item.productName.substring(0, 50)}...`
+                : item.productName),
             item.variantOptions && item.variantOptions.length > 0 && (React.createElement("div", { className: "space-y-1" }, item.variantOptions.map((option) => (React.createElement("div", { key: option.attributeCode, className: "text-xs text-gray-700" },
                 option.attributeName,
                 ": ",

package/dist/components/frontStore/checkout/OrderSummaryItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderSummaryItems.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/OrderSummaryItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAG9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,iBAAiB,GAElB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjB,MAAM,EACJ,MAAM,EAAE,EACN,GAAG,EAAE,EAAE,iBAAiB,EAAE,EAC3B,EACF,GAAG,WAAW,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,4BAAI,SAAS,EAAC,mEAAmE,IAC9E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,4BAAI,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,uBAAuB;QACnD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,IAAI,CAAC,SAAS,IAAI,CACjB,oBAAC,KAAK,IACJ,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,SAAS,EAAC,sDAAsD,GAChE,CACH;YACA,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,oBAAC,kBAAkB,IAAC,SAAS,EAAC,yCAAyC,GAAG,CAC3E;YACD,8BAAM,SAAS,EAAC,kHAAkH,IAC/H,IAAI,CAAC,GAAG,CACJ,CACH;QACN,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BAAK,SAAS,EAAC,4BAA4B,IAAE,IAAI,CAAC,WAAW,CAAO;YACnE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CACxD,6BAAK,SAAS,EAAC,WAAW,IACvB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACnC,6BACE,GAAG,EAAE,MAAM,CAAC,aAAa,EACzB,SAAS,EAAC,uBAAuB;gBAEhC,MAAM,CAAC,aAAa;;gBAAI,MAAM,CAAC,UAAU,CACtC,CACP,CAAC,CACE,CACP,CACG;QACN,6BAAK,SAAS,EAAC,gCAAgC;YAC7C,6BAAK,SAAS,EAAC,eAAe,IAC3B,iBAAiB;gBAChB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI;gBAC5B,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CACnB,CACF,CACH,CACN,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"OrderSummaryItems.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/OrderSummaryItems.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAG9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,iBAAiB,GAElB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjB,MAAM,EACJ,MAAM,EAAE,EACN,GAAG,EAAE,EAAE,iBAAiB,EAAE,EAC3B,EACF,GAAG,WAAW,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,4BAAI,SAAS,EAAC,+EAA+E,IAC1F,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,4BAAI,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,uBAAuB;QACnD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,IAAI,CAAC,SAAS,IAAI,CACjB,oBAAC,KAAK,IACJ,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,SAAS,EAAC,oEAAoE,GAC9E,CACH;YACA,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,oBAAC,kBAAkB,IAAC,SAAS,EAAC,uDAAuD,GAAG,CACzF;YACD,8BAAM,SAAS,EAAC,uHAAuH,IACpI,IAAI,CAAC,GAAG,CACJ,CACH;QACN,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BACE,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,WAAW,IAEtB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,EAAE;gBAC3B,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK;gBAC3C,CAAC,CAAC,IAAI,CAAC,WAAW,CAChB;YACL,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CACxD,6BAAK,SAAS,EAAC,WAAW,IACvB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACnC,6BACE,GAAG,EAAE,MAAM,CAAC,aAAa,EACzB,SAAS,EAAC,uBAAuB;gBAEhC,MAAM,CAAC,aAAa;;gBAAI,MAAM,CAAC,UAAU,CACtC,CACP,CAAC,CACE,CACP,CACG;QACN,6BAAK,SAAS,EAAC,gCAAgC;YAC7C,6BAAK,SAAS,EAAC,eAAe,IAC3B,iBAAiB;gBAChB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI;gBAC5B,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CACnB,CACF,CACH,CACN,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/frontStore/checkout/Payment.js

@@ -1,13 +1,17 @@
-import { useCartState } from '@components/frontStore/cart/CartContext.js';
+import Area from '@components/common/Area.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/common/ui/Card.js';
+import { useCartDispatch, useCartState } from '@components/frontStore/cart/CartContext.js';
 import { useCheckout, useCheckoutDispatch } from '@components/frontStore/checkout/CheckoutContext.js';
 import { BillingAddress } from '@components/frontStore/checkout/payment/BillingAddress.js';
 import { PaymentMethods } from '@components/frontStore/checkout/payment/PaymentMethods.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { CreditCard } from 'lucide-react';
 import React, { useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
 import { toast } from 'react-toastify';
 export function Payment() {
-    const { data: { billingAddress, availablePaymentMethods }, loadingStates: { addingBillingAddress } } = useCartState();
+    const { data: { noShippingRequired, billingAddress, availablePaymentMethods }, loadingStates: { addingBillingAddress } } = useCartState();
+    const { addBillingAddress } = useCartDispatch();
     const { updateCheckoutData } = useCheckoutDispatch();
     const { form } = useCheckout();
     const paymentMethod = useWatch({
@@ -34,11 +38,23 @@ export function Payment() {
             updatePaymentMethod();
         }
     }, [paymentMethod]);
-    return (React.createElement("div", { className: "checkout-shipment" },
-        React.createElement("h3", null, _('Payment')),
-        React.createElement(PaymentMethods, { methods: availablePaymentMethods === null || availablePaymentMethods === void 0 ? void 0 : availablePaymentMethods.map((method) => ({
-                ...method
-            })), isLoading: addingBillingAddress }),
-        React.createElement(BillingAddress, { billingAddress: billingAddress })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Area, { id: "checkoutPaymentBefore" }),
+        React.createElement("div", { className: "checkout__payment space-y-6 mt-6" },
+            React.createElement(Card, null,
+                React.createElement(CardHeader, null,
+                    React.createElement(CardTitle, null,
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement(CreditCard, { className: "w-5 h-5" }),
+                            React.createElement("span", null, _('Payment Information'))))),
+                React.createElement(CardContent, null,
+                    React.createElement(BillingAddress, { billingAddress: billingAddress, addBillingAddress: addBillingAddress, addingBillingAddress: addingBillingAddress, noShippingRequired: noShippingRequired }),
+                    (billingAddress || noShippingRequired === false) && (React.createElement(React.Fragment, null,
+                        React.createElement(Area, { id: "checkoutPaymentMethodsBefore" }),
+                        React.createElement(PaymentMethods, { methods: availablePaymentMethods === null || availablePaymentMethods === void 0 ? void 0 : availablePaymentMethods.map((method) => ({
+                                ...method
+                            })), isLoading: addingBillingAddress }),
+                        React.createElement(Area, { id: "checkoutPaymentMethodsAfter" })))))),
+        React.createElement(Area, { id: "checkoutPaymentAfter" })));
 }
 //# sourceMappingURL=Payment.js.map

package/dist/components/frontStore/checkout/Payment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Payment.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/Payment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EACL,WAAW,EACX,mBAAmB,EACpB,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAC3F,OAAO,EAAE,CAAC,EAAE,MAAM,2CAA2C,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,UAAU,OAAO;IACrB,MAAM,EACJ,IAAI,EAAE,EAAE,cAAc,EAAE,uBAAuB,EAAE,EACjD,aAAa,EAAE,EAAE,oBAAoB,EAAE,EACxC,GAAG,YAAY,EAAE,CAAC;IACnB,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrD,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,aAAa,GAAG,QAAQ,CAAC;QAC7B,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,mBAAmB,GAAG,KAAK,IAAI,EAAE;YACrC,IAAI,CAAC;gBACH,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;gBACtD,MAAM,aAAa,GAAG,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,CACjD,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,aAAa,CAC1C,CAAC;gBACF,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnB,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;gBAC1D,CAAC;gBACD,kBAAkB,CAAC,EAAE,aAAa,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;YAC5D,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,KAAK,CAAC,KAAK,CACT,KAAK,YAAY,KAAK;oBACpB,CAAC,CAAC,KAAK,CAAC,OAAO;oBACf,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CACnC,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QACF,IAAI,aAAa,EAAE,CAAC;YAClB,mBAAmB,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB;QAChC,gCAAK,CAAC,CAAC,SAAS,CAAC,CAAM;QACvB,oBAAC,cAAc,IACb,OAAO,EAAE,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gBACjD,GAAG,MAAM;aACV,CAAC,CAAC,EACH,SAAS,EAAE,oBAAoB,GAC/B;QACF,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,CAC9C,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Payment.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/Payment.tsx"],"names":[],"mappings":"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"}

package/dist/components/frontStore/checkout/Shipment.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function Shipment(): React.JSX.Element;
+export declare function Shipment(): React.JSX.Element | null;

package/dist/components/frontStore/checkout/Shipment.js

@@ -1,14 +1,21 @@
+import Area from '@components/common/Area.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/common/ui/Card.js';
 import { useCartDispatch, useCartState } from '@components/frontStore/cart/CartContext.js';
 import { useCheckout, useCheckoutDispatch } from '@components/frontStore/checkout/CheckoutContext.js';
 import { ShippingMethods } from '@components/frontStore/checkout/shipment/ShippingMethods.js';
 import CustomerAddressForm from '@components/frontStore/customer/address/addressForm/Index.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { MapPin } from 'lucide-react';
 import React, { useEffect, useRef } from 'react';
 import { useWatch } from 'react-hook-form';
 import { toast } from 'react-toastify';
 export function Shipment() {
     var _a, _b;
-    const { data: { shippingAddress, availableShippingMethods, shippingMethod: selectedShippingMethod }, loadingStates: { fetchingShippingMethods } } = useCartState();
+    const { data: { shippingAddress, noShippingRequired, availableShippingMethods, shippingMethod: selectedShippingMethod }, loadingStates: { fetchingShippingMethods } } = useCartState();
+    // Early return if no shipping is required
+    if (noShippingRequired) {
+        return null;
+    }
     const { addShippingAddress, addShippingMethod, fetchAvailableShippingMethods } = useCartDispatch();
     const { form } = useCheckout();
     const { updateCheckoutData } = useCheckoutDispatch();
@@ -91,12 +98,23 @@ export function Shipment() {
             return false;
         }
     };
-    return (React.createElement("div", { className: "checkout-shipment" },
-        React.createElement("h2", null, _('Delivery')),
-        React.createElement(CustomerAddressForm, { areaId: "checkoutShippingAddressForm", fieldNamePrefix: "shippingAddress", address: shippingAddress }),
-        React.createElement(ShippingMethods, { methods: availableShippingMethods === null || availableShippingMethods === void 0 ? void 0 : availableShippingMethods.map((method) => ({
-                ...method,
-                isSelected: method.code === selectedShippingMethod
-            })), shippingAddress: shippingAddress, onSelect: updateShipment, isLoading: fetchingShippingMethods })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Area, { id: "checkoutShipmentBefore" }),
+        React.createElement("div", { className: "checkout__shipment space-y-6 mt-6" },
+            React.createElement(Card, { className: "transition-all overflow-hidden duration-200" },
+                React.createElement(CardHeader, null,
+                    React.createElement(CardTitle, null,
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement(MapPin, { className: "w-5 h-5" }),
+                            React.createElement("span", null, _('Shipping Address'))))),
+                React.createElement(CardContent, null,
+                    React.createElement(CustomerAddressForm, { areaId: "checkoutShippingAddressForm", fieldNamePrefix: "shippingAddress", address: shippingAddress }))),
+            React.createElement(Area, { id: "checkoutShippingMethodsBefore", noOuter: true }),
+            React.createElement(ShippingMethods, { methods: availableShippingMethods === null || availableShippingMethods === void 0 ? void 0 : availableShippingMethods.map((method) => ({
+                    ...method,
+                    isSelected: method.code === selectedShippingMethod
+                })), shippingAddress: shippingAddress, onSelect: updateShipment, isLoading: fetchingShippingMethods }),
+            React.createElement(Area, { id: "checkoutShippingMethodsAfter", noOuter: true })),
+        React.createElement(Area, { id: "checkoutShipmentAfter" })));
 }
 //# sourceMappingURL=Shipment.js.map

package/dist/components/frontStore/checkout/Shipment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shipment.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/Shipment.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Shipment.js","sourceRoot":"","sources":["../../../../src/components/frontStore/checkout/Shipment.tsx"],"names":[],"mappings":"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"}

package/dist/components/frontStore/checkout/payment/BillingAddress.d.ts

@@ -1,5 +1,8 @@
-import { CustomerAddressGraphql } from '@evershop/evershop/types/customerAddress';
+import { Address, CustomerAddressGraphql } from '@evershop/evershop/types/customerAddress';
 import React from 'react';
-export declare function BillingAddress({ billingAddress }: {
+export declare function BillingAddress({ billingAddress, addBillingAddress, addingBillingAddress, noShippingRequired }: {
     billingAddress?: CustomerAddressGraphql;
+    addBillingAddress?: (address: Address) => Promise<void>;
+    addingBillingAddress?: boolean;
+    noShippingRequired: boolean;
 }): React.JSX.Element;

package/dist/components/frontStore/checkout/payment/BillingAddress.js

@@ -1,13 +1,16 @@
+import { Button } from '@components/common/ui/Button.js';
+import { Item, ItemContent, ItemDescription, ItemTitle } from '@components/common/ui/Item.js';
+import { Label } from '@components/common/ui/Label.js';
+import { RadioGroup, RadioGroupItem } from '@components/common/ui/RadioGroup.js';
 import { useCheckout, useCheckoutDispatch } from '@components/frontStore/checkout/CheckoutContext.js';
 import CustomerAddressForm from '@components/frontStore/customer/address/addressForm/Index.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React, { useEffect, useState } from 'react';
 import { useWatch } from 'react-hook-form';
-export function BillingAddress({ billingAddress }) {
+export function BillingAddress({ billingAddress, addBillingAddress, addingBillingAddress, noShippingRequired }) {
     const { form, checkoutData } = useCheckout();
     const { updateCheckoutData } = useCheckoutDispatch();
-    const { register, setValue, getValues, formState: { disabled } } = form;
-    // Watch shipping address changes
+    const { setValue, getValues, trigger, formState: { disabled } } = form;
     const shippingAddress = useWatch({
         control: form.control,
         name: 'shippingAddress'
@@ -16,16 +19,12 @@ export function BillingAddress({ billingAddress }) {
         control: form.control,
         name: 'billingAddress'
     });
-    // State for radio selection
-    const [useSameAddress, setUseSameAddress] = useState(true);
-    // Effect to sync billing address with shipping when "same address" is selected
+    const [useSameAddress, setUseSameAddress] = useState(!noShippingRequired);
     useEffect(() => {
         if (useSameAddress && shippingAddress) {
-            // Copy shipping address to billing address
             updateCheckoutData({ billingAddress: shippingAddress });
         }
         else if (!useSameAddress) {
-            // Clear billing address when switching to different address
             setValue('billingAddress', billingAddress);
         }
     }, [useSameAddress, checkoutData.shippingAddress]);
@@ -48,32 +47,38 @@ export function BillingAddress({ billingAddress }) {
             updateCheckoutData({ billingAddress: checkoutData.shippingAddress });
         }
     };
+    const handleGoToPayment = async () => {
+        const isValid = await trigger('billingAddress');
+        if (isValid && addBillingAddress) {
+            const billingAddressData = getValues('billingAddress');
+            await addBillingAddress(billingAddressData);
+        }
+    };
     return (React.createElement("div", { className: "billing-address-section" },
-        React.createElement("h3", { className: "text-lg font-medium mb-4" }, _('Billing Address')),
-        React.createElement("div", { className: "mb-6 space-y-3" },
-            React.createElement("div", { className: `border rounded-lg transition-all duration-200 cursor-pointer ${useSameAddress
-                    ? 'border-blue-500 bg-blue-50'
-                    : 'border-gray-200 hover:border-gray-300'}` },
-                React.createElement("div", { className: "p-3" },
-                    React.createElement("div", { className: "flex items-center space-x-3" },
-                        React.createElement("input", { type: "radio", id: "same-address", value: "same", checked: useSameAddress, onChange: (e) => handleAddressOptionChange(e.target.value), className: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" }),
-                        React.createElement("div", null,
-                            React.createElement("a", { href: "#", className: "font-normal cursor-pointer text-gray-900", onClick: (e) => {
-                                    e.preventDefault();
-                                    handleAddressOptionChange('same');
-                                } }, _('Same as shipping address')))))),
-            React.createElement("div", { className: `border rounded-lg transition-all overflow-hidden duration-200  ${!useSameAddress
-                    ? 'border-blue-500 bg-blue-50'
-                    : 'border-gray-200 hover:border-gray-300'}` },
-                React.createElement("div", { className: "p-3" },
-                    React.createElement("div", { className: "flex items-center space-x-3" },
-                        React.createElement("input", { type: "radio", ...register('useSameAddres'), id: "different-address", value: "different", checked: !useSameAddress, onChange: (e) => handleAddressOptionChange(e.target.value), className: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" }),
-                        React.createElement("div", null,
-                            React.createElement("a", { href: "#", className: "font-normal cursor-pointer text-gray-900", onClick: (e) => {
-                                    e.preventDefault();
-                                    handleAddressOptionChange('different');
-                                } }, _('Use a different billing address'))))),
-                !useSameAddress && (React.createElement("div", { className: "border-t border-gray-200 p-3 bg-white" },
-                    React.createElement(CustomerAddressForm, { areaId: "checkoutBillingAddressForm", fieldNamePrefix: "billingAddress", address: undefined })))))));
+        React.createElement(Item, { className: "py-0 px-0" },
+            React.createElement(ItemContent, { className: "gap-2" },
+                React.createElement(ItemTitle, null, _('Billing Address')),
+                React.createElement(RadioGroup, { value: useSameAddress ? 'same' : 'different', onValueChange: (value) => {
+                        handleAddressOptionChange(value);
+                    } }, !noShippingRequired ? (React.createElement(React.Fragment, null,
+                    React.createElement(Item, { variant: 'outline' },
+                        React.createElement(ItemContent, null,
+                            React.createElement(ItemTitle, null,
+                                React.createElement("div", { className: "flex items-center space-x-3" },
+                                    React.createElement(RadioGroupItem, { id: "same-address", value: "same" }),
+                                    React.createElement(Label, { htmlFor: "same-address" }, _('Same as shipping address')))))),
+                    React.createElement(Item, { variant: 'outline' },
+                        React.createElement(ItemContent, null,
+                            React.createElement(ItemTitle, null,
+                                React.createElement("div", { className: "flex items-center space-x-3" },
+                                    React.createElement(RadioGroupItem, { id: "different-address", value: "different" }),
+                                    React.createElement(Label, { htmlFor: "different-address" }, _('Use a different billing address')))),
+                            !useSameAddress && (React.createElement(ItemDescription, { className: "text-inherit mt-3 overflow-visible" },
+                                React.createElement("div", { className: "text-inherit bg-white" },
+                                    React.createElement(CustomerAddressForm, { areaId: "checkoutBillingAddressForm", fieldNamePrefix: "billingAddress", address: undefined }),
+                                    noShippingRequired && (React.createElement(Button, { onClick: () => handleGoToPayment(), variant: "default", isLoading: addingBillingAddress }, _('Continue to payment')))))))))) : (React.createElement(ItemDescription, { className: "text-inherit mt-3 overflow-visible" },
+                    React.createElement("div", { className: "text-inherit bg-white" },
+                        React.createElement(CustomerAddressForm, { areaId: "checkoutBillingAddressForm", fieldNamePrefix: "billingAddress", address: undefined }),
+                        noShippingRequired && (React.createElement(Button, { onClick: () => handleGoToPayment(), variant: "default", isLoading: addingBillingAddress, className: "mt-4" }, _('Continue to payment')))))))))));
 }
 //# sourceMappingURL=BillingAddress.js.map

package/dist/components/frontStore/checkout/payment/BillingAddress.js.map

@@ -1 +1 @@
-{"version":3,"file":"BillingAddress.js","sourceRoot":"","sources":["../../../../../src/components/frontStore/checkout/payment/BillingAddress.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BillingAddress.js","sourceRoot":"","sources":["../../../../../src/components/frontStore/checkout/payment/BillingAddress.tsx"],"names":[],"mappings":"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"}

package/dist/components/frontStore/checkout/payment/PaymentMethods.js

@@ -1,62 +1,60 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+import { Item, ItemContent, ItemDescription, ItemTitle } from '@components/common/ui/Item.js';
+import { Label } from '@components/common/ui/Label.js';
+import { RadioGroup, RadioGroupItem } from '@components/common/ui/RadioGroup.js';
+import { Skeleton } from '@components/common/ui/Skeleton.js';
 import { useCheckout } from '@components/frontStore/checkout/CheckoutContext.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 // Skeleton component for loading state
 function PaymentMethodSkeleton() {
-    return (React.createElement("div", { className: "payment-method-skeleton" }, [1, 2, 3, 4].map((index) => (React.createElement("div", { key: index, className: "border border-gray-200 rounded-lg p-4 mb-3 animate-pulse" },
+    return (React.createElement("div", { className: "payment-method-skeleton" }, [1, 2, 3, 4].map((index) => (React.createElement("div", { key: index, className: "border border-border rounded-lg p-4 mb-3 animate-pulse" },
         React.createElement("div", { className: "flex items-center justify-between" },
             React.createElement("div", { className: "flex items-center space-x-3" },
-                React.createElement("div", { className: "w-4 h-4 bg-gray-200 rounded-full" }),
+                React.createElement(Skeleton, { className: "w-4 h-4" }),
                 React.createElement("div", { className: "space-y-2" },
-                    React.createElement("div", { className: "h-4 bg-gray-200 rounded w-20" }),
-                    React.createElement("div", { className: "h-3 bg-gray-200 rounded w-40" }))),
+                    React.createElement(Skeleton, { className: "h-4 w-20" }),
+                    React.createElement(Skeleton, { className: "h-3 w-40" }))),
             React.createElement("div", { className: "text-right space-y-1" },
-                React.createElement("div", { className: "h-3 bg-gray-200 rounded w-12" }),
-                React.createElement("div", { className: "h-4 bg-gray-200 rounded w-16" }))))))));
+                React.createElement(Skeleton, { className: "h-3 w-12" }),
+                React.createElement(Skeleton, { className: "h-4 w-16" }))))))));
 }
 export function PaymentMethods({ methods, isLoading }) {
     var _a, _b;
     const { form, registeredPaymentComponents } = useCheckout();
-    const { register, formState, watch, setValue } = form;
-    // Watch the current payment method value
+    const { formState, watch, setValue } = form;
     const selectedPaymentMethod = watch('paymentMethod');
-    // Helper function to get payment component for a method
     const getPaymentComponent = (methodCode) => {
         return registeredPaymentComponents[methodCode] || null;
     };
-    // Helper function to render a component safely
     const renderComponent = (component, props) => {
         return component ? React.createElement(component, props) : null;
     };
-    return (React.createElement("div", { className: "checkout-payment-methods" }, isLoading ? (React.createElement(PaymentMethodSkeleton, null)) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "payment-methods-list" }, (methods === null || methods === void 0 ? void 0 : methods.length) === 0 ? (React.createElement("div", { className: "text-gray-500 text-center py-8" },
-            React.createElement("div", { className: "mb-2" }, _('No payment methods available')))) : (methods.map((method) => {
-            const isSelected = selectedPaymentMethod === method.code;
-            const component = getPaymentComponent(method.code);
-            return (React.createElement("div", { key: method.code, className: `border rounded-lg mb-3 transition-all overflow-hidden duration-200 ${isSelected
-                    ? 'border-blue-500 bg-blue-50'
-                    : 'border-gray-200 hover:border-gray-300'}` },
-                React.createElement("div", { className: "p-3" },
-                    React.createElement("div", { className: "flex items-center space-x-3" },
-                        React.createElement("input", { type: "radio", ...register('paymentMethod'), value: method.code, required: true, checked: isSelected, className: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" }),
-                        React.createElement("div", { className: "font-normal text-gray-900 w-full cursor-pointer", onClick: (e) => {
-                                e.preventDefault();
-                                if (formState.disabled) {
-                                    return;
-                                }
-                                // Set selected payment method
-                                setValue('paymentMethod', method.code);
-                            } }, (component === null || component === void 0 ? void 0 : component.nameRenderer)
-                            ? renderComponent(component.nameRenderer, {
-                                isSelected
-                            })
-                            : _(method.name)))),
-                isSelected && (component === null || component === void 0 ? void 0 : component.formRenderer) && (React.createElement("div", { className: "border-t border-gray-200 p-3 bg-white" }, renderComponent(component.formRenderer, {
-                    isSelected: true
-                })))));
-        }))),
-        formState.errors.paymentMethod && (React.createElement("div", { className: "text-red-500 text-sm mt-2" }, ((_b = (_a = formState.errors.paymentMethod) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString()) ||
-            _('Please select a payment method')))))));
+    return (React.createElement("div", { className: "checkout-payment-methods mt-6" },
+        React.createElement(Item, { className: "px-0 py-0" },
+            React.createElement(ItemContent, { className: "gap-2" },
+                React.createElement(ItemTitle, null, _('Pick a payment method')),
+                React.createElement(ItemDescription, null, isLoading ? (React.createElement(PaymentMethodSkeleton, null)) : (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "payment-methods-list" }, (methods === null || methods === void 0 ? void 0 : methods.length) === 0 ? (React.createElement("div", { className: "text-muted-foreground text-center py-8" },
+                        React.createElement("div", { className: "mb-2" }, _('No payment methods available')))) : (React.createElement(RadioGroup, { value: selectedPaymentMethod !== null && selectedPaymentMethod !== void 0 ? selectedPaymentMethod : '', onValueChange: (value) => {
+                            setValue('paymentMethod', value);
+                        } }, methods.map((method) => {
+                        const isSelected = selectedPaymentMethod === method.code;
+                        const component = getPaymentComponent(method.code);
+                        return (React.createElement(Item, { key: method.code, variant: 'outline', className: isSelected ? 'border-primary' : '' },
+                            React.createElement(ItemContent, null,
+                                React.createElement(ItemTitle, { className: "w-full" },
+                                    React.createElement("div", { className: "flex items-center space-x-3 w-full" },
+                                        React.createElement(RadioGroupItem, { id: `payment-method-${method.code}`, value: method.code }),
+                                        React.createElement(Label, { htmlFor: `payment-method-${method.code}`, className: "w-full" }, (component === null || component === void 0 ? void 0 : component.nameRenderer)
+                                            ? renderComponent(component.nameRenderer, {
+                                                isSelected
+                                            })
+                                            : _(method.name)))),
+                                (component === null || component === void 0 ? void 0 : component.formRenderer) && isSelected && (React.createElement(ItemDescription, { className: "text-inherit overflow-visible" }, renderComponent(component.formRenderer, {
+                                    isSelected
+                                }))))));
+                    })))),
+                    formState.errors.paymentMethod && (React.createElement("div", { className: "text-destructive text-sm mt-2" }, ((_b = (_a = formState.errors.paymentMethod) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString()) ||
+                        _('Please select a payment method'))))))))));
 }
 //# sourceMappingURL=PaymentMethods.js.map