@tapcart/mobile-components 0.7.43 → 0.7.45

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 (34) hide show
  1. package/README.md +10 -4
  2. package/dist/components/ThemeProvider.d.ts +3 -0
  3. package/dist/components/ThemeProvider.d.ts.map +1 -0
  4. package/dist/components/ThemeProvider.js +18 -0
  5. package/dist/components/ThemeToggle.d.ts +2 -0
  6. package/dist/components/ThemeToggle.d.ts.map +1 -0
  7. package/dist/components/ThemeToggle.js +8 -0
  8. package/dist/components/hooks/use-block-conditional-rendering.d.ts +9 -0
  9. package/dist/components/hooks/use-block-conditional-rendering.d.ts.map +1 -0
  10. package/dist/components/hooks/use-block-conditional-rendering.js +119 -0
  11. package/dist/components/hooks/use-block-conditionals.d.ts +2 -0
  12. package/dist/components/hooks/use-block-conditionals.d.ts.map +1 -0
  13. package/dist/components/hooks/use-block-conditionals.js +2 -0
  14. package/dist/components/ui/input.d.ts +17 -0
  15. package/dist/components/ui/input.d.ts.map +1 -0
  16. package/dist/components/ui/input.js +35 -0
  17. package/dist/components/ui/product-grid.d.ts +15 -0
  18. package/dist/components/ui/product-grid.d.ts.map +1 -0
  19. package/dist/components/ui/product-grid.js +22 -0
  20. package/dist/components/ui/quantity-picker.d.ts.map +1 -1
  21. package/dist/components/ui/quantity-picker.js +10 -2
  22. package/dist/index.d.ts +1 -0
  23. package/dist/index.d.ts.map +1 -1
  24. package/dist/index.js +1 -0
  25. package/dist/lib/utils.d.ts +37 -1
  26. package/dist/lib/utils.d.ts.map +1 -1
  27. package/dist/lib/utils.js +199 -0
  28. package/package.json +1 -1
  29. package/dist/components/hooks/use-customer.d.ts +0 -10
  30. package/dist/components/hooks/use-customer.d.ts.map +0 -1
  31. package/dist/components/hooks/use-customer.js +0 -24
  32. package/dist/components/ui/apple-pay-button.d.ts +0 -24
  33. package/dist/components/ui/apple-pay-button.d.ts.map +0 -1
  34. package/dist/components/ui/apple-pay-button.js +0 -122
