@evershop/evershop 2.1.0 → 2.1.2

package/src/modules/promotion/pages/admin/couponEdit+couponNew/components/CollectionConditionValueSelector.tsx

@@ -1,6 +1,12 @@
 import { CollectionSelector } from '@components/admin/CollectionSelector.js';
-import { Modal } from '@components/common/modal/Modal.js';
-import { useModal } from '@components/common/modal/useModal.js';
+import { Button } from '@components/common/ui/Button.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@components/common/ui/Dialog.js';
 import React from 'react';
 
 export const CollectionConditionValueSelector: React.FC<{
@@ -8,19 +14,15 @@ export const CollectionConditionValueSelector: React.FC<{
   updateCondition: (values: number | Array<number>) => void;
   isMulti: boolean;
 }> = ({ selectedValues, updateCondition, isMulti }) => {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
   const selectedIds = React.useRef<number[]>(
     Array.isArray(selectedValues) ? selectedValues.map(Number) : []
   );
-  const modal = useModal({
-    onAfterClose: () => {
-      updateCondition(selectedIds.current);
-    }
-  });
 
   const onSelect = async (id) => {
     if (!isMulti) {
       selectedIds.current = [id];
-      modal.close();
+      setDialogOpen(false);
       return Promise.resolve();
     }
 
@@ -38,41 +40,43 @@ export const CollectionConditionValueSelector: React.FC<{
   };
 
   return (
-    <div>
-      <a
-        href="#"
-        className="text-interactive hover:underline"
-        onClick={(e) => {
-          e.preventDefault();
-          modal.open();
-        }}
-      >
-        {selectedIds.current.map((id, index) => (
-          <span key={id}>
-            {index === 0 && <span className="italic">&lsquo;{id}&rsquo;</span>}
-            {index === 1 && (
-              <span> and {selectedIds.current.length - 1} more</span>
-            )}
-          </span>
-        ))}
-        {selectedIds.current.length === 0 && <span>Choose Collections</span>}
-      </a>
-      <Modal
-        title="Select Products"
-        onClose={modal.close}
-        isOpen={modal.isOpen}
-      >
-        <div className="overflow-auto" style={{ maxHeight: '60vh' }}>
-          <CollectionSelector
-            onSelect={onSelect}
-            onUnSelect={onUnSelect}
-            selectedCollections={selectedIds.current.map((id) => ({
-              collectionId: id,
-              uuid: undefined
-            }))}
-          />
-        </div>
-      </Modal>
-    </div>
+    <Dialog
+      open={dialogOpen}
+      onOpenChange={(open) => setDialogOpen(open)}
+      onOpenChangeComplete={(open) => {
+        if (!open) {
+          updateCondition(selectedIds.current);
+        }
+      }}
+    >
+      <DialogTrigger>
+        <Button variant={'link'}>
+          {selectedIds.current.map((id, index) => (
+            <span key={id}>
+              {index === 0 && (
+                <span className="italic">&lsquo;{id}&rsquo;</span>
+              )}
+              {index === 1 && (
+                <span> and {selectedIds.current.length - 1} more</span>
+              )}
+            </span>
+          ))}
+          {selectedIds.current.length === 0 && <span>Choose Collections</span>}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Choose Collections</DialogTitle>
+        </DialogHeader>
+        <CollectionSelector
+          onSelect={onSelect}
+          onUnSelect={onUnSelect}
+          selectedCollections={selectedIds.current.map((id) => ({
+            collectionId: id,
+            uuid: undefined
+          }))}
+        />
+      </DialogContent>
+    </Dialog>
   );
 };

package/src/modules/promotion/pages/admin/couponEdit+couponNew/components/RequireProducts.tsx

@@ -1,6 +1,15 @@
 import { InputField } from '@components/common/form/InputField.js';
 import { NumberField } from '@components/common/form/NumberField.js';
 import { SelectField } from '@components/common/form/SelectField.js';
+import { Button } from '@components/common/ui/Button.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@components/common/ui/Table.js';
 import React, { useEffect } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { options, operators, Operator } from './conditionCriterias.js';
@@ -24,7 +33,9 @@ interface RequiredProducts {
   };
 }
 
-export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
+export function RequiredProducts({
+  requiredProducts = []
+}: RequiredProductsProps) {
   const { setValue, watch } = useFormContext();
   const { fields, append, remove, replace } = useFieldArray<RequiredProducts>({
     name: 'condition.required_products'
@@ -35,34 +46,33 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
   }, []);
 
   const fieldsWatch = watch('condition.required_products');
-
   return (
     <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
       <div>
         <span>Order must contains product matched bellow conditions(All)</span>
       </div>
-      <table className="table table-auto" style={{ marginTop: 0 }}>
-        <thead>
-          <tr>
-            <th>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
               <span>Key</span>
-            </th>
-            <th>
+            </TableHead>
+            <TableHead>
               <span>Operator</span>
-            </th>
-            <th>
+            </TableHead>
+            <TableHead>
               <span>Value</span>
-            </th>
-            <th>
+            </TableHead>
+            <TableHead>
               <span>Minimum quantity</span>
-            </th>
-            <th> </th>
-          </tr>
-        </thead>
-        <tbody>
+            </TableHead>
+            <TableHead> </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {fields.map((p, i) => (
-            <tr key={p.id}>
-              <td>
+            <TableRow key={p.id}>
+              <TableCell>
                 {p.editable ? (
                   <SelectField
                     name={`condition.required_products.${i}.key`}
@@ -92,8 +102,8 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
                     />
                   </>
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 {p.editable ? (
                   <SelectField
                     options={operators.map((operator) => ({
@@ -117,15 +127,16 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
                       readOnly
                       name={`condition.required_products.${i}.operatorlabel`}
                       value={
-                        operators.find((c) => c.key === p.operator)?.label ||
-                        'Unknown'
+                        operators.find(
+                          (c) => c.key === fieldsWatch[i]?.operator
+                        )?.label || 'Unknown'
                       }
                       wrapperClassName="form-field mb-0"
                     />
                   </>
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 {fieldsWatch[i].key === 'price' && (
                   <NumberField
                     name={`condition.required_products.${i}.value`}
@@ -152,8 +163,8 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
                     />
                   </>
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 <div style={{ width: '80px' }}>
                   <NumberField
                     name={`condition.required_products.${i}.qty`}
@@ -174,11 +185,11 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
                     wrapperClassName="form-field mb-0"
                   />
                 </div>
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 <a
                   href="#"
-                  className="text-critical"
+                  className="text-destructive"
                   onClick={(e) => {
                     e.preventDefault();
                     remove(i);
@@ -200,32 +211,15 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
                     />
                   </svg>
                 </a>
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           ))}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
       <div className="mt-2 flex justify-start">
-        <div className="items-center flex">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1.5rem"
-            height="1.5rem"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-            />
-          </svg>
-        </div>
         <div className="pl-2">
-          <a
-            href="#"
+          <Button
+            variant={'outline'}
             onClick={(e) => {
               e.preventDefault();
               append({
@@ -238,13 +232,9 @@ export function RequiredProducts({ requiredProducts }: RequiredProductsProps) {
             }}
           >
             <span>Add product</span>
-          </a>
+          </Button>
         </div>
       </div>
     </div>
   );
 }
-
-RequiredProducts.defaultProps = {
-  requiredProducts: []
-};

package/src/modules/promotion/pages/admin/couponEdit+couponNew/components/SkuConditionValueSelector.tsx

@@ -1,6 +1,12 @@
 import { ProductSelector } from '@components/admin/ProductSelector.js';
-import { Modal } from '@components/common/modal/Modal.js';
-import { useModal } from '@components/common/modal/useModal.js';
+import { Button } from '@components/common/ui/Button.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@components/common/ui/Dialog.js';
 import React from 'react';
 
 export const SkuConditionValueSelector: React.FC<{
@@ -8,18 +14,14 @@ export const SkuConditionValueSelector: React.FC<{
   updateCondition: (values: string | Array<string>) => void;
   isMulti: boolean;
 }> = ({ selectedValues, updateCondition, isMulti }) => {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
   const skus = Array.isArray(selectedValues) ? selectedValues : [];
   const selectedSKUs = React.useRef(skus || []);
-  const modal = useModal({
-    onAfterClose: () => {
-      updateCondition(selectedSKUs.current);
-    }
-  });
 
   const onSelect = (sku) => {
     if (!isMulti) {
       selectedSKUs.current = [sku];
-      modal.close();
+      setDialogOpen(false);
     } else {
       selectedSKUs.current = [...selectedSKUs.current, sku];
     }
@@ -31,42 +33,44 @@ export const SkuConditionValueSelector: React.FC<{
   };
 
   return (
-    <div>
-      <a
-        href="#"
-        className="text-interactive hover:underline"
-        onClick={(e) => {
-          e.preventDefault();
-          modal.open();
-        }}
-      >
-        {selectedSKUs.current.map((sku, index) => (
-          <span key={sku}>
-            {index === 0 && <span className="italic">&lsquo;{sku}&rsquo;</span>}
-            {index === 1 && (
-              <span> and {selectedSKUs.current.length - 1} more</span>
-            )}
-          </span>
-        ))}
-        {selectedSKUs.current.length === 0 && <span>Choose SKUs</span>}
-      </a>
-      <Modal
-        title="Select Products"
-        onClose={modal.close}
-        isOpen={modal.isOpen}
-      >
-        <div className="overflow-auto" style={{ maxHeight: '60vh' }}>
-          <ProductSelector
-            onSelect={onSelect}
-            onUnSelect={onUnSelect}
-            selectedProducts={selectedSKUs.current.map((sku) => ({
-              sku,
-              uuid: undefined,
-              productId: undefined
-            }))}
-          />
-        </div>
-      </Modal>
-    </div>
+    <Dialog
+      open={dialogOpen}
+      onOpenChange={(open) => setDialogOpen(open)}
+      onOpenChangeComplete={(open) => {
+        if (!open) {
+          updateCondition(selectedSKUs.current);
+        }
+      }}
+    >
+      <DialogTrigger>
+        <Button variant={'link'}>
+          {selectedSKUs.current.map((sku, index) => (
+            <span key={sku}>
+              {index === 0 && (
+                <span className="italic">&lsquo;{sku}&rsquo;</span>
+              )}
+              {index === 1 && (
+                <span> and {selectedSKUs.current.length - 1} more</span>
+              )}
+            </span>
+          ))}
+          {selectedSKUs.current.length === 0 && <span>Choose SKUs</span>}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className={'max-w-[80vw]'}>
+        <DialogHeader>
+          <DialogTitle>Select Products by SKU</DialogTitle>
+        </DialogHeader>
+        <ProductSelector
+          onSelect={onSelect}
+          onUnSelect={onUnSelect}
+          selectedProducts={selectedSKUs.current.map((sku) => ({
+            sku,
+            uuid: undefined,
+            productId: undefined
+          }))}
+        />
+      </DialogContent>
+    </Dialog>
   );
 };

package/src/modules/promotion/pages/admin/couponEdit+couponNew/components/TargetProducts.tsx

@@ -1,6 +1,16 @@
 import { InputField } from '@components/common/form/InputField.js';
 import { NumberField } from '@components/common/form/NumberField.js';
 import { SelectField } from '@components/common/form/SelectField.js';
+import { Button } from '@components/common/ui/Button.js';
+import { Item, ItemContent, ItemTitle } from '@components/common/ui/Item.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@components/common/ui/Table.js';
 import React, { useEffect } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { options, operators, Operator } from './conditionCriterias.js';
@@ -75,25 +85,25 @@ function Products({
           <div>quantity of products are matched bellow conditions(All)</div>
         </div>
       </div>
-      <table className="table table-bordered" style={{ marginTop: 0 }}>
-        <thead>
-          <tr>
-            <th>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
               <span>Key</span>
-            </th>
-            <th>
+            </TableHead>
+            <TableHead>
               <span>Operator</span>
-            </th>
-            <th>
+            </TableHead>
+            <TableHead>
               <span>Value</span>
-            </th>
-            <th> </th>
-          </tr>
-        </thead>
-        <tbody>
+            </TableHead>
+            <TableHead> </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {fields.map((product, index) => (
-            <tr key={product.id}>
-              <td>
+            <TableRow key={product.id}>
+              <TableCell>
                 {product.editable ? (
                   <SelectField
                     name={`target_products.products.${index}.key`}
@@ -125,8 +135,8 @@ function Products({
                     />
                   </>
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 {product.editable ? (
                   <SelectField
                     name={`target_products.products.${index}.operator`}
@@ -153,14 +163,15 @@ function Products({
                       readOnly
                       wrapperClassName="form-field mb-0"
                       value={
-                        options.find((c) => c.key === product.operator)
-                          ?.label || 'Unknown'
+                        operators.find(
+                          (c) => c.key === fieldWatch[index]?.operator
+                        )?.label || 'Unknown'
                       }
                     />
                   </>
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 {fieldWatch[index].key === 'price' && (
                   <NumberField
                     name={`target_products.products.${index}.value`}
@@ -187,11 +198,11 @@ function Products({
                     />
                   </>
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 <a
                   href="#"
-                  className="text-critical"
+                  className="text-destructive"
                   onClick={(e) => {
                     e.preventDefault();
                     remove(index);
@@ -213,32 +224,15 @@ function Products({
                     />
                   </svg>
                 </a>
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           ))}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
       <div className="mt-2 flex justify-start">
-        <div className="items-center flex">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1.5rem"
-            height="1.5rem"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-            />
-          </svg>
-        </div>
         <div className="pl-2">
-          <a
-            href="#"
+          <Button
+            variant={'outline'}
             onClick={(e) => {
               e.preventDefault();
               append({
@@ -248,10 +242,9 @@ function Products({
                 editable: true
               });
             }}
-            className=""
           >
             <span>Add product</span>
-          </a>
+          </Button>
         </div>
       </div>
     </div>
@@ -276,9 +269,11 @@ export function TargetProducts({
   }
 
   return (
-    <div>
-      <h3 className="card-title">Target products</h3>
-      <Products targetProducts={products} maxQty={maxQty} />
-    </div>
+    <Item variant={'outline'} className="mt-6">
+      <ItemContent>
+        <ItemTitle>Target Products</ItemTitle>
+        <Products targetProducts={products} maxQty={maxQty} />
+      </ItemContent>
+    </Item>
   );
 }