@tapcart/mobile-components 0.7.32 → 0.7.34
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.
- package/dist/components/contexts/translation-context.d.ts.map +1 -1
- package/dist/components/contexts/translation-context.js +7 -4
- package/dist/components/hooks/use-click-outside.d.ts +3 -0
- package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
- package/dist/components/hooks/use-click-outside.js +16 -0
- package/dist/components/hooks/use-nosto-recommendation.d.ts +1 -1
- package/dist/components/hooks/use-nosto-recommendation.d.ts.map +1 -1
- package/dist/components/hooks/use-nosto-recommendation.js +8 -2
- package/dist/components/hooks/use-nosto-recommendation.test.js +44 -0
- package/dist/components/hooks/use-outside-click.d.ts +4 -0
- package/dist/components/hooks/use-outside-click.d.ts.map +1 -0
- package/dist/components/hooks/use-outside-click.js +16 -0
- package/dist/components/hooks/use-products.d.ts.map +1 -1
- package/dist/components/hooks/use-recommendations.js +1 -1
- package/dist/components/hooks/use-reviews.d.ts +0 -2
- package/dist/components/hooks/use-reviews.d.ts.map +1 -1
- package/dist/components/hooks/use-reviews.js +0 -47
- package/dist/components/ui/badge.js +1 -1
- package/package.json +18 -18
- package/dist/components/ThemeProvider.d.ts +0 -3
- package/dist/components/ThemeProvider.d.ts.map +0 -1
- package/dist/components/ThemeProvider.js +0 -18
- package/dist/components/ThemeToggle.d.ts +0 -2
- package/dist/components/ThemeToggle.d.ts.map +0 -1
- package/dist/components/ThemeToggle.js +0 -8
- package/dist/components/ui/input.d.ts +0 -17
- package/dist/components/ui/input.d.ts.map +0 -1
- package/dist/components/ui/input.js +0 -35
- package/dist/components/ui/product-grid.d.ts +0 -15
- package/dist/components/ui/product-grid.d.ts.map +0 -1
- package/dist/components/ui/product-grid.js +0 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translation-context.d.ts","sourceRoot":"","sources":["../../../components/contexts/translation-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAI5C,eAAO,MAAM,mBAAmB;kBAIhB,cAAc;cAClB,MAAM,SAAS;6CAK1B,CAAA;AAED,eAAO,MAAM,cAAc,sBAAuC,CAAA;AAElE,eAAO,MAAM,kBAAkB;UAIvB,MAAM;kBACE,OAAO,MAAM,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"translation-context.d.ts","sourceRoot":"","sources":["../../../components/contexts/translation-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAI5C,eAAO,MAAM,mBAAmB;kBAIhB,cAAc;cAClB,MAAM,SAAS;6CAK1B,CAAA;AAED,eAAO,MAAM,cAAc,sBAAuC,CAAA;AAElE,eAAO,MAAM,kBAAkB;UAIvB,MAAM;kBACE,OAAO,MAAM,EAAE,MAAM,CAAC;wBASrC,CAAA"}
|
|
@@ -5,8 +5,11 @@ const TranslationContext = createContext({});
|
|
|
5
5
|
export const TranslationProvider = ({ translations, children, }) => (_jsx(TranslationContext.Provider, Object.assign({ value: translations }, { children: children })));
|
|
6
6
|
export const useTranslation = () => useContext(TranslationContext);
|
|
7
7
|
export const getTextTranslation = ({ text, translations, }) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
if (text) {
|
|
9
|
+
const key = text.trim().toLowerCase();
|
|
10
|
+
if (!(key in translations))
|
|
11
|
+
return undefined;
|
|
12
|
+
return translations[key];
|
|
13
|
+
}
|
|
14
|
+
return undefined;
|
|
12
15
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-click-outside.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAE,IAAI,CAa5F"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export function useClickOutside(ref, callback) {
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const handleClickOutside = (event) => {
|
|
6
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
7
|
+
callback();
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
13
|
+
};
|
|
14
|
+
}, [ref, callback]);
|
|
15
|
+
}
|
|
16
|
+
;
|
|
@@ -7,7 +7,7 @@ export declare enum NostoRecommendationsType {
|
|
|
7
7
|
BEST_SELLERS = "BEST_SELLERS",
|
|
8
8
|
VIEWED_CATEGORY = "VIEWED_CATEGORY"
|
|
9
9
|
}
|
|
10
|
-
export declare function useNostoRecommendations(integrations: Integrations, baseURL: string, slotId?: string, recommendationsType?: NostoRecommendationsType | "", productIds?: string[], skip?: boolean): {
|
|
10
|
+
export declare function useNostoRecommendations(integrations: Integrations, baseURL: string, slotId?: string, recommendationsType?: NostoRecommendationsType | "", productIds?: string[], skip?: boolean, mockFallback?: boolean, mockFallbackAppId?: string): {
|
|
11
11
|
recommendations: import("app-studio-types").Product[];
|
|
12
12
|
isLoading: boolean;
|
|
13
13
|
error: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-nosto-recommendation.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAe/C,oBAAY,wBAAwB;IAClC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,qBAAqB,0BAA0B;IAC/C,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;CACpC;AAyRD,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,EACf,MAAM,SAAK,EACX,mBAAmB,CAAC,EAAE,wBAAwB,GAAG,EAAE,EACnD,UAAU,CAAC,EAAE,MAAM,EAAE,EACrB,IAAI,CAAC,EAAE,OAAO;;;;;
|
|
1
|
+
{"version":3,"file":"use-nosto-recommendation.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAe/C,oBAAY,wBAAwB;IAClC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,qBAAqB,0BAA0B;IAC/C,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;CACpC;AAyRD,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,EACf,MAAM,SAAK,EACX,mBAAmB,CAAC,EAAE,wBAAwB,GAAG,EAAE,EACnD,UAAU,CAAC,EAAE,MAAM,EAAE,EACrB,IAAI,CAAC,EAAE,OAAO,EACd,YAAY,CAAC,EAAE,OAAO,EACtB,iBAAiB,CAAC,EAAE,MAAM;;;;;EA4C3B"}
|
|
@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
9
|
});
|
|
10
10
|
};
|
|
11
|
-
import { useState, useEffect } from "react";
|
|
11
|
+
import { useState, useEffect, useMemo } from "react";
|
|
12
12
|
import { useProducts } from "./use-products";
|
|
13
13
|
import { bestSellersRecommendationsQuery, categoryPageRecommendationsQuery, getFrontPageRecommendationsQuery, getProductPageRecommendationsQuery, getRelatedProductsRecommendationsQuery, newSessionQuery, } from "./use-nosto-recommendation.queries";
|
|
14
14
|
export var NostoRecommendationsType;
|
|
@@ -169,17 +169,23 @@ function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendation
|
|
|
169
169
|
error,
|
|
170
170
|
};
|
|
171
171
|
}
|
|
172
|
-
export function useNostoRecommendations(integrations, baseURL, slotId = "", recommendationsType, productIds, skip) {
|
|
172
|
+
export function useNostoRecommendations(integrations, baseURL, slotId = "", recommendationsType, productIds, skip, mockFallback, mockFallbackAppId) {
|
|
173
173
|
var _a;
|
|
174
174
|
if (recommendationsType === "") {
|
|
175
175
|
recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER;
|
|
176
176
|
}
|
|
177
177
|
const nostoKey = (_a = integrations.find((integration) => integration.name === "nosto")) === null || _a === void 0 ? void 0 : _a.key;
|
|
178
178
|
const { recommendedProductIds, isLoading, error } = useNostoRecommendationsProductIds(nostoKey, slotId, recommendationsType, productIds, skip);
|
|
179
|
+
const shouldMock = useMemo(() => recommendedProductIds.length === 0 && !isLoading && mockFallback, [recommendedProductIds, isLoading, mockFallback]);
|
|
180
|
+
const appId = shouldMock ? mockFallbackAppId : undefined;
|
|
179
181
|
const { products, error: productsError, isLoading: productsLoading, } = useProducts({
|
|
180
182
|
productIds: recommendedProductIds,
|
|
181
183
|
baseURL,
|
|
182
184
|
productHandles: [],
|
|
185
|
+
queryVariables: {
|
|
186
|
+
appId,
|
|
187
|
+
},
|
|
188
|
+
mock: shouldMock,
|
|
183
189
|
});
|
|
184
190
|
return {
|
|
185
191
|
recommendations: products,
|
|
@@ -119,6 +119,10 @@ describe("useNostoRecommendations", () => {
|
|
|
119
119
|
productIds: ["front-page-id-1"],
|
|
120
120
|
baseURL: mockBaseURL,
|
|
121
121
|
productHandles: [],
|
|
122
|
+
queryVariables: {
|
|
123
|
+
appId: undefined,
|
|
124
|
+
},
|
|
125
|
+
mock: false,
|
|
122
126
|
});
|
|
123
127
|
}));
|
|
124
128
|
it("should return best sellers recommendations if productIds is empty and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -130,6 +134,10 @@ describe("useNostoRecommendations", () => {
|
|
|
130
134
|
productIds: ["best-seller-1"],
|
|
131
135
|
baseURL: mockBaseURL,
|
|
132
136
|
productHandles: [],
|
|
137
|
+
queryVariables: {
|
|
138
|
+
appId: undefined,
|
|
139
|
+
},
|
|
140
|
+
mock: false,
|
|
133
141
|
});
|
|
134
142
|
}));
|
|
135
143
|
it("should return best sellers recommendations if productIds is not empty, Best Sellers is the recommendation type and slotId is not provided", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -142,6 +150,10 @@ describe("useNostoRecommendations", () => {
|
|
|
142
150
|
productIds: ["best-seller-1"],
|
|
143
151
|
baseURL: mockBaseURL,
|
|
144
152
|
productHandles: [],
|
|
153
|
+
queryVariables: {
|
|
154
|
+
appId: undefined,
|
|
155
|
+
},
|
|
156
|
+
mock: false,
|
|
145
157
|
});
|
|
146
158
|
}));
|
|
147
159
|
it("should return default front page recommendations if slotId is provided but layoutType is not", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -153,6 +165,10 @@ describe("useNostoRecommendations", () => {
|
|
|
153
165
|
productIds: ["front-page-id-1"],
|
|
154
166
|
baseURL: mockBaseURL,
|
|
155
167
|
productHandles: [],
|
|
168
|
+
queryVariables: {
|
|
169
|
+
appId: undefined,
|
|
170
|
+
},
|
|
171
|
+
mock: false,
|
|
156
172
|
});
|
|
157
173
|
}));
|
|
158
174
|
it("should return the correct recommendations for best sellers", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -163,6 +179,10 @@ describe("useNostoRecommendations", () => {
|
|
|
163
179
|
productIds: ["best-seller-1"],
|
|
164
180
|
baseURL: mockBaseURL,
|
|
165
181
|
productHandles: [],
|
|
182
|
+
queryVariables: {
|
|
183
|
+
appId: undefined,
|
|
184
|
+
},
|
|
185
|
+
mock: false,
|
|
166
186
|
});
|
|
167
187
|
}));
|
|
168
188
|
it("should return the related recommendations when only productIds and a recommendation type are provided on a non-home layout", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -174,6 +194,10 @@ describe("useNostoRecommendations", () => {
|
|
|
174
194
|
productIds: ["related-1"],
|
|
175
195
|
baseURL: mockBaseURL,
|
|
176
196
|
productHandles: [],
|
|
197
|
+
queryVariables: {
|
|
198
|
+
appId: undefined,
|
|
199
|
+
},
|
|
200
|
+
mock: false,
|
|
177
201
|
});
|
|
178
202
|
}));
|
|
179
203
|
it("should return the correct recommendations when productIds and slotIds are provided", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -186,6 +210,10 @@ describe("useNostoRecommendations", () => {
|
|
|
186
210
|
productIds: ["product-page-id-1"],
|
|
187
211
|
baseURL: mockBaseURL,
|
|
188
212
|
productHandles: [],
|
|
213
|
+
queryVariables: {
|
|
214
|
+
appId: undefined,
|
|
215
|
+
},
|
|
216
|
+
mock: false,
|
|
189
217
|
});
|
|
190
218
|
}));
|
|
191
219
|
it("should return the related products fallback recommendations when productIds are provided and no slotId and a type other than viewed_category and best_sellers is provided", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -197,6 +225,10 @@ describe("useNostoRecommendations", () => {
|
|
|
197
225
|
productIds: ["related-1"],
|
|
198
226
|
baseURL: mockBaseURL,
|
|
199
227
|
productHandles: [],
|
|
228
|
+
queryVariables: {
|
|
229
|
+
appId: undefined,
|
|
230
|
+
},
|
|
231
|
+
mock: false,
|
|
200
232
|
});
|
|
201
233
|
}));
|
|
202
234
|
it("should return the category fallback recommendations when no slotId, productIds are provided and a recommendation type of viewed_category is provided", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -208,6 +240,10 @@ describe("useNostoRecommendations", () => {
|
|
|
208
240
|
productIds: ["category-page-id-1"],
|
|
209
241
|
baseURL: mockBaseURL,
|
|
210
242
|
productHandles: [],
|
|
243
|
+
queryVariables: {
|
|
244
|
+
appId: undefined,
|
|
245
|
+
},
|
|
246
|
+
mock: false,
|
|
211
247
|
});
|
|
212
248
|
}));
|
|
213
249
|
it("should handle loading state", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -234,6 +270,10 @@ describe("useNostoRecommendations", () => {
|
|
|
234
270
|
productIds: ["best-seller-1"],
|
|
235
271
|
baseURL: mockBaseURL,
|
|
236
272
|
productHandles: [],
|
|
273
|
+
queryVariables: {
|
|
274
|
+
appId: undefined,
|
|
275
|
+
},
|
|
276
|
+
mock: false,
|
|
237
277
|
});
|
|
238
278
|
}));
|
|
239
279
|
it("should return an empty array if skip is true", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -243,6 +283,10 @@ describe("useNostoRecommendations", () => {
|
|
|
243
283
|
productIds: [],
|
|
244
284
|
baseURL: mockBaseURL,
|
|
245
285
|
productHandles: [],
|
|
286
|
+
queryVariables: {
|
|
287
|
+
appId: undefined,
|
|
288
|
+
},
|
|
289
|
+
mock: false,
|
|
246
290
|
});
|
|
247
291
|
}));
|
|
248
292
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-outside-click.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-outside-click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,YAAY,MAAM,IAAI,SAa/E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
const useClickOutside = (ref, callback) => {
|
|
4
|
+
React.useEffect(() => {
|
|
5
|
+
const handleClickOutside = (event) => {
|
|
6
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
7
|
+
callback();
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
11
|
+
return () => {
|
|
12
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
13
|
+
};
|
|
14
|
+
}, [ref, callback]);
|
|
15
|
+
};
|
|
16
|
+
export default useClickOutside;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAI1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1E,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AA8BD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,
|
|
1
|
+
{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAI1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1E,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AA8BD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAwF7E"}
|
|
@@ -8,7 +8,7 @@ const constructURL = (apiURL) => {
|
|
|
8
8
|
const useRecommendations = ({ queryVariables, apiURL }) => {
|
|
9
9
|
var _a;
|
|
10
10
|
const searchParams = useSearchParams();
|
|
11
|
-
const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "
|
|
11
|
+
const recommendation = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('recommendation')) || "";
|
|
12
12
|
const fetcher = (body) => fetch(constructURL(apiURL), {
|
|
13
13
|
method: "POST",
|
|
14
14
|
body: JSON.stringify(body),
|
|
@@ -18,8 +18,6 @@ type UseReviewsReturn = {
|
|
|
18
18
|
data: ReviewSummaryData | ReviewMetaData | ReviewSearchData | null;
|
|
19
19
|
error: any;
|
|
20
20
|
isLoading: boolean;
|
|
21
|
-
reviewsMockData?: any;
|
|
22
|
-
mockStarDistribution?: any;
|
|
23
21
|
};
|
|
24
22
|
export declare function useReviews(props: UseReviewsProps | null): UseReviewsReturn;
|
|
25
23
|
type UseReviewsInfiniteReturn = UseReviewsReturn & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-reviews.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-reviews.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAGtF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,iBAAiB,GAAG,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"use-reviews.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-reviews.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAGtF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,eAAe,CAAC;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,iBAAiB,GAAG,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,gBAAgB,CA2D1E;AAED,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IACjD,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACtC,CAAA;AAGD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,wBAAwB,CAyI1F"}
|
|
@@ -3,51 +3,6 @@ import { useCallback, useEffect, useRef } from "react";
|
|
|
3
3
|
import useSWR from "swr";
|
|
4
4
|
import useSWRInfinite from "swr/infinite";
|
|
5
5
|
import { useInView } from 'react-intersection-observer';
|
|
6
|
-
const reviewsMockData = [
|
|
7
|
-
{
|
|
8
|
-
"id": "dabbba8a-1188-4423-8aa2-1789dca7d67c",
|
|
9
|
-
"score": 4,
|
|
10
|
-
"title": "Headline",
|
|
11
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...",
|
|
12
|
-
"date": "2024-10-10T00:00:00.000Z",
|
|
13
|
-
"verified": false,
|
|
14
|
-
"user": {
|
|
15
|
-
"userId": null,
|
|
16
|
-
"displayName": "Name"
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"id": "aab7ea91-1b88-43e8-93a9-111f833c756c",
|
|
21
|
-
"score": 3,
|
|
22
|
-
"title": "Headline",
|
|
23
|
-
"content": "",
|
|
24
|
-
"date": "2024-08-10T00:00:00.000Z",
|
|
25
|
-
"verified": false,
|
|
26
|
-
"user": {
|
|
27
|
-
"userId": null,
|
|
28
|
-
"displayName": "Name"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
"id": "4c3ab875-5598-498f-ae3b-72bf00f4fe04",
|
|
33
|
-
"score": 4,
|
|
34
|
-
"title": "Headline",
|
|
35
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...",
|
|
36
|
-
"date": "2024-08-08T00:00:00.000Z",
|
|
37
|
-
"verified": false,
|
|
38
|
-
"user": {
|
|
39
|
-
"userId": null,
|
|
40
|
-
"displayName": "Name"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
];
|
|
44
|
-
const mockStarDistribution = {
|
|
45
|
-
1: 0,
|
|
46
|
-
2: 0,
|
|
47
|
-
3: 1,
|
|
48
|
-
4: 2,
|
|
49
|
-
5: 0,
|
|
50
|
-
};
|
|
51
6
|
export function useReviews(props) {
|
|
52
7
|
let url = null;
|
|
53
8
|
if (props) {
|
|
@@ -97,8 +52,6 @@ export function useReviews(props) {
|
|
|
97
52
|
data: data || {},
|
|
98
53
|
error,
|
|
99
54
|
isLoading: !data && !error,
|
|
100
|
-
reviewsMockData,
|
|
101
|
-
mockStarDistribution,
|
|
102
55
|
};
|
|
103
56
|
}
|
|
104
57
|
export function useReviewsInfinite(props) {
|
|
@@ -68,6 +68,6 @@ function Badge(_a) {
|
|
|
68
68
|
var { className, icon, iconUrl, alignment, cornerRadius = "rounded", type = "icon-and-text", size = "plp-layout", backgroundColor, fontColor } = _a, props = __rest(_a, ["className", "icon", "iconUrl", "alignment", "cornerRadius", "type", "size", "backgroundColor", "fontColor"]);
|
|
69
69
|
const backgroundColorOverride = backgroundColor ? { backgroundColor } : {};
|
|
70
70
|
const BadgeText = () => (_jsx(Text, Object.assign({ type: size === "plp-layout" ? "body-primary" : "body-secondary", className: "text-productBadging-text", fontColor: fontColor }, { children: props.children })));
|
|
71
|
-
return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment, cornerRadius }), className), style:
|
|
71
|
+
return (_jsx("div", Object.assign({ className: cn(badgeVariants({ alignment, cornerRadius }), className) }, props, { style: Object.assign(Object.assign({}, props.style), backgroundColorOverride) }, { children: type === "icon-and-text" ? (_jsxs(_Fragment, { children: [(icon || iconUrl) && (_jsx(Icon, { name: icon, url: iconUrl, style: fontColor ? { color: fontColor } : {}, size: size === "carousels" || size === "plp-layout-small" ? "xs" : "sm" })), _jsx(BadgeText, {})] })) : type === "icon-only" && icon ? (_jsx(Icon, { name: icon, url: iconUrl, style: fontColor ? { color: fontColor } : {}, size: size === "carousels" || size === "plp-layout-small" ? "xs" : "sm" })) : (_jsx(BadgeText, {})) })));
|
|
72
72
|
}
|
|
73
73
|
export { Badge, badgeVariants };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tapcart/mobile-components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.34",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"style": "dist/styles.css",
|
|
@@ -11,18 +11,6 @@
|
|
|
11
11
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
12
12
|
"author": "Tapcart Inc.",
|
|
13
13
|
"homepage": "https://tapcart.com",
|
|
14
|
-
"scripts": {
|
|
15
|
-
"lint": "eslint \"**/*.ts*\"",
|
|
16
|
-
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
17
|
-
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
18
|
-
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
19
|
-
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
20
|
-
"dev:ts": "tsc -w -p tsconfig.json",
|
|
21
|
-
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
22
|
-
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
23
|
-
"test": "jest",
|
|
24
|
-
"test:watch": "jest --watch"
|
|
25
|
-
},
|
|
26
14
|
"peerDependencies": {
|
|
27
15
|
"react": "^17.0.2 || ^18.0.0",
|
|
28
16
|
"react-dom": "^17.0.2 || ^18.0.0"
|
|
@@ -32,21 +20,21 @@
|
|
|
32
20
|
"@types/lodash": "4.17.5",
|
|
33
21
|
"@types/react": "^18.2.0",
|
|
34
22
|
"@types/react-dom": "^18.2.0",
|
|
35
|
-
"app-studio-types": "workspace:*",
|
|
36
23
|
"autoprefixer": "^10.4.14",
|
|
37
24
|
"chokidar-cli": "^3.0.0",
|
|
38
25
|
"concurrently": "^8.2.2",
|
|
39
26
|
"eslint": "^7.32.0",
|
|
40
|
-
"eslint-config-custom": "workspace:*",
|
|
41
27
|
"jest": "^29.7.0",
|
|
42
28
|
"jest-environment-jsdom": "^29.7.0",
|
|
43
29
|
"postcss": "^8.4.24",
|
|
44
30
|
"tailwindcss": "^3.3.2",
|
|
45
31
|
"ts-jest": "^29.2.5",
|
|
46
32
|
"tsc-alias": "^1.8.10",
|
|
47
|
-
"tsconfig": "workspace:*",
|
|
48
33
|
"typescript": "^4.5.2",
|
|
49
|
-
"@testing-library/react-hooks": "^8.0.1"
|
|
34
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
35
|
+
"app-studio-types": "0.0.5",
|
|
36
|
+
"eslint-config-custom": "0.0.0",
|
|
37
|
+
"tsconfig": "0.0.0"
|
|
50
38
|
},
|
|
51
39
|
"dependencies": {
|
|
52
40
|
"@radix-ui/react-accordion": "^1.1.2",
|
|
@@ -83,5 +71,17 @@
|
|
|
83
71
|
"tailwind-merge": "^1.13.2",
|
|
84
72
|
"tailwindcss-animate": "^1.0.6",
|
|
85
73
|
"vaul": "0.9.1"
|
|
74
|
+
},
|
|
75
|
+
"scripts": {
|
|
76
|
+
"lint": "eslint \"**/*.ts*\"",
|
|
77
|
+
"ui:add": "pnpm dlx shadcn-ui@latest add",
|
|
78
|
+
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
79
|
+
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
80
|
+
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
81
|
+
"dev:ts": "tsc -w -p tsconfig.json",
|
|
82
|
+
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
83
|
+
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\"",
|
|
84
|
+
"test": "jest",
|
|
85
|
+
"test:watch": "jest --watch"
|
|
86
86
|
}
|
|
87
|
-
}
|
|
87
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../components/ThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEvE"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
|
15
|
-
export function ThemeProvider(_a) {
|
|
16
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
17
|
-
return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }));
|
|
18
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useTheme } from "next-themes";
|
|
4
|
-
import { Button } from "../components/ui/button";
|
|
5
|
-
export function ThemeToggle() {
|
|
6
|
-
const { setTheme, theme } = useTheme();
|
|
7
|
-
return (_jsxs(Button, Object.assign({ variant: "ghost", size: "sm", onClick: () => setTheme(theme === "light" ? "dark" : "light") }, { children: [_jsx("div", { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }))] })));
|
|
8
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
declare const inputVariants: (props?: ({
|
|
4
|
-
error?: boolean | null | undefined;
|
|
5
|
-
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
6
|
-
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
|
|
7
|
-
id: string;
|
|
8
|
-
label?: string;
|
|
9
|
-
icon?: string;
|
|
10
|
-
asChild?: boolean;
|
|
11
|
-
value: string;
|
|
12
|
-
placeholder: string;
|
|
13
|
-
onChange: (_: string) => void;
|
|
14
|
-
}
|
|
15
|
-
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
16
|
-
export { Input };
|
|
17
|
-
//# sourceMappingURL=input.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;mFAalB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,QAAA,MAAM,KAAK,qFAkDV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import * as React from "react";
|
|
14
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
15
|
-
import { cva } from "class-variance-authority";
|
|
16
|
-
import { cn } from "../../lib/utils";
|
|
17
|
-
import { Icon } from "./icon";
|
|
18
|
-
const inputVariants = cva("flex h-14 w-full rounded border border-coreColors-dividingLines bg-coreColors-inputBackground px-4 pt-5 pb-2 placeholder-shown:p-4 text-textColors-primaryColor text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textColors-secondaryColor focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 focus:border-coreColors-brandColorPrimary peer data-[icon=true]:pr-10", {
|
|
19
|
-
variants: {
|
|
20
|
-
error: {
|
|
21
|
-
true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
|
|
22
|
-
false: "",
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
defaultVariants: {
|
|
26
|
-
error: false,
|
|
27
|
-
},
|
|
28
|
-
});
|
|
29
|
-
const Input = React.forwardRef((_a, ref) => {
|
|
30
|
-
var { className, error = false, id, type, label, icon, asChild, value, placeholder, onChange } = _a, props = __rest(_a, ["className", "error", "id", "type", "label", "icon", "asChild", "value", "placeholder", "onChange"]);
|
|
31
|
-
const Comp = asChild ? Slot : "div";
|
|
32
|
-
return (_jsxs(Comp, Object.assign({ className: "relative group" }, { children: [_jsx("input", Object.assign({ placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), id: id, type: type, className: cn(inputVariants({ error }), className), "data-icon": !!icon, ref: ref }, props)), label ? (_jsx("label", Object.assign({ htmlFor: id, className: "absolute text-[10px] text-textColors-secondaryColor group-active:text-coreColors-brandColorPrimary top-2 z-10 h-4 origin-[0] start-4 opacity-100 peer-placeholder-shown:opacity-0" }, { children: label }))) : null, icon ? (_jsx(Icon, { name: icon, "data-error": error, size: "sm", className: "absolute w-5 aspect-square fill-current text-textColors-secondaryColor top-[18px] z-10 origin-[0] end-4 peer-pr-8 icon data-[error=true]:text-stateColors-error" })) : null] })));
|
|
33
|
-
});
|
|
34
|
-
Input.displayName = "Input";
|
|
35
|
-
export { Input };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
type Product = any;
|
|
2
|
-
interface PageData {
|
|
3
|
-
products: Product[];
|
|
4
|
-
cursorBlob?: string;
|
|
5
|
-
filtersData: any;
|
|
6
|
-
}
|
|
7
|
-
interface ProductGridItemsProps {
|
|
8
|
-
initialData: PageData;
|
|
9
|
-
loadMoreProducts: (params: any) => Promise<PageData>;
|
|
10
|
-
queryVariables: Record<string, any>;
|
|
11
|
-
config: Record<string, any>;
|
|
12
|
-
}
|
|
13
|
-
declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export { ProductGrid };
|
|
15
|
-
//# sourceMappingURL=product-grid.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../components/ui/product-grid.tsx"],"names":[],"mappings":"AAkBA,KAAK,OAAO,GAAG,GAAG,CAAA;AAClB,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,GAAG,CAAA;CACjB;AAED,UAAU,qBAAqB;IAC7B,WAAW,EAAE,QAAQ,CAAA;IACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC5B;AAED,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE,qBAAqB,2CAmCvB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useInfiniteScroll } from "../hooks/use-infinite-scroll";
|
|
4
|
-
import { ProductCard } from "./product-card";
|
|
5
|
-
const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
|
|
6
|
-
.fill(0)
|
|
7
|
-
.map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) })));
|
|
8
|
-
function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
|
|
9
|
-
const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
|
|
10
|
-
initialData,
|
|
11
|
-
loadMoreProducts,
|
|
12
|
-
queryVariables,
|
|
13
|
-
});
|
|
14
|
-
if (error)
|
|
15
|
-
return _jsx("div", { children: "Failed to load data" });
|
|
16
|
-
if (isLoadingInitialData)
|
|
17
|
-
return _jsx(Loader, {});
|
|
18
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, {
|
|
19
|
-
// @ts-expect-error
|
|
20
|
-
product: product, config: config, isLoading: false }, product.handle))) })), isLoadingMore ? _jsx(Loader, {}) : _jsx("div", { ref: ref })] }));
|
|
21
|
-
}
|
|
22
|
-
export { ProductGrid };
|