package/README.md CHANGED
@@ -3,20 +3,25 @@
3
3
  [@tapcart/mobile-components](https://www.npmjs.com/package/@tapcart/mobile-components)
4
4
 
5
5
  # @tapcart/mobile-components
6
+
6
7
  ### Build the next-gen shopper experience for Tapcart's core product, the mobile app.
7
8
 
8
- | Status | Owner | Help |
9
- | ------ | ----------- | ----------- |
9
+ | Status | Owner | Help |
10
+ | ------ | -------------------------- | --------------- |
10
11
  | Active | @tapcart/mobile-components | dev@tapcart.com |
11
12
 
12
13
  # About this repo
14
+
13
15
  The tapcart/mobile-components repository is a component library made up of all the code components that drive our app experience.
14
16
 
15
17
  # Installation using NPM
18
+
16
19
  ### Install into your React.js project
20
+
17
21
  `npm install @tapcart/mobile-components`
18
22
 
19
23
  # Usage
24
+
20
25
  **Easy. Cake. Done.**
21
26
 
22
27
  ```
@@ -46,7 +51,7 @@ import {
46
51
  } from "@tapcart/mobile-components";
47
52
 
48
53
  <Video>
49
- <source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" />
54
+ <source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" />
50
55
  </Video>
51
56
 
52
57
  <Separator />
@@ -217,6 +222,7 @@ import {
217
222
  ```
218
223
 
219
224
  # Licenses
225
+
220
226
  Copyright (c) 2017-present Tapcart Inc.
221
227
 
222
228
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
@@ -225,4 +231,4 @@ The above copyright notice and this permission notice shall be included in all c
225
231
 
226
232
  The rights granted above may only be exercised to develop and distribute applications that integrate or interoperate with Tapcart software or services, and in the case of external, stand-alone applications that do not embed directly inside Tapcart, the rights granted above may only be exercised to develop and distribute applications that are dissimilar and visually distinct from Tapcart products and services, as determined by Tapcart in its sole discretion.
227
233
 
228
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
234
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,3 @@
1
+ import { ThemeProviderProps } from "next-themes/dist/types";
2
+ export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=ThemeProvider.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,18 @@
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
+ }
@@ -0,0 +1,2 @@
1
+ export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=ThemeToggle.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}
@@ -0,0 +1,8 @@
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
+ }
@@ -0,0 +1,9 @@
1
+ import { PhoenixBlock } from "app-studio-types";
2
+ export declare const useBlockConditionalRendering: (_props: {
3
+ appId: string;
4
+ apiUrl: string;
5
+ }, _block: PhoenixBlock) => {
6
+ shouldShow: boolean;
7
+ isLoading: boolean;
8
+ };
9
+ //# sourceMappingURL=use-block-conditional-rendering.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-block-conditional-rendering.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditional-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAGb,MAAM,kBAAkB,CAAA;AAezB,eAAO,MAAM,4BAA4B,WAC/B;IACN,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,UACO,YAAY;;;CAyJrB,CAAA"}
@@ -0,0 +1,119 @@
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 { useMemo } from "react";
14
+ import { useProducts } from "./use-products";
15
+ import { useCollection } from "./use-collection";
16
+ import { useSearchParams } from "next/navigation";
17
+ //@ts-expect-error
18
+ import { useVariables } from "@tapcart/webbridge-react";
19
+ import { gidFromId, countNumberOfTagsInState, getEnvState, shouldShowBlock, } from "../../lib/utils";
20
+ export const useBlockConditionalRendering = (_props, _block) => {
21
+ var _a, _b, _c, _d, _e, _f;
22
+ const _g = ((_a = _block === null || _block === void 0 ? void 0 : _block.visibilityConditions) === null || _a === void 0 ? void 0 : _a.conditions) || {}, { enabled: isEnabled = false, exclude: isInverse = false } = _g, restOfProps = __rest(_g, ["enabled", "exclude"]);
23
+ let shouldShow = true;
24
+ const blockState = restOfProps;
25
+ const { appId = "", apiUrl = "" } = _props;
26
+ const searchParams = useSearchParams();
27
+ const variables = useVariables();
28
+ const deviceVariables = variables === null || variables === void 0 ? void 0 : variables.device;
29
+ const customerVariables = variables === null || variables === void 0 ? void 0 : variables.customer;
30
+ // locale is provided in this form en_US
31
+ const [language, country] = ((_b = deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.locale) === null || _b === void 0 ? void 0 : _b.split("_")) || [];
32
+ const productId = (_c = searchParams.get("productId")) !== null && _c !== void 0 ? _c : undefined;
33
+ const location = {
34
+ country: country || "US",
35
+ language: language || "en",
36
+ };
37
+ let blockProductMetafields = useMemo(() => blockState && blockState.productMetafield
38
+ ? blockState.productMetafield
39
+ : [], [blockState]);
40
+ const productMetafieldsQuery = useMemo(() => blockProductMetafields.map((item) => {
41
+ // these are the fields used in the query.
42
+ return {
43
+ namespace: item.namespace,
44
+ key: item.key,
45
+ };
46
+ }), [blockProductMetafields]);
47
+ // Fetch product if productId is present
48
+ const { products, error: useProductsError, isLoading: useProductsLoading, } = useProducts(productId !== undefined && isEnabled
49
+ ? {
50
+ productIds: [gidFromId(productId)],
51
+ baseURL: apiUrl,
52
+ productHandles: [],
53
+ metafields: productMetafieldsQuery,
54
+ }
55
+ : null);
56
+ const blockCollectionMetafields = useMemo(() => blockState && blockState.collectionMetafield
57
+ ? blockState.collectionMetafield
58
+ : [], [blockState]);
59
+ const collectionMetafieldsQuery = useMemo(() => blockCollectionMetafields.map((item) => {
60
+ // these are the fields used in the query.
61
+ return {
62
+ namespace: item.namespace,
63
+ key: item.key,
64
+ };
65
+ }), [blockCollectionMetafields]);
66
+ const memoizedMetafields = useMemo(() => collectionMetafieldsQuery
67
+ ? collectionMetafieldsQuery
68
+ .map((m) => `${m.namespace}.${m.key}`)
69
+ .join(",")
70
+ : undefined, [collectionMetafieldsQuery]);
71
+ const collectionId = (_d = searchParams.get("collectionId")) !== null && _d !== void 0 ? _d : undefined;
72
+ const collectionHandle = (_e = searchParams.get("collectionHandle")) !== null && _e !== void 0 ? _e : undefined;
73
+ const { specificCollection = {}, error: useCollectionError, loading: useCollectionLoading, } = useCollection({
74
+ appId,
75
+ apiUrl,
76
+ collectionId,
77
+ collectionHandle,
78
+ language: location === null || location === void 0 ? void 0 : location.language,
79
+ metafields: memoizedMetafields,
80
+ });
81
+ if (useProductsError || useCollectionError) {
82
+ console.error("Unable to load products in conditional block rendering hook: ", useProductsError !== null && useProductsError !== void 0 ? useProductsError : useCollectionError);
83
+ }
84
+ try {
85
+ // if block has tags
86
+ if (((_f = _block.visibilityConditions) === null || _f === void 0 ? void 0 : _f.conditions) !== undefined && isEnabled) {
87
+ const blockHasTags = countNumberOfTagsInState(blockState) > 0;
88
+ if (blockHasTags) {
89
+ const product = products.length === 1 ? products[0] : undefined;
90
+ const envState = getEnvState({
91
+ location,
92
+ product,
93
+ collection: specificCollection,
94
+ customer: customerVariables,
95
+ });
96
+ //@ts-expect-errors
97
+ const shouldShowPreInverse = shouldShowBlock(envState, blockState);
98
+ // TODO: Currently negation of properties is not available but is required for migration of certain merchants
99
+ // This code is to be removed and updated when inverse feature is available for all blocks
100
+ // If exclude tag is applied then block should show inversely
101
+ if (isInverse) {
102
+ shouldShow = !shouldShowPreInverse;
103
+ }
104
+ else {
105
+ shouldShow = shouldShowPreInverse;
106
+ }
107
+ }
108
+ }
109
+ // if conditionals is disabled, show the block.
110
+ if (!isEnabled) {
111
+ return { shouldShow: true, isLoading: false };
112
+ }
113
+ return { shouldShow, isLoading: useProductsLoading || useCollectionLoading };
114
+ }
115
+ catch (e) {
116
+ console.error("conditionals error: ", e);
117
+ return { shouldShow: true, isLoading: false };
118
+ }
119
+ };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=use-block-conditionals.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-block-conditionals.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-block-conditionals.ts"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ "use client";
2
+ export {};
@@ -0,0 +1,17 @@
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
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,35 @@
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 };
@@ -0,0 +1,15 @@
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
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,22 @@
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 };
@@ -1 +1 @@
1
- {"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,mBACf,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,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,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;CAC5B;AAoBD,QAAA,MAAM,cAAc,4FA2EnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
1
+ {"version":3,"file":"quantity-picker.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,mBACf,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,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,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;CAC5B;AAoBD,QAAA,MAAM,cAAc,4FAmFnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
@@ -17,8 +17,16 @@ import { Icon } from "./icon";
17
17
  const IconButton = ({ iconUrl, iconColor, handler, className, style }) => (_jsx("button", Object.assign({ onClick: handler, className: cn("flex items-center justify-center h-7 w-7 bg-stateColors-skeleton border border-coreColors-dividingLines", className), style: style }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4 }) })));
