@evershop/evershop 2.1.0 → 2.1.1

package/src/modules/cms/services/page/pageDataSchema.json

@@ -88,10 +88,14 @@
     },
     "url_key": {
       "type": "string",
-      "pattern": "^\\S+$",
+      "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*$",
+      "minLength": 1,
+      "maxLength": 255,
       "errorMessage": {
         "type": "URL key must be a string",
-        "pattern": "URL key cannot contain spaces"
+        "pattern": "URL key must contain only lowercase letters, numbers, and hyphens (e.g., 'my-product-name')",
+        "minLength": "URL key cannot be empty",
+        "maxLength": "URL key cannot exceed 255 characters"
       }
     },
     "meta_title": {
@@ -105,12 +109,6 @@
       "errorMessage": {
         "type": "Meta description must be a string"
       }
-    },
-    "meta_keywords": {
-      "type": "string",
-      "errorMessage": {
-        "type": "Meta keywords must be a string"
-      }
     }
   },
   "additionalProperties": true

package/src/modules/cms/services/{tailwind.admin.config.js → tailwind.admin.config.ts}

@@ -1,3 +1,6 @@
+/**
+ * @deprecated. We are using tailwind 4 now. This module will be removed in future versions.
+ */
 export default {
   theme: {
     extend: {

package/src/modules/cms/services/{tailwind.frontStore.config.js → tailwind.frontStore.config.ts}

@@ -1,5 +1,8 @@
 import plugin from '@tailwindcss/typography';
 
+/**
+ * @deprecated. We are using tailwind 4 now. This module will be removed in future versions.
+ */
 export default {
   theme: {
     extend: {

package/src/modules/cod/{bootstrap.js → bootstrap.ts}

@@ -1,7 +1,12 @@
+import { emit } from '../../lib/event/emitter.js';
 import { getConfig } from '../../lib/util/getConfig.js';
-import { addProcessor } from '../../lib/util/registry.js';
+import { hookAfter } from '../../lib/util/hookable.js';
 import { getSetting } from '../../modules/setting/services/setting.js';
-import { registerPaymentMethod } from '../checkout/services/getAvailablePaymentMethos.js';
+import { registerPaymentMethod } from '../checkout/services/getAvailablePaymentMethods.js';
+import {
+  CreateOrderResult,
+  SaveOrderContext
+} from '../checkout/services/orderCreator.js';
 
 export default async () => {
   registerPaymentMethod({
@@ -10,7 +15,7 @@ export default async () => {
       name: await getSetting('codDisplayName', 'Cash on Delivery')
     }),
     validator: async () => {
-      const codConfig = getConfig('system.cod', {});
+      const codConfig = getConfig('system.cod', {}) as { status?: number };
       let codStatus;
       if (codConfig.status) {
         codStatus = codConfig.status;
@@ -24,4 +29,13 @@ export default async () => {
       }
     }
   });
+
+  hookAfter<SaveOrderContext, CreateOrderResult>(
+    'createOrderFunc',
+    async function EmitOrderPlacedEvent(order) {
+      if (order.payment_method === 'cod') {
+        await emit('order_placed', order);
+      }
+    }
+  );
 };

package/src/modules/cod/pages/admin/orderEdit/CaptureButton.jsx

@@ -1,6 +1,6 @@
-import { Card } from '@components/admin/Card';
-import Button from '@components/common/Button';
-import RenderIfTrue from '@components/common/RenderIfTrue';
+import RenderIfTrue from '@components/common/RenderIfTrue.js';
+import { Button } from '@components/common/ui/Button.js';
+import { CardContent } from '@components/common/ui/Card.js';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -33,11 +33,13 @@ export default function CaptureButton({
     <RenderIfTrue
       condition={paymentStatus.code === 'pending' && paymentMethod === 'cod'}
     >
-      <Card.Session>
+      <CardContent>
         <div className="flex justify-end">
-          <Button title="Capture" onAction={onAction} isLoading={isLoading} />
+          <Button onClick={onAction} isLoading={isLoading}>
+            Capture Payment
+          </Button>
         </div>
-      </Card.Session>
+      </CardContent>
     </RenderIfTrue>
   );
 }

package/src/modules/cod/pages/admin/paymentSetting/CODSetting.tsx

@@ -1,6 +1,12 @@
-import { Card } from '@components/admin/Card.js';
 import { InputField } from '@components/common/form/InputField.js';
 import { ToggleField } from '@components/common/form/ToggleField.js';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@components/common/ui/Card.js';
 import React from 'react';
 
 interface CODPaymentProps {
@@ -13,13 +19,19 @@ export default function CODPayment({
   setting: { codPaymentStatus, codDisplayName }
 }: CODPaymentProps) {
   return (
-    <Card title="Cash On Delivery Payment">
-      <Card.Session>
+    <Card>
+      <CardHeader>
+        <CardTitle>Cash On Delivery Payment</CardTitle>
+        <CardDescription>
+          Configure your Cash On Delivery payment gateway settings
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
         <div className="grid grid-cols-3 gap-5">
           <div className="col-span-1 items-center flex">
             <h4>Enable?</h4>
           </div>
-          <div className="col-span-2">
+          <div className="col-span-2 flex justify-start">
             <ToggleField
               name="codPaymentStatus"
               defaultValue={codPaymentStatus}
@@ -28,8 +40,8 @@ export default function CODPayment({
             />
           </div>
         </div>
-      </Card.Session>
-      <Card.Session>
+      </CardContent>
+      <CardContent className="pt-4 border-t border-border">
         <div className="grid grid-cols-3 gap-5">
           <div className="col-span-1 items-center flex">
             <h4>Dislay Name</h4>
@@ -42,7 +54,7 @@ export default function CODPayment({
             />
           </div>
         </div>
-      </Card.Session>
+      </CardContent>
     </Card>
   );
 }

package/src/modules/cod/pages/frontStore/checkout/CashOnDelivery.tsx

@@ -1,9 +1,11 @@
+import { Button } from '@components/common/ui/Button.js';
 import {
   useCheckout,
   useCheckoutDispatch
 } from '@components/frontStore/checkout/CheckoutContext.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React, { useEffect } from 'react';
+import { toast } from 'react-toastify';
 
 interface CashOnDeliveryMethodProps {
   setting: {
@@ -45,14 +47,14 @@ export default function CashOnDeliveryMethod({
   useEffect(() => {
     registerPaymentComponent('cod', {
       nameRenderer: () => (
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between w-full">
           <span>{setting.codDisplayName}</span>
           <CODLogo />
         </div>
       ),
       formRenderer: () => (
-        <div className="flex justify-center text-gray-500">
-          <div className="w-2/3 text-center p-5">
+        <div className="flex justify-center text-muted-foreground">
+          <div className="w-2/3 text-center py-3">
             {_(
               'Conveniently pay with cash at your doorstep when your order is delivered.'
             )}
@@ -64,17 +66,23 @@ export default function CashOnDeliveryMethod({
         const { loadingStates, orderPlaced } = useCheckout();
         const handleClick = async (e: React.MouseEvent) => {
           e.preventDefault();
-          await checkout();
+          try {
+            await checkout();
+          } catch (error) {
+            toast.error(_('Failed to place order. Please try again.'));
+          }
         };
 
         const isDisabled = loadingStates.placingOrder || orderPlaced;
 
         return (
-          <button
+          <Button
+            variant={'default'}
+            size={'xl'}
             type="button"
             onClick={handleClick}
             disabled={isDisabled}
-            className="w-full bg-green-600 text-white py-4 px-6 rounded-lg font-semibold text-lg shadow-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-green-600"
+            className="w-full transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-primary"
           >
             <span className="flex items-center justify-center space-x-2">
               {loadingStates.placingOrder ? (
@@ -125,7 +133,7 @@ export default function CashOnDeliveryMethod({
                 </>
               )}
             </span>
-          </button>
+          </Button>
         );
       }
     });

package/src/modules/customer/api/createCustomer/{[bodyParser]createCustomer.js → [bodyParser]createCustomer.ts}

@@ -2,9 +2,15 @@ import { error } from '../../../../lib/log/logger.js';
 import { setDelegate } from '../../../../lib/middleware/delegate.js';
 import { buildUrl } from '../../../../lib/router/buildUrl.js';
 import { INTERNAL_SERVER_ERROR, OK } from '../../../../lib/util/httpStatus.js';
+import { EvershopRequest } from '../../../../types/request.js';
+import { EvershopResponse } from '../../../../types/response.js';
 import createCustomer from '../../services/customer/createCustomer.js';
 
-export default async (request, response, next) => {
+export default async (
+  request: EvershopRequest,
+  response: EvershopResponse,
+  next
+) => {
   try {
     const customer = await createCustomer(request.body, {
       routeId: request.currentRoute.id

package/src/modules/customer/api/resetPassword/{[bodyParser]resetPassword.js → [bodyParser]resetPassword.ts}

@@ -2,13 +2,26 @@ import crypto from 'crypto';
 import { insert, select } from '@evershop/postgres-query-builder';
 import { error } from '../../../../lib/log/logger.js';
 import { pool } from '../../../../lib/postgres/connection.js';
+import { getConfig } from '../../../../lib/util/getConfig.js';
 import { OK, INTERNAL_SERVER_ERROR } from '../../../../lib/util/httpStatus.js';
+import { EvershopRequest } from '../../../../types/request.js';
+import { EvershopResponse } from '../../../../types/response.js';
+import { sendResetPasswordEmail } from '../../services/sendResetPasswordEmail.js';
 
-export default async (request, response, next) => {
+export default async (
+  request: EvershopRequest,
+  response: EvershopResponse,
+  next
+) => {
   const { body } = request;
-
   const { email } = body;
   try {
+    const config = getConfig('system.notification_emails.reset_password', {
+      enabled: true
+    });
+    if (config?.enabled === false) {
+      throw new Error('Reset password email is disabled in config.');
+    }
     // Generate a random token using crypto module
     const token = crypto.randomBytes(64).toString('hex');
 
@@ -30,23 +43,20 @@ export default async (request, response, next) => {
         })
         .execute(pool);
     }
-
+    await sendResetPasswordEmail(email, existingCustomer, token);
     response.status(OK);
-    response.$body = {
-      token,
-      email
-    };
+    response.json({
+      data: {}
+    });
 
-    // The email will be taken care by the email extension. SendGrid for example
-    // An extension can add a middleware to this route to send email
-    next();
+    return;
   } catch (e) {
     error(e);
     response.status(INTERNAL_SERVER_ERROR);
     response.json({
       error: {
         status: INTERNAL_SERVER_ERROR,
-        message: e.message
+        message: 'Something went wrong. Please try again later.'
       }
     });
   }

package/src/modules/customer/api/updatePassword/[bodyParser]updatePassword.js

@@ -1,8 +1,8 @@
 import crypto from 'crypto';
 import { select, del } from '@evershop/postgres-query-builder';
 import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone.js';
+import utc from 'dayjs/plugin/utc.js';
 import { error } from '../../../../lib/log/logger.js';
 import { pool } from '../../../../lib/postgres/connection.js';
 import { getConfig } from '../../../../lib/util/getConfig.js';

package/src/modules/customer/pages/admin/all/CustomerMenuGroup.jsx

@@ -1,5 +1,5 @@
 import { NavigationItemGroup } from '@components/admin/NavigationItemGroup';
-import { UsersIcon } from '@heroicons/react/24/solid';
+import { User } from 'lucide-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -10,7 +10,7 @@ export default function CustomerMenuGroup({ customerGrid }) {
       name="Customer"
       items={[
         {
-          Icon: UsersIcon,
+          Icon: User,
           url: customerGrid,
           title: 'Customers'
         }

package/src/modules/customer/pages/admin/customerEdit/CustomerEditForm.jsx

@@ -1,5 +1,6 @@
 import Area from '@components/common/Area';
 import React from 'react';
+import './CustomerEditForm.scss';
 
 export default function CustomerEditForm() {
   return (

package/src/modules/customer/pages/admin/customerEdit/CustomerEditForm.scss

@@ -1,7 +1,9 @@
-.page-heading {
-  max-width: 62.5rem;
-}
-.main-content-inner {
-  max-width: 62.5rem;
-  margin: 0 auto;
+body.customerEdit {
+  .main-content-inner {
+    max-width: 62.5rem;
+    margin: 1.875rem auto;
+  }
+  .page-heading {
+    max-width: 62.5rem;
+  }
 }

package/src/modules/customer/pages/admin/customerEdit+customerNew/General.jsx

@@ -1,15 +1,17 @@
-import { Card } from '@components/admin/Card';
 import Area from '@components/common/Area';
+import { Card } from '@components/common/ui/Card';
+import { CardContent, CardTitle } from '@components/common/ui/Card.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 function FullName({ fullName }) {
   return (
-    <Card.Session title="Full Name">
+    <CardContent>
+      <CardTitle className="mb-2">Full Name</CardTitle>
       <div>
         <span>{fullName}</span>
       </div>
-    </Card.Session>
+    </CardContent>
   );
 }
 
@@ -19,11 +21,12 @@ FullName.propTypes = {
 
 function Group({ group }) {
   return (
-    <Card.Session title="Group">
+    <CardContent className="pt-3 border-t border-border">
+      <CardTitle className="mb-2">Group</CardTitle>
       <div>
         <span>{group?.groupName || 'Default'}</span>
       </div>
-    </Card.Session>
+    </CardContent>
   );
 }
 
@@ -35,11 +38,12 @@ Group.propTypes = {
 
 function Email({ email }) {
   return (
-    <Card.Session title="Email">
+    <CardContent className="pt-3 border-t border-border">
+      <CardTitle className="mb-2">Email</CardTitle>
       <div>
         <span>{email}</span>
       </div>
-    </Card.Session>
+    </CardContent>
   );
 }
 
@@ -49,11 +53,12 @@ Email.propTypes = {
 
 function Status({ status }) {
   return (
-    <Card.Session title="Status">
+    <CardContent className="pt-3 border-t border-border">
+      <CardTitle className="mb-2">Status</CardTitle>
       <div>
         <span>{parseInt(status, 10) === 1 ? 'Enabled' : 'Disabled'}</span>
       </div>
-    </Card.Session>
+    </CardContent>
   );
 }
 
@@ -66,6 +71,7 @@ export default function General({ customer }) {
     <Card>
       <Area
         id="customerEditInformation"
+        className="space-y-3"
         coreComponents={[
           {
             component: {

package/src/modules/customer/pages/admin/customerEdit+customerNew/OrderHistory.jsx

@@ -1,19 +1,31 @@
-import { Card } from '@components/admin/Card';
+import { Card } from '@components/common/ui/Card';
+import {
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@components/common/ui/Card.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 export default function OrderHistory({ customer: { orders = [] } }) {
   return (
     <Card title="Order History">
+      <CardHeader>
+        <CardTitle>Order History</CardTitle>
+        <CardDescription>
+          Recently placed orders by this customer
+        </CardDescription>
+      </CardHeader>
       {orders.length < 1 && (
-        <Card.Session>
+        <CardContent>
           <div>Customer does not have any order yet.</div>
-        </Card.Session>
+        </CardContent>
       )}
       {orders.length > 0 && (
         <>
           {orders.map((order) => (
-            <Card.Session key={order.uuid}>
+            <CardContent key={order.uuid}>
               <div className="flex justify-between items-center gap-2">
                 <div>
                   <a
@@ -36,7 +48,7 @@ export default function OrderHistory({ customer: { orders = [] } }) {
                   <span>{order.grandTotal.text}</span>
                 </div>
               </div>
-            </Card.Session>
+            </CardContent>
           ))}
         </>
       )}