@tapcart/mobile-components 0.8.62 → 0.8.63

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 (11) hide show
  1. package/dist/components/hooks/use-mock-cart.js +1 -1
  2. package/dist/components/hooks/use-products.d.ts.map +1 -1
  3. package/dist/components/hooks/use-products.js +20 -21
  4. package/dist/components/libs/cache/ProductsLocalStorage.d.ts.map +1 -1
  5. package/dist/components/libs/cache/ProductsLocalStorage.js +7 -3
  6. package/dist/components/ui/button.js +4 -3
  7. package/dist/components/ui/quantity-pickerNEW.d.ts +1 -0
  8. package/dist/components/ui/quantity-pickerNEW.d.ts.map +1 -1
  9. package/dist/components/ui/quantity-pickerNEW.js +30 -36
  10. package/dist/styles.css +8 -0
  11. package/package.json +1 -1
package/dist/components/hooks/use-mock-cart.js CHANGED
@@ -359,7 +359,7 @@ const transformCart = ({ products, cartOrigin = cartMock, }) => {
359
359
  totalDutyAmount: null,
360
360
  } });
361
361
  };
362
- export const useMockCart = ({ apiUrl, appId, enabled = true, limit = 3, }) => {
362
+ export const useMockCart = ({ apiUrl, appId, enabled = true, limit = 4, }) => {
363
363
  const [isLoading, setIsLoading] = useState(true);
364
364
  const [initialLoadHappened, setInitialLoadHappened] = useState(false);
365
365
  const { products, error: productsError, isRefreshing: productsLoading, } = useProducts({
package/dist/components/hooks/use-products.d.ts.map CHANGED
@@ -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;AAM1C,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,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IACjC,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,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,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;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAC3B;QACE,EAAE,EAAE,MAAM,CAAA;QACV,MAAM,EAAE,MAAM,CAAA;KACf,GACD,SAAS,CAAA;CACd,CAAA;AAgCD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA4I7E"}
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;AAK1C,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,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IACjC,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,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,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;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAC3B;QACE,EAAE,EAAE,MAAM,CAAA;QACV,MAAM,EAAE,MAAM,CAAA;KACf,GACD,SAAS,CAAA;CACd,CAAA;AAgCD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA8I7E"}
package/dist/components/hooks/use-products.js CHANGED
@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
10
10
  };
11
11
  import useSWR from "swr";
12
12
  import { getProductGidsFromIds, getVariantGidsFromIds } from "../../lib/utils";
13
- import { useCollection } from "./use-collection";
14
13
  import React from "react";
15
14
  import ProductsLocalStorage from "../libs/cache/ProductsLocalStorage";
16
15
  const isUseProductsProps = (props) => {
@@ -31,28 +30,21 @@ const formatProductData = ({ data, onlyAvailableProducts = false, }) => {
31
30
  };
32
31
  const productsLocalStorage = new ProductsLocalStorage();
33
32
  export function useProducts(props) {
34
- var _a, _b, _c, _d;
33
+ var _a;
35
34
  let url = null;
36
35
  let body = null;
37
36
  const shouldMockProducts = Boolean(props === null || props === void 0 ? void 0 : props.mock);
38
- const { collections } = useCollection({
39
- apiUrl: (props === null || props === void 0 ? void 0 : props.baseURL) || "",
40
- appId: ((_a = props === null || props === void 0 ? void 0 : props.queryVariables) === null || _a === void 0 ? void 0 : _a.appId) || "",
41
- language: ((_b = props === null || props === void 0 ? void 0 : props.queryVariables) === null || _b === void 0 ? void 0 : _b.language) || "en",
42
- collectionId: undefined,
43
- getCollections: shouldMockProducts,
44
- limit: 1,
45
- });
46
- const [cachedProducts, setCachedProducts] = React.useState(productsLocalStorage.getCacheItems({
37
+ // No collection logic needed for mock mode - we use direct product fetching
38
+ const [productResponse, setProductResponse] = React.useState(() => productsLocalStorage.getCacheItems({
47
39
  productIds: props === null || props === void 0 ? void 0 : props.productIds,
48
40
  productHandles: props === null || props === void 0 ? void 0 : props.productHandles,
49
41
  }));
50
42
  if (isUseProductsProps(props)) {
51
43
  let { baseURL, productIds, variantIds, productHandles, metafields, collection, queryVariables, } = props;
52
44
  if (shouldMockProducts) {
53
- const collectionToFetchID = (_c = collections[0]) === null || _c === void 0 ? void 0 : _c.id;
54
- queryVariables = Object.assign(Object.assign({}, queryVariables), { collectionId: collectionToFetchID });
55
- collection = collectionToFetchID;
45
+ // In mock mode, always use direct product fetching without collections
46
+ queryVariables = Object.assign({}, queryVariables);
47
+ // Don't set collection to enable direct product fetching
56
48
  }
57
49
  let queryParams = new URLSearchParams();
58
50
  if ((productIds === null || productIds === void 0 ? void 0 : productIds.length) > 0) {
@@ -79,9 +71,18 @@ export function useProducts(props) {
79
71
  if (queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.language) {
80
72
  queryParams.set("language", queryVariables.language);
81
73
  }
82
- queryParams.set("mediaLimit", (_d = queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.mediaLimit) !== null && _d !== void 0 ? _d : 10);
74
+ queryParams.set("mediaLimit", (_a = queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.mediaLimit) !== null && _a !== void 0 ? _a : 10);
83
75
  url = `${baseURL}/products/by-ids?${queryParams.toString()}`;
84
76
  }
77
+ // Handle collection-free product fetching when in mock mode
78
+ if (shouldMockProducts &&
79
+ !collection &&
80
+ !(productIds === null || productIds === void 0 ? void 0 : productIds.length) &&
81
+ !(productHandles === null || productHandles === void 0 ? void 0 : productHandles.length) &&
82
+ !(variantIds === null || variantIds === void 0 ? void 0 : variantIds.length)) {
83
+ url = `${baseURL}/products/by-page?${queryParams.toString()}`;
84
+ body = queryVariables || {};
85
+ }
85
86
  }
86
87
  const defaultFetcher = (url, body) => fetch(url, {
87
88
  method: body ? "POST" : "GET",
@@ -110,23 +111,21 @@ export function useProducts(props) {
110
111
  };
111
112
  // set local state when when SWR data is updated
112
113
  React.useEffect(() => {
113
- if (!data) {
114
- setCachedProducts([]);
114
+ if (!data)
115
115
  return;
116
- }
117
116
  // Determine the products array from data
118
117
  const productsArray = Array.isArray(data) ? data : data.products || [];
119
118
  if (!productsArray.length)
120
119
  return;
121
- setCachedProducts(productsArray);
120
+ setProductResponse(productsArray);
122
121
  }, [data]);
123
122
  return {
124
123
  products: formatProductData({
125
- data: cachedProducts,
124
+ data: productResponse,
126
125
  onlyAvailableProducts: (props === null || props === void 0 ? void 0 : props.mock) && (props === null || props === void 0 ? void 0 : props.onlyAvailableProducts),
127
126
  }),
128
127
  error,
129
- isLoading: !cachedProducts.length && isLoading,
128
+ isLoading: !productResponse.length && isLoading,
130
129
  isRefreshing: isLoading,
131
130
  cacheProduct,
132
131
  };
package/dist/components/libs/cache/ProductsLocalStorage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductsLocalStorage.d.ts","sourceRoot":"","sources":["../../../../components/libs/cache/ProductsLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,cAAc;IAC9D,OAAO,EAAE,MAAM,CAA2B;IAC1C,WAAW,EAAE,MAAM,CAAe;IAElC,aAAa,CAAC,EAAE,EAAE,MAAM;IAIxB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;IAShC,QAAQ,IAAI,aAAa,EAAE;IAiB3B,YAAY,CAAC,EACX,EAAE,EACF,MAAM,GACP,EAAE;QACD,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,GAAG,MAAM,GAAG,IAAI;IAajB,aAAa,CAAC,QAAQ,EAAE;QACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;QACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;KAC1B,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE;IASrB,YAAY,CACV,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,aAAa,EAAE,EACvB,YAAY,GAAE,OAAc;gBAFT,MAAM;YAAM,MAAM;;IAiEvC,aAAa,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE;;;;IASrD,eAAe,CAAC,WAAW,GAAE,MAAU;IAWvC,UAAU;IAQV,eAAe,CAAC,CAAC,EAAE,GAAG;CASvB"}
1
+ {"version":3,"file":"ProductsLocalStorage.d.ts","sourceRoot":"","sources":["../../../../components/libs/cache/ProductsLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAG7C,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,cAAc;IAC9D,OAAO,EAAE,MAAM,CAA2B;IAC1C,WAAW,EAAE,MAAM,CAAe;IAElC,aAAa,CAAC,EAAE,EAAE,MAAM;IAIxB,iBAAiB,CAAC,MAAM,EAAE,MAAM;;IAShC,QAAQ,IAAI,aAAa,EAAE;IAiB3B,YAAY,CAAC,EACX,EAAE,EACF,MAAM,GACP,EAAE;QACD,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,GAAG,MAAM,GAAG,IAAI;IAgBjB,aAAa,CAAC,QAAQ,EAAE;QACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;QACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;KAC1B,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE;IAWrB,YAAY,CACV,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EACvC,KAAK,CAAC,EAAE,aAAa,EAAE,EACvB,YAAY,GAAE,OAAc;gBAFT,MAAM;YAAM,MAAM;;IAiEvC,aAAa,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE;;;;IASrD,eAAe,CAAC,WAAW,GAAE,MAAU;IAWvC,UAAU;IAQV,eAAe,CAAC,CAAC,EAAE,GAAG;CASvB"}
package/dist/components/libs/cache/ProductsLocalStorage.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import AppStudioCache from "./AppStudioCache";
2
+ import { getProductGidsFromIds } from "../../../lib/utils";
2
3
  export default class ProductsLocalStorage extends AppStudioCache {
3
4
  getIdCacheKey(id) {
4
5
  return `${this.cachePrefix}-data-${id}`;
@@ -31,8 +32,11 @@ export default class ProductsLocalStorage extends AppStudioCache {
31
32
  getCacheItem({ id, handle, }) {
32
33
  if (!(id === null || id === void 0 ? void 0 : id.length) && !(handle === null || handle === void 0 ? void 0 : handle.length))
33
34
  return null;
34
- let objectId = id;
35
- if (handle === null || handle === void 0 ? void 0 : handle.length) {
35
+ let objectId = null;
36
+ if (id === null || id === void 0 ? void 0 : id.length) {
37
+ objectId = getProductGidsFromIds([id])[0];
38
+ }
39
+ else if (handle === null || handle === void 0 ? void 0 : handle.length) {
36
40
  objectId = localStorage.getItem(this.getHandleCacheKey(handle));
37
41
  }
38
42
  if (!(objectId === null || objectId === void 0 ? void 0 : objectId.length))
@@ -45,7 +49,7 @@ export default class ProductsLocalStorage extends AppStudioCache {
45
49
  getCacheItems(products) {
46
50
  var _a, _b;
47
51
  const returnProducts = ((_a = products === null || products === void 0 ? void 0 : products.productIds) === null || _a === void 0 ? void 0 : _a.length)
48
- ? products.productIds.map((id) => this.getCacheItem({ id }))
52
+ ? products.productIds.map((id) => this.getCacheItem({ id: getProductGidsFromIds([id])[0] }))
49
53
  : ((_b = products === null || products === void 0 ? void 0 : products.productHandles) === null || _b === void 0 ? void 0 : _b.length)
50
54
  ? products.productHandles.map((handle) => this.getCacheItem({ handle }))
51
55
  : [];
package/dist/components/ui/button.js CHANGED
@@ -83,7 +83,7 @@ const labelVariants = cva("truncate", {
83
83
  });
84
84
  const Button = (_a) => {
85
85
  var { className, labelClassName, labelStyle, variant, size, asChild = false, loading, icon, iconColor, iconStrokeColor, iconPosition, iconSize, iconUrl, iconClassName, onClick, type, disableHaptic = false } = _a, props = __rest(_a, ["className", "labelClassName", "labelStyle", "variant", "size", "asChild", "loading", "icon", "iconColor", "iconStrokeColor", "iconPosition", "iconSize", "iconUrl", "iconClassName", "onClick", "type", "disableHaptic"]);
86
- const { action } = useActions();
86
+ const webbridgeActions = useActions();
87
87
  const Comp = asChild
88
88
  ? Slot
89
89
  : (onClick || type ? "button" : "div");
@@ -96,11 +96,12 @@ const Button = (_a) => {
96
96
  const LoadingButton = () => (_jsx("div", Object.assign({ className: cn("flex items-center justify-center", size === "icon" ? "h-5" : "h-6") }, { children: _jsx(Icon, { className: cn(iconVariants({ variant }), "h-5 w-5 animate-spin"), name: "loader", style: { color: iconColor } }) })));
97
97
  const handleClick = Comp === "button" && onClick
98
98
  ? (e) => {
99
+ var _a;
99
100
  try {
100
- onClick(e);
101
101
  if (!disableHaptic) {
102
- action("trigger/haptic");
102
+ (_a = webbridgeActions.action) === null || _a === void 0 ? void 0 : _a.call(webbridgeActions, "trigger/haptic");
103
103
  }
104
+ onClick(e);
104
105
  }
105
106
  catch (error) {
106
107
  console.error(error);
package/dist/components/ui/quantity-pickerNEW.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface QuantityPickerNEWProps extends React.HTMLAttributes<HTMLDivElem
19
19
  buttonCornerRadius?: number;
20
20
  debounceTime?: number;
21
21
  max?: number;
22
+ parentRef?: React.RefObject<HTMLDivElement>;
22
23
  }
23
24
  declare const QuantityPickerNEW: React.ForwardRefExoticComponent<QuantityPickerNEWProps & React.RefAttributes<HTMLDivElement>>;
24
25
  export { QuantityPickerNEW };
package/dist/components/ui/quantity-pickerNEW.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"quantity-pickerNEW.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerNEW.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAwED,QAAA,MAAM,iBAAiB,+FAoLtB,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
1
+ {"version":3,"file":"quantity-pickerNEW.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerNEW.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAC5C;AAwED,QAAA,MAAM,iBAAiB,+FA0KtB,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
package/dist/components/ui/quantity-pickerNEW.js CHANGED
@@ -15,7 +15,6 @@ import * as React from "react";
15
15
  import { cn } from "../../lib/utils";
16
16
  import { Icon } from "./icon";
17
17
  import { LoadingDots } from "./loading-dots";
18
- import debounce from "lodash/debounce";
19
18
  const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled }) => {
20
19
  const [isButtonPressed, setIsButtonPressed] = React.useState(false);
21
20
  // Handle press state manually for the invisible button
@@ -40,23 +39,14 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
40
39
  }, disabled: disabled, "aria-label": "Quantity button" })] })));
41
40
  };
42
41
  const QuantityPickerNEW = React.forwardRef((_a, ref) => {
43
- var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, onValueSet, onAdjustQuantity, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false, debounceTime = 300 } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "onValueSet", "onAdjustQuantity", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading", "debounceTime"]);
42
+ var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, isDecreaseDisabled, isIncreaseDisabled, value, onValueSet, onAdjustQuantity, inputStyle, buttonStyle, buttonCornerRadius = 4, max = 99, loading = false, debounceTime = 300, parentRef } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "isDecreaseDisabled", "isIncreaseDisabled", "value", "onValueSet", "onAdjustQuantity", "inputStyle", "buttonStyle", "buttonCornerRadius", "max", "loading", "debounceTime", "parentRef"]);
43
+ const inputRef = React.useRef(null);
44
44
  const [isFocused, setIsFocused] = React.useState(false);
45
- const pendingQuantityAdjustment = React.useRef(0);
46
45
  const [localInputValue, setLocalInputValue] = React.useState(value);
47
46
  // Update local state when external value changes
48
47
  React.useEffect(() => {
49
- if (pendingQuantityAdjustment.current === 0) {
50
- setLocalInputValue(value);
51
- }
48
+ setLocalInputValue(value);
52
49
  }, [value]);
53
- // Create debounced function for applying changes
54
- const debouncedApplyChanges = React.useMemo(() => debounce(() => {
55
- if (pendingQuantityAdjustment.current !== 0) {
56
- onAdjustQuantity(pendingQuantityAdjustment.current);
57
- pendingQuantityAdjustment.current = 0;
58
- }
59
- }, debounceTime), [debounceTime, onAdjustQuantity]);
60
50
  const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
61
51
  ? `${buttonCornerRadius}px`
62
52
  : undefined, borderBottomLeftRadius: buttonCornerRadius
@@ -68,56 +58,60 @@ const QuantityPickerNEW = React.forwardRef((_a, ref) => {
68
58
  ? `${buttonCornerRadius}px`
69
59
  : undefined });
70
60
  const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
71
- const adjustQuantity = (amount) => {
72
- const newAmount = localInputValue + amount;
73
- const clampedNewAmount = Math.min(Math.max(newAmount, 0), max);
74
- // Update local value immediately
75
- setLocalInputValue(clampedNewAmount);
76
- // Track pending change for batched update
77
- pendingQuantityAdjustment.current += amount;
78
- // Trigger debounced API update
79
- debouncedApplyChanges();
80
- };
81
61
  const handleDecreaseClick = (e) => {
82
62
  e.preventDefault();
83
63
  e.stopPropagation();
84
- adjustQuantity(-1);
64
+ onAdjustQuantity(-1);
85
65
  onDecreaseClick(e);
86
66
  };
87
67
  const handleIncreaseClick = (e) => {
88
68
  e.preventDefault();
89
69
  e.stopPropagation();
90
- adjustQuantity(1);
70
+ onAdjustQuantity(1);
91
71
  onIncreaseClick(e);
92
72
  };
93
- return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: localInputValue === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", pattern: "[0-9]*", disabled: loading, max: max, value: localInputValue, onBlur: (e) => {
73
+ return (_jsxs("div", Object.assign({ className: cn("flex relative", className), ref: ref }, props, { children: [isDeleteOnly ? (_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: handleDecreaseClick, iconUrl: value <= 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle, disabled: isDecreaseDisabled || loading }), _jsx("input", { type: "number", step: 1, enterKeyHint: "done", ref: inputRef, disabled: loading, max: max, value: localInputValue, onBlur: (e) => {
94
74
  setIsFocused(false);
75
+ if (e.target.value === "") {
76
+ setLocalInputValue(value);
77
+ return;
78
+ }
95
79
  const parsedValue = parseInt(e.target.value) || 0;
96
80
  const clampedValue = Math.min(parsedValue, max);
97
- // Cancel any pending debounced operations
98
- debouncedApplyChanges.cancel();
99
- // Update and apply changes
100
- const delta = clampedValue - value;
101
- pendingQuantityAdjustment.current = delta;
102
- setLocalInputValue(clampedValue);
103
81
  onValueSet(clampedValue);
104
- }, onFocus: () => {
82
+ }, onFocus: (e) => {
83
+ setLocalInputValue("");
105
84
  setIsFocused(true);
85
+ setTimeout(() => {
86
+ var _a;
87
+ (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
88
+ block: "start",
89
+ inline: "nearest",
90
+ behavior: "smooth",
91
+ });
92
+ }, 250);
106
93
  }, onChange: (e) => {
107
94
  const inputValue = e.target.value;
108
95
  if (inputValue === "") {
109
- setLocalInputValue(0);
96
+ setLocalInputValue("");
110
97
  }
111
98
  else {
112
- const parsedValue = parseInt(inputValue);
99
+ const parsedValue = parseInt(inputValue, 10);
113
100
  if (!isNaN(parsedValue)) {
114
101
  const clampedValue = Math.min(parsedValue, max);
115
102
  setLocalInputValue(clampedValue);
116
103
  }
117
104
  }
105
+ }, onKeyDown: (e) => {
106
+ var _a;
107
+ if (e.key === "Enter") {
108
+ e.preventDefault();
109
+ e.stopPropagation();
110
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
111
+ }
118
112
  }, className: "w-8 h-7 focus-visible:outline-no ne text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: Object.assign(Object.assign({}, inputStyle), { borderRadius: (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.borderRadius)
119
113
  ? `${inputStyle.borderRadius}px`
120
- : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: handleIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading || localInputValue >= max })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
114
+ : 0 }), inputMode: "numeric" }), _jsx(IconButton, { handler: handleIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle, disabled: isIncreaseDisabled || loading || value >= max })] })), _jsx(LoadingDots, { show: loading, size: 1, iconColor: iconColor })] })));
121
115
  });
122
116
  QuantityPickerNEW.displayName = "QuantityPickerNEW";
123
117
  export { QuantityPickerNEW };
package/dist/styles.css CHANGED
@@ -2016,6 +2016,10 @@ video {
2016
2016
  .text-\[23px\] {
2017
2017
  font-size: 23px;
2018
2018
  }
2019
+ .text-base {
2020
+ font-size: 1rem;
2021
+ line-height: 1.5rem;
2022
+ }
2019
2023
  .text-lg {
2020
2024
  font-size: 1.125rem;
2021
2025
  line-height: 1.75rem;
@@ -2619,6 +2623,10 @@ body::-webkit-scrollbar {
2619
2623
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
2620
2624
  }
2621
2625
 
2626
+ .hover\:no-underline:hover {
2627
+ text-decoration-line: none;
2628
+ }
2629
+
2622
2630
  .hover\:opacity-90:hover {
2623
2631
  opacity: 0.9;
2624
2632
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.8.62",
3
+ "version": "0.8.63",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",