18
18
  const QuantityPicker = React.forwardRef((_a, ref) => {
19
19
  var { className, decreaseIconUrl, increaseIconUrl, deleteIconUrl, isDeleteOnly = false, iconColor, onDecreaseClick, onIncreaseClick, value, setValue, inputStyle, buttonStyle, buttonCornerRadius = 4 } = _a, props = __rest(_a, ["className", "decreaseIconUrl", "increaseIconUrl", "deleteIconUrl", "isDeleteOnly", "iconColor", "onDecreaseClick", "onIncreaseClick", "value", "setValue", "inputStyle", "buttonStyle", "buttonCornerRadius"]);
20
- const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined, borderBottomLeftRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
21
- const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined, borderBottomRightRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
20
+ const leftButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopLeftRadius: buttonCornerRadius
21
+ ? `${buttonCornerRadius}px`
22
+ : undefined, borderBottomLeftRadius: buttonCornerRadius
23
+ ? `${buttonCornerRadius}px`
24
+ : undefined });
25
+ const rightButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderTopRightRadius: buttonCornerRadius
26
+ ? `${buttonCornerRadius}px`
27
+ : undefined, borderBottomRightRadius: buttonCornerRadius
28
+ ? `${buttonCornerRadius}px`
29
+ : undefined });
22
30
  const singleButtonStyle = Object.assign(Object.assign({}, buttonStyle), { borderRadius: buttonCornerRadius ? `${buttonCornerRadius}px` : undefined });
