@akinon/pz-similar-products 1.92.0-rc.27 → 1.92.0-snapshot-ZERO-3457-20250627111231

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +2 -40
  2. package/README.md +3 -30
  3. package/package.json +1 -1
  4. package/src/hooks/use-similar-products.ts +0 -9
  5. package/src/types/index.ts +0 -15
  6. package/src/views/filters.tsx +646 -690
  7. package/src/views/image-search.tsx +86 -98
  8. package/src/views/main.tsx +3 -11
  9. package/src/views/results.tsx +5 -7
  10. package/src/views/search-modal.tsx +0 -4
package/src/views/image-search.tsx CHANGED
@@ -79,126 +79,114 @@ export function ImageSearchModal({
79
79
  };
80
80
 
81
81
  return (
82
- <>
83
- {isOpen && (
84
- <div
85
- className={twMerge(
86
- 'fixed inset-0 bg-black/50 z-[60]',
87
- settings?.customStyles?.imageSearchModalOverlay
88
- )}
89
- onClick={() => setIsOpen(false)}
90
- />
91
- )}
92
-
93
- <Modal
94
- portalId="image-search-modal"
95
- title={t('common.search.image_search.title')}
96
- open={isOpen}
97
- setOpen={setIsOpen}
98
- className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${
99
- className || ''
100
- }`}
82
+ <Modal
83
+ portalId="image-search-modal"
84
+ title={t('common.search.image_search.title')}
85
+ open={isOpen}
86
+ setOpen={setIsOpen}
87
+ className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${
88
+ className || ''
89
+ }`}
90
+ >
91
+ <div
92
+ className={twMerge(
93
+ 'grid grid-cols-1 md:grid-cols-2 gap-4',
94
+ settings?.customStyles?.imageSearchContent
95
+ )}
101
96
  >
102
97
  <div
103
98
  className={twMerge(
104
- 'grid grid-cols-1 md:grid-cols-2 gap-4',
105
- settings?.customStyles?.imageSearchContent
99
+ 'md:col-span-1 p-4',
100
+ settings?.customStyles?.imageSearchUploadSection
106
101
  )}
107
102
  >
103
+ <p
104
+ className={twMerge(
105
+ 'mb-4 text-lg font-medium',
106
+ settings?.customStyles?.imageSearchUploadTitle
107
+ )}
108
+ >
109
+ {t('common.search.image_search.upload_image')}
110
+ </p>
108
111
  <div
109
112
  className={twMerge(
110
- 'md:col-span-1 p-4',
111
- settings?.customStyles?.imageSearchUploadSection
113
+ 'border-2 border-dashed border-gray-300 rounded-lg p-8 text-center',
114
+ settings?.customStyles?.imageSearchUploadArea
112
115
  )}
113
116
  >
114
- <p
117
+ <Input
118
+ type="file"
119
+ ref={fileInputRef}
120
+ onChange={handleFileSelect}
121
+ accept="image/*"
122
+ className="hidden"
123
+ />
124
+ <Button
115
125
  className={twMerge(
116
- 'mb-4 text-lg font-medium',
117
- settings?.customStyles?.imageSearchUploadTitle
126
+ 'w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md',
127
+ settings?.customStyles?.imageSearchUploadButton
118
128
  )}
129
+ onClick={() => fileInputRef.current?.click()}
119
130
  >
120
- {t('common.search.image_search.upload_image')}
121
- </p>
122
- <div
123
- className={twMerge(
124
- 'border-2 border-dashed border-gray-300 rounded-lg p-8 text-center',
125
- settings?.customStyles?.imageSearchUploadArea
126
- )}
127
- >
128
- <Input
129
- type="file"
130
- ref={fileInputRef}
131
- onChange={handleFileSelect}
132
- accept="image/*"
133
- className="hidden"
134
- />
135
- <Button
136
- className={twMerge(
137
- 'w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md',
138
- settings?.customStyles?.imageSearchUploadButton
139
- )}
140
- onClick={() => fileInputRef.current?.click()}
141
- >
142
- {t('common.search.image_search.select_image')}
143
- </Button>
144
- </div>
131
+ {t('common.search.image_search.select_image')}
132
+ </Button>
145
133
  </div>
146
- <div
134
+ </div>
135
+ <div
136
+ className={twMerge(
137
+ 'md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4',
138
+ settings?.customStyles?.imageSearchTipsSection
139
+ )}
140
+ >
141
+ <p
147
142
  className={twMerge(
148
- 'md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4',
149
- settings?.customStyles?.imageSearchTipsSection
143
+ 'mb-2 font-medium',
144
+ settings?.customStyles?.imageSearchTipsTitle
150
145
  )}
151
146
  >
152
- <p
147
+ {t('common.search.image_search.best_results')}
148
+ </p>
149
+ <ul
150
+ className={twMerge(
151
+ 'text-left list-disc pl-5 text-sm text-gray-600',
152
+ settings?.customStyles?.imageSearchTipsList
153
+ )}
154
+ >
155
+ <li
153
156
  className={twMerge(
154
- 'mb-2 font-medium',
155
- settings?.customStyles?.imageSearchTipsTitle
157
+ 'mb-2',
158
+ settings?.customStyles?.imageSearchTipsItem
156
159
  )}
157
160
  >
158
- {t('common.search.image_search.best_results')}
159
- </p>
160
- <ul
161
+ {t('common.search.image_search.tip_1')}
162
+ </li>
163
+ <li
161
164
  className={twMerge(
162
- 'text-left list-disc pl-5 text-sm text-gray-600',
163
- settings?.customStyles?.imageSearchTipsList
165
+ 'mb-2',
166
+ settings?.customStyles?.imageSearchTipsItem
164
167
  )}
165
168
  >
166
- <li
167
- className={twMerge(
168
- 'mb-2',
169
- settings?.customStyles?.imageSearchTipsItem
170
- )}
171
- >
172
- {t('common.search.image_search.tip_1')}
173
- </li>
174
- <li
175
- className={twMerge(
176
- 'mb-2',
177
- settings?.customStyles?.imageSearchTipsItem
178
- )}
179
- >
180
- {t('common.search.image_search.tip_2')}
181
- </li>
182
- <li
183
- className={twMerge(
184
- 'mb-2',
185
- settings?.customStyles?.imageSearchTipsItem
186
- )}
187
- >
188
- {t('common.search.image_search.tip_3')}
189
- </li>
190
- <li
191
- className={twMerge(
192
- 'mb-2',
193
- settings?.customStyles?.imageSearchTipsItem
194
- )}
195
- >
196
- {t('common.search.image_search.tip_4')}
197
- </li>
198
- </ul>
199
- </div>
169
+ {t('common.search.image_search.tip_2')}
170
+ </li>
171
+ <li
172
+ className={twMerge(
173
+ 'mb-2',
174
+ settings?.customStyles?.imageSearchTipsItem
175
+ )}
176
+ >
177
+ {t('common.search.image_search.tip_3')}
178
+ </li>
179
+ <li
180
+ className={twMerge(
181
+ 'mb-2',
182
+ settings?.customStyles?.imageSearchTipsItem
183
+ )}
184
+ >
185
+ {t('common.search.image_search.tip_4')}
186
+ </li>
187
+ </ul>
200
188
  </div>
201
- </Modal>
202
- </>
189
+ </div>
190
+ </Modal>
203
191
  );
