@evershop/evershop 2.1.0 → 2.1.1

package/src/modules/customer/pages/admin/customerGrid/Grid.jsx

@@ -1,12 +1,36 @@
-import { Card } from '@components/admin/Card';
-import { Filter } from '@components/admin/grid/Filter';
+import { GridPagination } from '@components/admin/grid/GridPagination';
 import { SortableHeader } from '@components/admin/grid/header/Sortable';
-import { Pagination } from '@components/admin/grid/Pagination';
 import { Status } from '@components/admin/Status.js';
 import Area from '@components/common/Area';
 import { Form } from '@components/common/form/Form.js';
 import { InputField } from '@components/common/form/InputField.js';
 import { useAlertContext } from '@components/common/modal/Alert';
+import { Button } from '@components/common/ui/Button.js';
+import { ButtonGroup } from '@components/common/ui/ButtonGroup.js';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from '@components/common/ui/Card.js';
+import { Checkbox } from '@components/common/ui/Checkbox.js';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue
+} from '@components/common/ui/Select.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow
+} from '@components/common/ui/Table.js';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
@@ -38,15 +62,14 @@ function Actions({ customers = [], selectedIds = [] }) {
           primaryAction: {
             title: 'Cancel',
             onAction: closeAlert,
-            variant: 'primary'
+            variant: 'secondary'
           },
           secondaryAction: {
             title: 'Disable',
             onAction: async () => {
               await updateCustomers(0);
             },
-            variant: 'critical',
-            isLoading: false
+            variant: 'destructive'
           }
         });
       }
@@ -60,15 +83,14 @@ function Actions({ customers = [], selectedIds = [] }) {
           primaryAction: {
             title: 'Cancel',
             onAction: closeAlert,
-            variant: 'primary'
+            variant: 'secondary'
           },
           secondaryAction: {
             title: 'Enable',
             onAction: async () => {
               await updateCustomers(1);
             },
-            variant: 'critical',
-            isLoading: false
+            variant: 'destructive'
           }
         });
       }