23
31
  return (_jsx("div", Object.assign({ className: cn("flex", className), ref: ref }, props, { children: isDeleteOnly ? (_jsx(IconButton, { handler: onDecreaseClick, iconUrl: deleteIconUrl, iconColor: iconColor, style: singleButtonStyle })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { handler: onDecreaseClick, iconUrl: value === 1 ? deleteIconUrl : decreaseIconUrl, iconColor: iconColor, style: leftButtonStyle }), _jsx("input", { type: "text", pattern: "[0-9]*", value: value, onBlur: (e) => (e.target.value = value.toString()), onFocus: (e) => (e.target.value = ""), onChange: (e) => setValue(parseInt(e.target.value) || 0), className: "w-8 h-7 focus-visible:outline-none text-center bg-coreColors-inputBackground text-textColors-primaryColor border-t border-b border-coreColors-dividingLines", style: inputStyle }), _jsx(IconButton, { handler: onIncreaseClick, iconUrl: increaseIconUrl, iconColor: iconColor, style: rightButtonStyle })] })) })));
24
32
  });
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export * from "./components/hooks/use-sort-filter";
10
10
  export * from "./components/hooks/use-product-options";
11
11
  export * from "./components/hooks/use-shop";
12
12
  export * from "./components/hooks/use-mock-products";
13
+ export * from "./components/hooks/use-block-conditional-rendering";
13
14
  export * from "./components/ui/accordion";
14
15
  export * from "./components/ui/aspect-ratio";
15
16
  export * from "./components/ui/badge";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,EAC5B,eAAe,EACf,cAAc,EACd,SAAS,EACT,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,2CAA2C,CAAA;AACzD,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sCAAsC,CAAA;AACpD,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA;AACpD,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,aAAa,CAAA;AAC3B,cAAc,6CAA6C,CAAA;AAC3D,cAAc,kDAAkD,CAAA;AAChE,cAAc,qBAAqB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,EAAE,EACF,GAAG,EACH,QAAQ,EACR,4BAA4B,EAC5B,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,EACzB,4BAA4B,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,4BAA4B,EAC5B,eAAe,EACf,cAAc,EACd,SAAS,EACT,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AACpB,cAAc,2CAA2C,CAAA;AACzD,cAAc,mCAAmC,CAAA;AACjD,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sCAAsC,CAAA;AACpD,cAAc,yCAAyC,CAAA;AACvD,cAAc,oCAAoC,CAAA;AAClD,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA;AACpD,cAAc,oDAAoD,CAAA;AAClE,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,sCAAsC,CAAA;AACpD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kDAAkD,CAAA;AAChE,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,mCAAmC,CAAA;AACjD,cAAc,aAAa,CAAA;AAC3B,cAAc,6CAA6C,CAAA;AAC3D,cAAc,kDAAkD,CAAA;AAChE,cAAc,qBAAqB,CAAA"}
package/dist/index.js CHANGED
@@ -11,6 +11,7 @@ export * from "./components/hooks/use-sort-filter";
11
11
  export * from "./components/hooks/use-product-options";
12
12
  export * from "./components/hooks/use-shop";
13
13
  export * from "./components/hooks/use-mock-products";
14
+ export * from "./components/hooks/use-block-conditional-rendering";
14
15
  export * from "./components/ui/accordion";
15
16
  export * from "./components/ui/aspect-ratio";
16
17
  export * from "./components/ui/badge";
@@ -1,4 +1,4 @@
1
- import { Integrations } from "app-studio-types";
1
+ import { Integrations, ConditionalSelectorMetafield, ConditionalSelectorValues, Collection, UserSelectedTag, Product, Customer, ShopifyMetafield } from "app-studio-types";
2
2
  import { ClassValue } from "clsx";
3
3
  export type Color = {
4
4
  type: "custom" | "brand-kit";
@@ -211,4 +211,40 @@ export declare const getInputPlaceholderTextProps: (placeholderText: TextStyle)
211
211
  placeholderFont: string;
212
212
  placeholderFontWeight: string | number;
213
213
  };