204
192
  }
package/src/views/main.tsx CHANGED
@@ -56,8 +56,7 @@ export function SimilarProductsPlugin({
56
56
  loadedPages,
57
57
  fetchSimilarProductsByImageUrl,
58
58
  fetchSimilarProductsByImageCrop,
59
- clearError,
60
- clearResults
59
+ clearError
61
60
  } = useSimilarProducts(product);
62
61
 
63
62
  const {
@@ -109,7 +108,6 @@ export function SimilarProductsPlugin({
109
108
  if (!isOpen) {
110
109
  setHasInitialSearchDone(false);
111
110
  clearError();
112
- clearResults();
113
111
  }
114
112
  }, [
115
113
  isOpen,
@@ -117,8 +115,7 @@ export function SimilarProductsPlugin({
117
115
  activeIndex,
118
116
  hasUploadedImage,
119
117
  hasInitialSearchDone,
120
- clearError,
121
- clearResults
118
+ clearError
122
119
  ]);
123
120
 
124
121
  useEffect(() => {
@@ -145,11 +142,6 @@ export function SimilarProductsPlugin({
145
142
  }
146
143
  };
147
144
 
148
- const handleModalClose = () => {
149
- resetCrop();
150
- onClose();
151
- };
152
-
153
145
  const ModalComponent =
154
146
  settings.customRenderers?.Modal || SimilarProductsModal;
155
147
  const ImageSearchModalComponent =
@@ -159,7 +151,7 @@ export function SimilarProductsPlugin({
159
151
  <>
160
152
  <ModalComponent
161
153
  isOpen={isOpen}
162
- onClose={handleModalClose}
154
+ onClose={onClose}
163
155
  searchResults={searchResults}
164
156
  resultsKey={resultsKey}
165
157
  isLoading={isLoading}
package/src/views/results.tsx CHANGED
@@ -526,14 +526,10 @@ export function SimilarProductsResultsGrid({
526
526
  );
527
527
  };
528
528
 
529
- if (isLoading && (!searchResults || !searchResults.products?.length)) {
529
+ if (isLoading && (!searchResults || !searchResults.products)) {
530
530
  return renderLoadingState();
531
531
  }
532
532
 
533
- if (!isLoading && searchResults && searchResults.products?.length === 0) {
534
- return renderEmptyState();
535
- }
536
-
537
533
  const renderLoadingOverlay = () => {
538
534
  if (settings?.customRenderers?.render?.resultsGrid?.renderLoadingOverlay) {
539
535
  return settings.customRenderers.render.resultsGrid.renderLoadingOverlay();
@@ -589,14 +585,16 @@ export function SimilarProductsResultsGrid({
589
585
  <div className={gridClassName}>
590
586
  {isLoading &&
591
587
  searchResults &&
592
- searchResults.products?.length > 0 &&
588
+ searchResults.products &&
593
589
  renderLoadingOverlay()}
594
590
 
595
- {searchResults && searchResults.products?.length > 0 && (
591
+ {searchResults && searchResults.products?.length > 0 ? (
596
592
  <div className={resultsContainerClassName}>
597
593
  {renderGridContainer()}
598
594
  {renderPagination()}
599
595
  </div>
596
+ ) : (
597
+ renderEmptyState()
600
598
  )}
601
599
  </div>
602
600
  );
package/src/views/search-modal.tsx CHANGED
@@ -326,10 +326,6 @@ export function SimilarProductsModal({
326
326
  };
327
327
 
328
328
  const renderSortDropdown = () => {
329
- if (!searchResults?.products?.length || !searchResults?.sorters?.length) {
330
- return null;
331
- }
332
-
333
329
  if (settings?.customRenderers?.render?.modal?.renderSortDropdown) {
334
330
  return settings.customRenderers.render.modal.renderSortDropdown({
335
331
  sorters: searchResults?.sorters || [],