@@ -76,31 +98,27 @@ function Actions({ customers = [], selectedIds = [] }) {
   ];
 
   return (
-    <tr>
+    <TableRow>
       {selectedIds.length === 0 && null}
       {selectedIds.length > 0 && (
-        <td style={{ borderTop: 0 }} colSpan="100">
-          <div className="inline-flex border border-divider rounded justify-items-start">
-            <a href="#" className="font-semibold pt-2 pb-2 pl-4 pr-4">
-              {selectedIds.length} selected
-            </a>
+        <TableCell colSpan="100">
+          <ButtonGroup>
             {actions.map((action, i) => (
-              <a
+              <Button
                 key={i}
-                href="#"
+                variant={'outline'}
                 onClick={(e) => {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-2 pb-2 pl-4 pr-4 block border-l border-divider self-center"
               >
-                <span>{action.name}</span>
-              </a>
+                {action.name}
+              </Button>
             ))}
-          </div>
-        </td>
+          </ButtonGroup>
+        </TableCell>
       )}
-    </tr>
+    </TableRow>
   );
 }
 
@@ -130,242 +148,232 @@ export default function CustomerGrid({
 
   return (
     <Card>
-      <Card.Session
-        title={
-          <Form submitBtn={false} id="customerGridFilter">
-            <div className="flex gap-5 justify-center items-center">
-              <Area
-                id="customerGridFilter"
-                noOuter
-                coreComponents={[
-                  {
-                    component: {
-                      default: () => (
-                        <InputField
-                          name="keyword"
-                          placeholder="Search"
-                          defaultValue={
-                            currentFilters.find((f) => f.key === 'keyword')
-                              ?.value
-                          }
-                          onKeyPress={(e) => {
-                            // If the user press enter, we should submit the form
-                            if (e.key === 'Enter') {
-                              const url = new URL(document.location);
-                              const keyword = e.target?.value;
-                              if (keyword) {
-                                url.searchParams.set('keyword', keyword);
-                              } else {
-                                url.searchParams.delete('keyword');
-                              }
-                              window.location.href = url;
-                            }
-                          }}
-                        />
-                      )
-                    },
-                    sortOrder: 5
-                  },
-                  {
-                    component: {
-                      default: () => (
-                        <Filter
-                          options={[
-                            {
-                              label: 'Enabled',
-                              value: '1',
-                              onSelect: () => {
-                                const url = new URL(document.location);
-                                url.searchParams.set('status', 1);
-                                window.location.href = url;
-                              }
-                            },
-                            {
-                              label: 'Disabled',
-                              value: '0',
-                              onSelect: () => {
-                                const url = new URL(document.location);
-                                url.searchParams.set('status', 0);
-                                window.location.href = url;
-                              }
-                            }
-                          ]}
-                          selectedOption={
-                            currentFilters.find((f) => f.key === 'status')
-                              ? currentFilters.find((f) => f.key === 'status')
-                                  .value === '1'
-                                ? 'Enabled'
-                                : 'Disabled'
-                              : undefined
-                          }
-                          title="Status"
-                        />
-                      )
-                    },
-                    sortOrder: 10
-                  }
-                ]}
-                currentFilters={currentFilters}
-              />
-            </div>
-          </Form>
-        }
-        actions={[
-          {
-            variant: 'interactive',
-            name: 'Clear filter',
-            onAction: () => {
-              // Just get the url and remove all query params
-              const url = new URL(document.location);
-              url.search = '';
-              window.location.href = url.href;
-            }
-          }
-        ]}
-      />
-      <table className="listing sticky">
-        <thead>
-          <tr>
-            <th className="align-bottom">
-              <div className="form-field mb-0">
-                <input
-                  type="checkbox"
-                  onChange={(e) => {
-                    if (e.target.checked)
-                      setSelectedRows(customers.map((c) => c.uuid));
-                    else setSelectedRows([]);
-                  }}
-                />
-              </div>
-            </th>
+      <CardHeader className="flex justify-between">
+        <Form submitBtn={false} id="customerGridFilter">
+          <div className="flex gap-5 justify-center items-center">
             <Area
-              id="customerGridHeader"
+              id="customerGridFilter"
               noOuter
               coreComponents={[
                 {
                   component: {
                     default: () => (
-                      <SortableHeader
-                        title="Full Name"
-                        name="full_name"
-                        currentFilters={currentFilters}
-                      />
-                    )
-                  },
-                  sortOrder: 10
-                },
-                {
-                  component: {
-                    default: () => (
-                      <SortableHeader
-                        title="Email"
-                        name="email"
-                        currentFilters={currentFilters}
-                      />
-                    )
-                  },
-                  sortOrder: 15
-                },
-                {
-                  component: {
-                    default: () => (
-                      <SortableHeader
-                        title="Status"
-                        name="status"
-                        currentFilters={currentFilters}
+                      <InputField
+                        name="keyword"
+                        placeholder="Search"
+                        defaultValue={
+                          currentFilters.find((f) => f.key === 'keyword')?.value
+                        }
+                        onKeyPress={(e) => {
+                          // If the user press enter, we should submit the form
+                          if (e.key === 'Enter') {
+                            const url = new URL(document.location);
+                            const keyword = e.target?.value;
+                            if (keyword) {
+                              url.searchParams.set('keyword', keyword);
+                            } else {
+                              url.searchParams.delete('keyword');
+                            }
+                            window.location.href = url;
+                          }
+                        }}
                       />
                     )
                   },
-                  sortOrder: 20
+                  sortOrder: 5
                 },
                 {
                   component: {
                     default: () => (
-                      <SortableHeader
-                        title="Created At"
-                        name="created_at"
-                        currentFilters={currentFilters}
-                      />
+                      <Select
+                        value={
+                          currentFilters.find((f) => f.key === 'status')?.value
+                        }
+                        onValueChange={(value) => {
+                          const url = new URL(document.location);
+                          url.searchParams.set('status', value);
+                          window.location.href = url.href;
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue>Status</SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectLabel>Status</SelectLabel>
+                            <SelectItem value="1">Enabled</SelectItem>
+                            <SelectItem value="0">Disabled</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
                     )
                   },
-                  sortOrder: 25
+                  sortOrder: 10
                 }
               ]}
+              currentFilters={currentFilters}
             />
-          </tr>
-        </thead>
-        <tbody>
-          <Actions
-            customers={customers}
-            selectedIds={selectedRows}
-            setSelectedRows={setSelectedRows}
-          />
-          {customers.map((c) => (
-            <tr key={c.customerId}>
-              <td>
+          </div>
+        </Form>
+        <CardAction>
+          <Button
+            variant="link"
+            className={'hover:cursor-pointer'}
+            onClick={() => {
+              const url = new URL(document.location);
+              url.search = '';
+              window.location.href = url.href;
+            }}
+          >
+            Clear filter
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableCell className="align-bottom">
                 <div className="form-field mb-0">
-                  <input
-                    type="checkbox"
-                    checked={selectedRows.includes(c.uuid)}
-                    onChange={(e) => {
-                      if (e.target.checked) {
-                        setSelectedRows(selectedRows.concat([c.uuid]));
-                      } else {
-                        setSelectedRows(
-                          selectedRows.filter((row) => row !== c.uuid)
-                        );
-                      }
+                  <Checkbox
+                    onCheckedChange={(checked) => {
+                      if (checked)
+                        setSelectedRows(customers.map((c) => c.uuid));
+                      else setSelectedRows([]);
                     }}
                   />
                 </div>
-              </td>
+              </TableCell>
               <Area
-                id="customerGridRow"
-                row={c}
+                id="customerGridHeader"
                 noOuter
-                selectedRows={selectedRows}
-                setSelectedRows={setSelectedRows}
                 coreComponents={[
                   {
                     component: {
                       default: () => (
-                        <CustomerName name={c.fullName} url={c.editUrl} />
+                        <SortableHeader
+                          title="Full Name"
+                          name="full_name"
+                          currentFilters={currentFilters}
+                        />
                       )
                     },
                     sortOrder: 10
                   },
                   {
                     component: {
-                      default: ({ areaProps }) => <td>{c.email}</td>
+                      default: () => (
+                        <SortableHeader
+                          title="Email"
+                          name="email"
+                          currentFilters={currentFilters}
+                        />
+                      )
                     },
                     sortOrder: 15
                   },
                   {
                     component: {
-                      default: ({ areaProps }) => (
-                        <Status status={parseInt(c.status, 10)} />
+                      default: () => (
+                        <SortableHeader
+                          title="Status"
+                          name="status"
+                          currentFilters={currentFilters}
+                        />
                       )
                     },
                     sortOrder: 20
                   },
                   {
                     component: {
-                      default: () => <td>{c.createdAt.text}</td>
+                      default: () => (
+                        <SortableHeader
+                          title="Created At"
+                          name="created_at"
+                          currentFilters={currentFilters}
+                        />
+                      )
                     },
                     sortOrder: 25
                   }
                 ]}
               />
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {customers.length === 0 && (
-        <div className="flex w-full justify-center">
-          There is no customer to display
-        </div>
-      )}
-      <Pagination total={total} limit={limit} page={page} />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <Actions
+              customers={customers}
+              selectedIds={selectedRows}
+              setSelectedRows={setSelectedRows}
+            />
+            {customers.map((c) => (
+              <TableRow key={c.customerId}>
+                <TableCell>
+                  <div className="form-field mb-0">
+                    <Checkbox
+                      checked={selectedRows.includes(c.uuid)}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setSelectedRows(selectedRows.concat([c.uuid]));
+                        } else {
+                          setSelectedRows(
+                            selectedRows.filter((row) => row !== c.uuid)
+                          );
+                        }
+                      }}
+                    />
+                  </div>
+                </TableCell>
+                <Area
+                  id="customerGridRow"
+                  row={c}
+                  noOuter
+                  selectedRows={selectedRows}
+                  setSelectedRows={setSelectedRows}
+                  coreComponents={[
+                    {
+                      component: {
+                        default: () => (
+                          <CustomerName name={c.fullName} url={c.editUrl} />
+                        )
+                      },
+                      sortOrder: 10
+                    },
+                    {
+                      component: {
+                        default: ({ areaProps }) => (
+                          <TableCell>{c.email}</TableCell>
+                        )
+                      },
+                      sortOrder: 15
+                    },
+                    {
+                      component: {
+                        default: ({ areaProps }) => (
+                          <Status status={parseInt(c.status, 10)} />
+                        )
+                      },
+                      sortOrder: 20
+                    },
+                    {
+                      component: {
+                        default: () => <TableCell>{c.createdAt.text}</TableCell>
+                      },
+                      sortOrder: 25
+                    }
+                  ]}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {customers.length === 0 && (
+          <div className="flex w-full justify-center mt-3">
+            There is no customer to display
+          </div>
+        )}
+        <GridPagination total={total} limit={limit} page={page} />
+      </CardContent>
     </Card>
   );
 }

package/src/modules/customer/pages/admin/customerGrid/rows/CustomerName.tsx

@@ -1,3 +1,4 @@
+import { TableCell } from '@components/common/ui/Table.js';
 import React from 'react';
 
 interface CustomerNameProps {
@@ -7,12 +8,12 @@ interface CustomerNameProps {
 
 export function CustomerName({ url, name }: CustomerNameProps) {
   return (
-    <td>
+    <TableCell>
       <div>
         <a className="hover:underline font-semibold" href={url}>
           {name}
         </a>
       </div>
-    </td>
+    </TableCell>
   );
 }

package/src/modules/customer/pages/frontStore/all/CustomerIcon.tsx

@@ -1,4 +1,4 @@
-import { UserCircleIcon as Icon } from '@heroicons/react/24/outline';
+import { CircleUser } from 'lucide-react';
 import React from 'react';
 
 interface UserIconProps {
@@ -17,9 +17,9 @@ export default function UserIcon({
   loginUrl
 }: UserIconProps) {
   return (
-    <div className="self-center">
+    <div className="self-center customer-icon">
       <a href={customer ? accountUrl : loginUrl}>
-        <Icon width={25} height={25} />
+        <CircleUser className="w-5 h-5 text-foreground hover:text-primary" />
       </a>
     </div>
   );

package/src/modules/customer/pages/frontStore/login/LoginPage.tsx

@@ -1,3 +1,4 @@
+import { Card, CardContent } from '@components/common/ui/Card.js';
 import { CustomerLoginForm } from '@components/frontStore/customer/LoginForm.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
@@ -16,20 +17,27 @@ export default function LoginPage({
 }: LoginPageProps) {
   return (
     <div className="login__page flex flex-col justify-center items-center">
-      <CustomerLoginForm
-        title={_('Welcome Back!')}
-        subtitle={_('Please sign in to your account')}
-        redirectUrl={homeUrl}
-        onError={(error) => {
-          toast.error(error.message);
-        }}
-        className="flex justify-center items-center w-[30rem] max-w-max md:max-w-[80%] bg-white rounded-2xl p-6 shadow-lg border border-divider"
-      />
+      <Card className="flex justify-center items-center max-w-max md:max-w-[80%]">
+        <CardContent>
+          <CustomerLoginForm
+            title={_('Welcome Back!')}
+            subtitle={_('Please sign in to your account')}
+            redirectUrl={homeUrl}
+            onError={(error) => {
+              toast.error(error.message);
+            }}
+            className="w-120"
+          />
+        </CardContent>
+      </Card>
       <div className="login__page__options text-center mt-2 gap-5 flex justify-center">
         <a className="text-interactive hover:underline" href={registerUrl}>
           {_('Create an account')}
         </a>
-        <a className="text-red-500 hover:underline" href={forgotPasswordUrl}>
+        <a
+          className="text-destructive hover:underline"
+          href={forgotPasswordUrl}
+        >
           {_('Forgot your password?')}
         </a>
       </div>

package/src/modules/customer/pages/frontStore/register/RegisterPage.tsx

@@ -1,3 +1,4 @@
+import { Card, CardContent } from '@components/common/ui/Card.js';
 import { CustomerRegistrationForm } from '@components/frontStore/customer/RegistrationForm.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
@@ -10,19 +11,24 @@ interface RegisterPageProps {
 export default function RegisterPage({ homeUrl, loginUrl }: RegisterPageProps) {
   return (
     <div className="flex justify-center items-center flex-col gap-3">
-      <CustomerRegistrationForm
-        title={_('Create an account')}
-        subtitle={_('Join us for exclusive offers and order tracking')}
-        redirectUrl={homeUrl}
-        onError={(error) => {
-          toast.error(error);
-        }}
-        className="flex justify-center items-center w-[30rem] max-w-max md:max-w-[80%] bg-white rounded-2xl p-6 shadow-lg border border-divider"
-      />
+      <Card className="flex justify-center items-center max-w-max md:max-w-[80%]">
+        <CardContent>
+          <CustomerRegistrationForm
+            title={_('Create an account')}
+            subtitle={_('Join us for exclusive offers and order tracking')}
+            redirectUrl={homeUrl}
+            onError={(error) => {
+              toast.error(error);
+            }}
+            className="w-120"
+          />
+        </CardContent>
+      </Card>
+
       <div className="text-center">
         <span>
           {_('Already have an account?')}
-          <a className="text-interactive" href={loginUrl}>
+          <a className="text-primary hover:underline" href={loginUrl}>
             {' '}
             {_('Login')}{' '}
           </a>