214
+ export declare function gidFromId(id: string): string;
215
+ export declare const countNumberOfTagsInState: (state: ConditionalSelectorValues) => number;
216
+ type Location = {
217
+ country: string;
218
+ language: string;
219
+ };
220
+ export declare const getEnvState: ({ location, product, collection, customer, }: {
221
+ location: Location;
222
+ product?: Product | undefined;
223
+ collection?: Collection | null | undefined;
224
+ customer?: Customer | undefined;
225
+ }) => {
226
+ deviceLanguage: {
227
+ value: string;
228
+ }[];
229
+ deviceCountry: {
230
+ value: string;
231
+ }[];
232
+ collectionName: {
233
+ value: string | undefined;
234
+ }[];
235
+ collectionMetafield: any;
236
+ productTag: UserSelectedTag[];
237
+ productName: UserSelectedTag[];
238
+ productMetafield: import("app-studio-types").Metafield[];
239
+ customerAuthenticated: {
240
+ value: string;
241
+ }[];
242
+ customerTag: UserSelectedTag[];
243
+ customerMetafield: ShopifyMetafield[];
244
+ };
245
+ export declare const isUserSelectedTag: (obj: any) => obj is UserSelectedTag;
246
+ export declare const isMetafield: (obj: any) => obj is ConditionalSelectorMetafield;
247
+ export declare const isArrayOfUserSelectedTags: (arr: any[]) => arr is UserSelectedTag[];
248
+ export declare const isArrayOfMetafields: (arr: any[]) => arr is ConditionalSelectorMetafield[];
249
+ export declare const shouldShowBlock: (envState: ConditionalSelectorValues, blockState: ConditionalSelectorValues) => boolean;
214
250
  //# sourceMappingURL=utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}
package/dist/lib/utils.js CHANGED
@@ -282,3 +282,202 @@ export const getInputPlaceholderTextProps = (placeholderText) => {
282
282
  };
283
283
  };
284
284
  // #endregion =-=-=-= END BLOCK UTILS =-=-=-=
