Merge branch 'dev' into e2e-integrate

Author: treoden

.gitignore

@@ -29,4 +29,5 @@ cypress
 .prettierignore
 .prettierrc
 mysqlToPostgres.js
-/docs
+/docs
+extensions

package-lock.json

@@ -53,6 +53,7 @@
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "dependencies": {
+    "@sendgrid/mail": "^8.1.6",
     "@types/react-slick": "^0.23.13",
     "@types/uuid": "^10.0.0",
     "uuid": "^13.0.0"

package.json

@@ -23,6 +23,10 @@
       "import": "./dist/lib/helpers.js",
       "types": "./dist/lib/helpers.d.ts"
     },
+    "./lib/mail/*": {
+      "import": "./dist/lib/mail/*.js",
+      "types": "./dist/lib/mail/*.d.ts"
+    },
     "./lib/util/*": {
       "import": "./dist/lib/util/*.js",
       "types": "./dist/lib/util/*.d.ts"
@@ -183,6 +187,7 @@
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "graphql-type-json": "^0.3.2",
+    "handlebars": "^4.7.8",
     "html-entities": "^2.3.3",
     "html-webpack-plugin": "^5.5.0",
     "immer": "^10.1.1",
@@ -210,6 +215,7 @@
     "react-slick": "^0.31.0",
     "react-toastify": "^6.2.0",
     "recharts": "^2.0.9",
+    "sanitize-html": "^2.17.0",
     "sass": "^1.53.0",
     "sass-loader": "^13.0.2",
     "semver": "^7.6.3",
@@ -245,6 +251,7 @@
     "@types/node": "^22.14.1",
     "@types/pg": "^8.15.2",
     "@types/react": "^19.1.2",
+    "@types/sanitize-html": "^2.16.0",
     "copyfiles": "^2.4.1",
     "typescript": "^5.8.3"
   }

packages/evershop/package.json