285
+ // --- Start (Block conditional rendering util functions) ----
286
+ export function gidFromId(id) {
287
+ if (id.startsWith("gid://shopify/Product/"))
288
+ return id;
289
+ return `gid://shopify/Product/${id}`;
290
+ }
291
+ export const countNumberOfTagsInState = (state) => {
292
+ let totalCount = 0;
293
+ Object.values(state).forEach((arr) => {
294
+ totalCount += arr.length;
295
+ });
296
+ return totalCount;
297
+ };
298
+ const getFormattedTags = (tags) => {
299
+ // If tags are undefined or empty, return an empty array
300
+ if (!tags || tags.length === 0) {
301
+ return [];
302
+ }
303
+ // Otherwise, map the tags to the desired format
304
+ return tags.map((tag) => ({ value: tag }));
305
+ };
306
+ const getLocaleNameFromCode = (deviceLocale) => {
307
+ let language = "English";
308
+ try {
309
+ const languageNames = new Intl.DisplayNames(["en"], { type: "language" });
310
+ const languageNamesInEnglish = languageNames.of(deviceLocale);
311
+ // if has found language
312
+ if (languageNamesInEnglish !== undefined &&
313
+ languageNamesInEnglish.length > 0) {
314
+ language = languageNamesInEnglish;
315
+ }
316
+ else {
317
+ // languageNames.of(xxxx) can also throw error if not found
318
+ throw new Error("Language not found");
319
+ }
320
+ }
321
+ catch (error) {
322
+ console.error(`Device locale not found: ${deviceLocale}, defaulting to English US`);
323
+ console.log(error);
324
+ }
325
+ return language;
326
+ };
327
+ const getRegion = (deviceCountry) => {
328
+ let country = "United States";
329
+ try {
330
+ const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
331
+ const regionNamesInEnglish = regionNames.of(deviceCountry);
332
+ if (regionNamesInEnglish !== undefined && regionNamesInEnglish.length > 0) {
333
+ country = regionNamesInEnglish;
334
+ }
335
+ else {
336
+ // regionNames.of(xxxx) can also throw error if not found
337
+ throw new Error("Region not found");
338
+ }
339
+ }
340
+ catch (error) {
341
+ console.error(`Device country not found: ${deviceCountry}, defaulting to United States`);
342
+ console.error(error);
343
+ }
344
+ return country;
345
+ };
346
+ const getProductEnvTags = (product) => {
347
+ let productName = [];
348
+ let productTag = [];
349
+ if (product) {
350
+ const productNameEnvTag = {
351
+ value: product.title,
352
+ };
353
+ productName = [productNameEnvTag];
354
+ productTag = getFormattedTags(product.tags);
355
+ }
356
+ return {
357
+ productName,
358
+ productTag,
359
+ };
360
+ };
361
+ const getCustomerMetafield = (customer) => {
362
+ if (!customer) {
363
+ return [];
364
+ }
365
+ const reformattedArray = [];
366
+ //@ts-expect-error
367
+ const { metafields, id } = customer;
368
+ // Loop through each key (namespace) in the original object
369
+ for (const namespace in metafields) {
370
+ const innerObject = metafields[namespace];
371
+ // Check if innerObject is not undefined before calling Object.entries
372
+ if (innerObject) {
373
+ const entries = Object.entries(innerObject); // Extract key-value pairs from the inner object
374
+ // Iterate through all key-value pairs in the namespace
375
+ entries.forEach(([key, value]) => {
376
+ // Add the reformatted object to the result array
377
+ reformattedArray.push({
378
+ namespace,
379
+ key,
380
+ //@ts-expect-error
381
+ value,
382
+ id,
383
+ });
384
+ });
385
+ }
386
+ }
387
+ return reformattedArray;
388
+ };
389
+ export const getEnvState = ({ location, product, collection, customer, }) => {
390
+ const collectionName = {
391
+ value: collection === null || collection === void 0 ? void 0 : collection.handle,
392
+ };
393
+ const deviceLanguageTags = {
394
+ value: getLocaleNameFromCode(location === null || location === void 0 ? void 0 : location.language),
395
+ };
396
+ const deviceCountryTags = {
397
+ value: getRegion(location === null || location === void 0 ? void 0 : location.country),
398
+ };
399
+ const { productTag, productName } = getProductEnvTags(product);
400
+ const unCleanedProductMetafields = product && !!product.metafields ? product.metafields : [];
401
+ // shopify sometimes returns [null]
402
+ const productMetafield = unCleanedProductMetafields.filter((item) => item !== null);
403
+ const unCleanedCollectionMetafields =
404
+ //@ts-expect-error
405
+ collection && !!collection.metafields ? collection.metafields : [];
406
+ const collectionMetafield = unCleanedCollectionMetafields.filter(
407
+ //@ts-expect-error
408
+ (item) => item !== null);
409
+ const customerAuthenticated = {
410
+ value: !!(customer === null || customer === void 0 ? void 0 : customer.id) ? "Logged in" : "Logged out",
411
+ };
412
+ const customerTag = getFormattedTags(customer === null || customer === void 0 ? void 0 : customer.tags);
413
+ const customerMetafield = getCustomerMetafield(customer);
414
+ return {
415
+ deviceLanguage: [deviceLanguageTags],
416
+ deviceCountry: [deviceCountryTags],
417
+ collectionName: collectionName ? [collectionName] : [],
418
+ collectionMetafield,
419
+ productTag,
420
+ productName,
421
+ productMetafield,
422
+ customerAuthenticated: [customerAuthenticated],
423
+ customerTag,
424
+ customerMetafield,
425
+ };
426
+ };
427
+ export const isUserSelectedTag = (obj) => "value" in obj && typeof obj.value === "string" && obj.id === undefined;
428
+ export const isMetafield = (obj) => "id" in obj && typeof obj.id === "string";
429
+ export const isArrayOfUserSelectedTags = (arr) => {
430
+ return arr.every(isUserSelectedTag);
431
+ };
432
+ export const isArrayOfMetafields = (arr) => {
433
+ return arr.every(isMetafield);
434
+ };
435
+ const doTagsMatch = (blockTags, envTags) => {
436
+ return (blockTags.filter((blockTag) => envTags.some((envTag) => envTag.value === blockTag.value)).length > 0);
437
+ };
438
+ const matchingMetafields = (blockMetafields, envMetafields) => {
439
+ return (blockMetafields.filter((blockMetafield) => envMetafields.some((envMetafield) => envMetafield.key === blockMetafield.key &&
440
+ envMetafield.value === blockMetafield.value &&
441
+ envMetafield.namespace === blockMetafield.namespace)).length > 0);
442
+ };
443
+ export const shouldShowBlock = (envState, blockState) => {
444
+ const blockKeys = Object.keys(blockState);
445
+ let hasMatchingMetafields = false;
446
+ let hasMatchingTags = false;
447
+ // go through each key in blockState
448
+ for (let i = 0; i < blockKeys.length; i++) {
449
+ const blockKey = blockKeys[i];
450
+ // does env state have block state subcategory
451
+ if (blockKey !== undefined &&
452
+ //@ts-expect-error Todo: fix the typing for grabbing the block's conditional tag data
453
+ envState[blockKey] !== undefined &&
454
+ //@ts-expect-error
455
+ envState[blockKey].length > 0) {
456
+ //@ts-expect-error
457
+ const envTags = envState[blockKey];
458
+ //@ts-expect-error
459
+ const blockTags = blockState[blockKey];
460
+ // if array of tags
461
+ if (envTags &&
462
+ isArrayOfUserSelectedTags(envTags) &&
463
+ blockTags &&
464
+ isArrayOfUserSelectedTags(blockTags)) {
465
+ // check for match of tags
466
+ hasMatchingTags = doTagsMatch(blockTags, envTags);
467
+ // if one of the tags match, show it as it's currently OR.
468
+ if (hasMatchingTags) {
469
+ break;
470
+ }
471
+ }
472
+ if (envTags &&
473
+ isArrayOfMetafields(envTags) &&
474
+ blockTags &&
475
+ isArrayOfMetafields(blockTags)) {
476
+ // check for a match of metafields
477
+ hasMatchingMetafields = matchingMetafields(blockTags, envTags);
478
+ }
479
+ }
480
+ }
481
+ return hasMatchingMetafields || hasMatchingTags;
482
+ };
483
+ // --- End (Block conditional rendering util functions) ----
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.7.43",
3
+ "version": "0.7.45",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",
@@ -1,10 +0,0 @@
1
- type Customer = {
2
- isAuthenticated: boolean;
3
- };
4
- type UseCustomerProps = {};
5
- type UseCustomerReturn = {
6
- customer: Customer;
7
- };
8
- export declare const useCustomer: (props: UseCustomerProps | null) => UseCustomerReturn;
9
- export {};
10
- //# sourceMappingURL=use-customer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-customer.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-customer.ts"],"names":[],"mappings":"AAWA,KAAK,QAAQ,GAAG;IACd,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAGD,KAAK,gBAAgB,GAAG,EAAE,CAAA;AAE1B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,UACf,gBAAgB,GAAG,IAAI,KAC7B,iBAuBF,CAAA"}
@@ -1,24 +0,0 @@
1
- "use client";
2
- import { useState, useEffect } from "react";
3
- // @ts-ignore -- webbridge-react is not typed (yet)
4
- import { useActions } from "@tapcart/webbridge-react";
5
- export const useCustomer = (props) => {
6
- const [isAuthenticated, setIsAuthenticated] = useState(false);
7
- const [customer, setCustomer] = useState({});
8
- const actions = useActions();
9
- // verify customer
10
- useEffect(() => {
11
- try {
12
- // webbridge method to get customerIdentity
13
- actions.getCustomerIdentity(null, {
14
- onSuccess: (user) => setIsAuthenticated(!!(user === null || user === void 0 ? void 0 : user.email)),
15
- });
16
- }
17
- catch (e) {
18
- console.log("unable to get customer identity ", e);
19
- }
20
- }, [actions]);
21
- return {
22
- customer: Object.assign({ isAuthenticated }, customer),
23
- };
24
- };
@@ -1,24 +0,0 @@
1
- /// <reference types="applepayjs" />
2
- import * as React from "react";
3
- export type ApplePayButtonType = 'plain' | 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up';
4
- export type ApplePayButtonStyle = 'black' | 'white' | 'white-outline';
5
- export interface ApplePayButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
- displayName: string;
7
- amount: number;
8
- startSessionURL: string;
9
- appId: string;
10
- domainName: string;
11
- countryCode?: string;
12
- currencyCode?: string;
13
- merchantCapabilities?: ApplePayJS.ApplePayMerchantCapability[];
14
- supportedNetworks?: string[];
15
- buttonType?: ApplePayButtonType;
16
- buttonStyle?: ApplePayButtonStyle;
17
- onPaymentAuthorized?: (paymentData: ApplePayJS.ApplePayPayment) => void;
18
- }
19
- declare const ApplePayButton: {
20
- ({ displayName, amount, startSessionURL, appId, domainName, countryCode, currencyCode, merchantCapabilities, supportedNetworks, buttonType, buttonStyle, onPaymentAuthorized, }: ApplePayButtonProps): import("react/jsx-runtime").JSX.Element;
21
- displayName: string;
22
- };
23
- export { ApplePayButton };
24
- //# sourceMappingURL=apple-pay-button.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"apple-pay-button.d.ts","sourceRoot":"","sources":["../../../components/ui/apple-pay-button.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,KAAK,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE3N,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,CAAA;AAErE,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAAE,CAAC;IAC/D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,eAAe,KAAK,IAAI,CAAC;CACzE;AAED,QAAA,MAAM,cAAc;qLAcf,mBAAmB;;CA2IvB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
@@ -1,122 +0,0 @@
1
- "use client";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
- import * as React from "react";
13
- import ApplePayButtonComponent from 'apple-pay-button';
14
- const ApplePayButton = ({ displayName, amount, startSessionURL, appId, domainName, countryCode = 'US', currencyCode = 'USD', merchantCapabilities = ["supports3DS"], supportedNetworks = ["visa", "masterCard", "amex", "discover"], buttonType = 'plain', buttonStyle = 'white-outline', onPaymentAuthorized, }) => {
15
- const [paymentDataResult, setPaymentDataResult] = React.useState("");
16
- const onClick = () => {
17
- const applePayRequest = {
18
- countryCode,
19
- currencyCode,
20
- merchantCapabilities,
21
- supportedNetworks,
22
- total: {
23
- label: displayName,
24
- type: "final",
25
- amount: amount.toString(),
26
- }
27
- };
28
- const session = new ApplePaySession(3, applePayRequest);
29
- handleEventsForApplePay(session);
30
- session.begin();
31
- };
32
- const defaultFetcher = (url, body) => fetch(url, {
33
- method: body ? "POST" : "GET",
34
- headers: {
35
- "Content-Type": "application/json",
36
- },
37
- body: body ? JSON.stringify(body) : undefined,
38
- }).then((res) => res.json());
39
- const validateMerchant = (validationURL, appId, domainName, displayName) => __awaiter(void 0, void 0, void 0, function* () {
40
- let url = startSessionURL;
41
- let body = {
42
- validationURL,
43
- appId,
44
- domainName,
45
- displayName
46
- };
47
- console.log("request body", body);
48
- const response = yield defaultFetcher(url, body);
49
- return response.data;
50
- });
51
- const handleEventsForApplePay = (session) => {
52
- session.onvalidatemerchant = (event) => __awaiter(void 0, void 0, void 0, function* () {
53
- const response = yield validateMerchant(event.validationURL, appId, domainName, displayName);
54
- if (response) {
55
- session.completeMerchantValidation(response);
56
- }
57
- else {
58
- console.error("Error during validating merchant");
59
- }
60
- });
61
- session.onpaymentmethodselected = (event) => {
62
- const update = {
63
- newTotal: {
64
- label: displayName,
65
- type: "final",
66
- amount: amount.toString(),
67
- }
68
- };
69
- session.completePaymentMethodSelection(update);
70
- };
71
- session.onshippingmethodselected = (event) => {
72
- const update = {
73
- newTotal: {
74
- label: displayName,
75
- type: "final",
76
- amount: amount.toString(),
77
- }
78
- };
79
- session.completeShippingMethodSelection(update);
80
- };
81
- session.onshippingcontactselected = (event) => {
82
- const update = {
83
- newTotal: {
84
- label: displayName,
85
- type: "final",
86
- amount: amount.toString(),
87
- }
88
- };
89
- session.completeShippingContactSelection(update);
90
- };
91
- session.onpaymentauthorized = (event) => __awaiter(void 0, void 0, void 0, function* () {
92
- const paymentData = event.payment;
93
- if (onPaymentAuthorized) { // Call the callback if provided
94
- onPaymentAuthorized(paymentData);
95
- }
96
- if (paymentData.token) {
97
- const paymentDataJson = JSON.stringify(paymentData.token, null, 2);
98
- console.log("paymentData", paymentDataJson);
99
- setPaymentDataResult(paymentDataJson);
100
- const result = {
101
- status: ApplePaySession.STATUS_SUCCESS,
102
- };
103
- session.completePayment(result);
104
- }
105
- else {
106
- const result = {
107
- status: ApplePaySession.STATUS_FAILURE,
108
- };
109
- session.completePayment(result);
110
- }
111
- });
112
- session.oncancel = (event) => {
113
- console.log("Session Cancelled.");
114
- };
115
- };
116
- return (_jsxs("div", { children: [_jsx("div", Object.assign({ className: "flex flex-row justify-center items-center pt-40" }, { children: _jsx(ApplePayButtonComponent, { onClick: onClick, style: {
117
- height: "48px",
118
- borderRadius: '4px',
119
- }, type: buttonType, buttonStyle: buttonStyle }) })), _jsx("div", Object.assign({ className: "w-100 overflow-auto" }, { children: _jsx("pre", Object.assign({ className: "whitespace-pre-wrap break-words" }, { children: paymentDataResult })) }))] }));
120
- };
121
- ApplePayButton.displayName = "ApplePayButton";
122
- export { ApplePayButton };