@@ -255,7 +255,7 @@ async function getOverrideCandidates(): Promise<string[]> {
 }
 
 function getCurrentTheme(): string {
-  const theme = getConfig<string>('system.theme');
+  const theme = getConfig('system.theme');
   if (theme) {
     return theme;
   } else {

packages/evershop/src/bin/theme/twizz.ts

@@ -234,8 +234,6 @@ const FileBrowser: React.FC<{
   };
 
   // Create a function to fetch files and folders to avoid code duplication
-  const [apiReady, setApiReady] = React.useState(false);
-
   const fetchFilesAndFolders = React.useCallback(() => {
     if (!browserApiRef.current) {
       return;
@@ -259,20 +257,6 @@ const FileBrowser: React.FC<{
       .finally(() => setLoading(false));
   }, [currentPath]);
 
-  // Track when the browserApiRef becomes available
-  React.useEffect(() => {
-    if (browserApiRef.current && browserApiRef.current !== '' && !apiReady) {
-      setApiReady(true);
-    }
-  }, [browserApiRef.current, apiReady]);
-
-  // Fetch data when either the path changes or the API becomes ready
-  React.useEffect(() => {
-    if (apiReady) {
-      fetchFilesAndFolders();
-    }
-  }, [apiReady, currentPath, fetchFilesAndFolders]);
-
   const [result] = useQuery({
     query: GetApisQuery
   });
@@ -296,6 +280,12 @@ const FileBrowser: React.FC<{
     deleteApiRef.current = data.deleteApi;
     uploadApiRef.current = data.uploadApi;
     folderCreateApiRef.current = data.folderCreateApi;
+
+    // Fetch files and folders when APIs are ready
+    React.useEffect(() => {
+      fetchFilesAndFolders();
+    }, [currentPath, fetchFilesAndFolders]);
+
     return (
       <div className="file-browser">
         {loading === true && (
@@ -342,20 +332,22 @@ const FileBrowser: React.FC<{
                         Root
                       </a>
                     </div>
-                    {currentPath.map((f, index) => (
-                      <div key={index}>
-                        <span>/</span>
-                        <a
-                          className="text-primary hover:underline"
-                          href="#"
-                          onClick={(e) =>
-                            onSelectFolderFromBreadcrumb(e, f.index)
-                          }
-                        >
-                          {f.name}
-                        </a>
-                      </div>
-                    ))}
+                    {currentPath
+                      .filter((f) => f.name !== '')
+                      .map((f, index) => (
+                        <div key={index}>
+                          <span>/</span>
+                          <a
+                            className="text-primary hover:underline"
+                            href="#"
+                            onClick={(e) =>
+                              onSelectFolderFromBreadcrumb(e, f.index)
+                            }
+                          >
+                            {f.name}
+                          </a>
+                        </div>
+                      ))}
                   </div>
                 </div>
                 <ul className="mt-4 mb-4">

packages/evershop/src/components/admin/FileBrowser.tsx

@@ -85,8 +85,11 @@ const Upload: React.FC<{
   const id = uniqid();
   return (
     <div className="uploader grid-item">
-      <div className="uploader-icon text-primary">
-        <label htmlFor={id}>
+      <div className="uploader-icon text-primary w-full h-full">
+        <label
+          htmlFor={id}
+          className="w-full h-full flex items-center justify-center cursor-pointer"
+        >
           {uploading ? (
             <Spinner
               width={isSingleMode ? 40 : 25}

packages/evershop/src/components/admin/ImageUploader.tsx

@@ -9,21 +9,39 @@ export interface NavigationItemProps {
 
 export function NavigationItem({ Icon, url, title }: NavigationItemProps) {
   const [isActive, setIsActive] = React.useState(false);
+
   React.useEffect(() => {
-    const currentUrl = window.location.href;
-    const baseUrl = window.location.origin;
-    const check = currentUrl.split(baseUrl + url);
-    if (check.length === 2 && url.indexOf('products/new') === -1) {
-      // TODO: Fix me
-      if (url.split('/').length === 2) {
-        if (check[1] === '' || !/^\/[a-zA-Z1-9]/.test(check[1])) {
+    const checkActive = () => {
+      const currentUrl = window.location.href;
+      const currentUrlObj = new URL(currentUrl);
+      const menuUrlObj = new URL(url);
+
+      const currentPath = currentUrlObj.pathname;
+      const menuPath = menuUrlObj.pathname;
+
+      if (currentPath === menuPath) {
+        setIsActive(true);
+        return;
+      }
+
+      const menuSegments = menuPath.split('/').filter(Boolean);
+
+      if (menuSegments.length >= 2 && currentPath.startsWith(menuPath + '/')) {
+        const remainingPath = currentPath.substring(menuPath.length + 1);
+        const nextSegment = remainingPath.split('/')[0];
+
+        const actionWords = ['new', 'create', 'add'];
+        if (!actionWords.includes(nextSegment.toLowerCase())) {
           setIsActive(true);
+          return;
         }
-      } else {
-        setIsActive(true);
       }
-    }
-  }, []);
+
+      setIsActive(false);
+    };
+
+    checkActive();
+  }, [url]);
 
   return (
     <li className={isActive ? 'active nav-item' : 'nav-item'}>

packages/evershop/src/components/admin/NavigationItem.tsx

@@ -188,7 +188,7 @@ function TableContent<T = any>({
   emptyMessage: string;
   className: string;
 }) {
-  const { columns, tableData, tableName } = useTableContext<T>();
+  const { columns, tableData } = useTableContext<T>();
 
   const handleSort = (key: string) => {
     if (!onSort) return;
@@ -218,14 +218,12 @@ function TableContent<T = any>({
                     onClick={() => col.sortable && handleSort(col.key)}
                     style={{ width: col.width }}
                   >
-                    <div className="flex items-center space-x-1">
-                      <span>{col.header.label}</span>
-                      {col.sortable && currentSort?.key === col.key && (
-                        <span className="text-blue-500">
-                          {currentSort.direction === 'asc' ? '↑' : '↓'}
-                        </span>
-                      )}
-                    </div>
+                    <span>{col.header.label}</span>
+                    {col.sortable && currentSort?.key === col.key && (
+                      <span className="text-blue-500">
+                        {currentSort.direction === 'asc' ? '↑' : '↓'}
+                      </span>
+                    )}
                   </TableHead>
                 ))}
             </TableRow>

packages/evershop/src/components/common/ExtendableTable.tsx

@@ -37,6 +37,7 @@ export function DateField<T extends FieldValues = FieldValues>({
   className,
   min,
   max,
+  defaultValue,
   ...props
 }: DateFieldProps<T>) {
   const {
@@ -90,6 +91,7 @@ export function DateField<T extends FieldValues = FieldValues>({
       <Controller
         name={name}
         control={control}
+        defaultValue={defaultValue as any}
         rules={validationRules}
         render={({ field }) => (
           <InputGroup>