@rebuy/rebuy-hydrogen 2.3.1 → 3.0.0-beta.1
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/package.json +52 -26
- package/src/components/AddToCartBtn/AddToCartBtn.tsx +45 -0
- package/src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx +43 -0
- package/src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx +35 -0
- package/src/components/AddToCartBtn/index.ts +1 -0
- package/src/components/AddToCartBtn/types.ts +27 -0
- package/src/components/ProductCard/ProductCard.tsx +70 -0
- package/src/components/ProductCard/index.ts +1 -0
- package/src/components/ProductCard/types.ts +10 -0
- package/src/components/ProductPrice/ProductPrice.tsx +49 -0
- package/src/components/ProductPrice/index.ts +1 -0
- package/src/components/Title/Title.tsx +20 -0
- package/src/components/Title/index.ts +1 -0
- package/src/components/Title/types.ts +7 -0
- package/src/components/VariantSelect/VariantSelect.tsx +45 -0
- package/src/components/VariantSelect/index.ts +1 -0
- package/src/components/VariantSelect/types.ts +6 -0
- package/src/context/RebuyContext.tsx +9 -0
- package/src/hooks/titleLevel.tsx +42 -0
- package/src/index.ts +7 -0
- package/src/providers/RebuyHydrogenContextProvider.tsx +112 -0
- package/src/providers/RebuyHydrogenReactContextProvider.tsx +192 -0
- package/src/providers/types.ts +58 -0
- package/src/queries/cart.queries.ts +467 -0
- package/src/types/common.ts +8 -0
- package/src/types/css.d.ts +11 -0
- package/src/types/env.d.ts +12 -0
- package/src/types/rebuy.d.ts +31 -0
- package/src/types/rebuyCustom.ts +263 -0
- package/src/types/rebuySmartCart.ts +188 -0
- package/src/types/shopify.ts +142 -0
- package/src/types/widgets.ts +29 -0
- package/src/utils/convertToRebuyProduct.tsx +319 -0
- package/src/utils/createContextParameters.ts +142 -0
- package/src/utils/getEncodedAttributes.ts +11 -0
- package/src/utils/getRebuyConfig.ts +31 -0
- package/src/widgetContainer/RebuyWidgetContainer.tsx +183 -0
- package/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx +50 -0
- package/src/widgets/RebuyCompleteTheLook/index.ts +1 -0
- package/src/widgets/RebuyCompleteTheLook/types.ts +5 -0
- package/src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx +62 -0
- package/src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx +93 -0
- package/src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx +65 -0
- package/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx +118 -0
- package/src/widgets/RebuyDynamicBundleProducts/Select.tsx +41 -0
- package/src/widgets/RebuyDynamicBundleProducts/index.ts +1 -0
- package/src/widgets/RebuyDynamicBundleProducts/types.ts +23 -0
- package/src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx +66 -0
- package/src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx +218 -0
- package/src/widgets/RebuyProductAddOns/index.ts +1 -0
- package/src/widgets/RebuyProductAddOns/types.ts +24 -0
- package/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx +50 -0
- package/src/widgets/RebuyProductRecommendations/index.ts +1 -0
- package/src/widgets/RebuyProductRecommendations/types.ts +5 -0
- package/RebuyCompleteTheLook.client.jsx +0 -188
- package/RebuyContextProvider.client.jsx +0 -222
- package/RebuyContexts.client.jsx +0 -3
- package/RebuyDynamicBundleProducts.client.jsx +0 -415
- package/RebuyProductAddOnCard.client.jsx +0 -89
- package/RebuyProductAddOns.client.jsx +0 -227
- package/RebuyProductRecommendations.client.jsx +0 -68
- package/RebuyProductViewed.client.jsx +0 -62
- package/RebuyRecentlyViewedProducts.client.jsx +0 -68
- package/RebuyWidgetContainer.client.jsx +0 -136
package/package.json
CHANGED
@@ -1,23 +1,35 @@
|
|
1
1
|
{
|
2
2
|
"name": "@rebuy/rebuy-hydrogen",
|
3
3
|
"description": "This is the default library for Rebuy + Shopify Hydrogen",
|
4
|
-
"version": "
|
4
|
+
"version": "3.0.0-beta.1",
|
5
5
|
"license": "MIT",
|
6
6
|
"author": "Rebuy, Inc.",
|
7
|
+
"main": "./dist/index.js",
|
8
|
+
"module": "./dist/index.mjs",
|
9
|
+
"types": "./dist/index.d.ts",
|
7
10
|
"type": "module",
|
8
11
|
"publishConfig": {
|
9
12
|
"access": "public"
|
10
13
|
},
|
11
14
|
"files": [
|
15
|
+
"dist",
|
12
16
|
"README.md",
|
13
|
-
"**/*.
|
14
|
-
"**/*.
|
17
|
+
"**/*.d.ts",
|
18
|
+
"**/*.ts",
|
19
|
+
"**/*.tsx"
|
15
20
|
],
|
16
21
|
"scripts": {
|
22
|
+
"clean": "rm -rf dist",
|
23
|
+
"build:types": "tsc --emitDeclarationOnly --outDir dist",
|
24
|
+
"build:code": "node esbuild.config.mjs",
|
25
|
+
"build": "npm run clean && npm run build:types && npm run build:code",
|
26
|
+
"build:watch": "npm run clean && npm run build:types && node esbuild.config.mjs --watch",
|
17
27
|
"format": "npm run lint -- --fix",
|
18
28
|
"lint": "eslint . --ext .js,.jsx,.json",
|
19
29
|
"prepare": "husky install",
|
20
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
30
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
31
|
+
"types:watch": "tsc --emitDeclarationOnly --outDir dist --watch",
|
32
|
+
"dev": "npm run clean && concurrently \"npm run types:watch\" \"npm run build:watch\""
|
21
33
|
},
|
22
34
|
"config": {
|
23
35
|
"commitizen": {
|
@@ -36,34 +48,48 @@
|
|
36
48
|
},
|
37
49
|
"homepage": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen#readme",
|
38
50
|
"devDependencies": {
|
39
|
-
"@commitlint/cli": "^
|
40
|
-
"@commitlint/config-conventional": "^
|
41
|
-
"@semantic-release/changelog": "^6.0.
|
42
|
-
"@semantic-release/commit-analyzer": "^
|
51
|
+
"@commitlint/cli": "^19.8.0",
|
52
|
+
"@commitlint/config-conventional": "^19.8.0",
|
53
|
+
"@semantic-release/changelog": "^6.0.3",
|
54
|
+
"@semantic-release/commit-analyzer": "^13.0.1",
|
43
55
|
"@semantic-release/git": "^10.0.1",
|
44
|
-
"@semantic-release/npm": "^
|
45
|
-
"@semantic-release/release-notes-generator": "^
|
46
|
-
"@shopify/hydrogen": "
|
47
|
-
"
|
56
|
+
"@semantic-release/npm": "^12.0.1",
|
57
|
+
"@semantic-release/release-notes-generator": "^14.0.3",
|
58
|
+
"@shopify/hydrogen": ">=2025.0.1",
|
59
|
+
"@shopify/hydrogen-react": ">=2025.0.1",
|
60
|
+
"@types/react": "^18.0.0",
|
61
|
+
"@types/three": "^0.175.0",
|
62
|
+
"@typescript-eslint/eslint-plugin": "^8.26.1",
|
63
|
+
"@typescript-eslint/parser": "^8.26.1",
|
64
|
+
"concurrently": "^9.1.2",
|
65
|
+
"conventional-changelog-eslint": "^6.0.0",
|
48
66
|
"cz-conventional-changelog": "^3.3.0",
|
49
|
-
"cz-customizable": "^
|
50
|
-
"
|
51
|
-
"eslint
|
52
|
-
"eslint-
|
53
|
-
"eslint-plugin-
|
54
|
-
"eslint-plugin-
|
55
|
-
"eslint-plugin-
|
56
|
-
"eslint-plugin-react
|
57
|
-
"
|
58
|
-
"
|
59
|
-
"
|
60
|
-
"
|
67
|
+
"cz-customizable": "^7.4.0",
|
68
|
+
"esbuild": "0.25.2",
|
69
|
+
"eslint": "^8.57.0",
|
70
|
+
"eslint-config-prettier": "^10.1.1",
|
71
|
+
"eslint-plugin-import": "^2.31.0",
|
72
|
+
"eslint-plugin-json": "^4.0.1",
|
73
|
+
"eslint-plugin-prettier": "^5.2.3",
|
74
|
+
"eslint-plugin-react": "^7.37.4",
|
75
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
76
|
+
"eslint-plugin-sort-destructure-keys": "^2.0.0",
|
77
|
+
"eslint-plugin-sort-keys": "^2.3.5",
|
78
|
+
"eslint-plugin-typescript-sort-keys": "^3.3.0",
|
79
|
+
"husky": "^9.1.7",
|
80
|
+
"lint-staged": "^15.5.0",
|
81
|
+
"prettier": "^3.5.2",
|
82
|
+
"react": "^18.0.0",
|
83
|
+
"semantic-release": "^24.2.3",
|
84
|
+
"typescript": "^5.8.2"
|
61
85
|
},
|
62
86
|
"dependencies": {
|
63
|
-
"@rebuy/rebuy": "^1.
|
87
|
+
"@rebuy/rebuy": "^1.5.1"
|
64
88
|
},
|
65
89
|
"peerDependencies": {
|
66
|
-
"@
|
90
|
+
"@remix-run/react": ">=2.10.0",
|
91
|
+
"@shopify/hydrogen": ">=2025.0.1",
|
92
|
+
"@shopify/hydrogen-react": ">=2025.0.1"
|
67
93
|
},
|
68
94
|
"lint-staged": {
|
69
95
|
"**/*.{js,jsx,json}": [
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { HydrogenAddToCartBtn } from './HydrogenAddToCartBtn';
|
2
|
+
import { HydrogenReactAddToCartBtn } from './HydrogenReactAddToCartBtn';
|
3
|
+
|
4
|
+
import type { AddToCartBtnProps } from '~/components/AddToCartBtn/types';
|
5
|
+
|
6
|
+
export const AddToCartBtn = ({
|
7
|
+
addToCartBtnText,
|
8
|
+
addToCartCallback,
|
9
|
+
disabled,
|
10
|
+
isHydrogenReact,
|
11
|
+
moneyData,
|
12
|
+
selectedVariants,
|
13
|
+
}: AddToCartBtnProps) => {
|
14
|
+
const linesToAdd = selectedVariants.map((variant) => ({
|
15
|
+
attributes: [
|
16
|
+
{ key: '_source', value: 'Rebuy' },
|
17
|
+
{ key: '_attribution', value: 'Rebuy Product Recommendations' },
|
18
|
+
],
|
19
|
+
merchandiseId: variant.id,
|
20
|
+
quantity: 1,
|
21
|
+
selectedVariant: variant,
|
22
|
+
}));
|
23
|
+
|
24
|
+
if (isHydrogenReact) {
|
25
|
+
return (
|
26
|
+
<HydrogenReactAddToCartBtn
|
27
|
+
addToCartBtnText={addToCartBtnText}
|
28
|
+
addToCartCallback={addToCartCallback}
|
29
|
+
disabled={disabled}
|
30
|
+
linesToAdd={linesToAdd}
|
31
|
+
moneyData={moneyData}
|
32
|
+
/>
|
33
|
+
);
|
34
|
+
}
|
35
|
+
|
36
|
+
return (
|
37
|
+
<HydrogenAddToCartBtn
|
38
|
+
addToCartBtnText={addToCartBtnText}
|
39
|
+
addToCartCallback={addToCartCallback}
|
40
|
+
disabled={disabled}
|
41
|
+
linesToAdd={linesToAdd}
|
42
|
+
moneyData={moneyData}
|
43
|
+
/>
|
44
|
+
);
|
45
|
+
};
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import { type FetcherWithComponents } from '@remix-run/react';
|
2
|
+
import { CartForm, Money } from '@shopify/hydrogen';
|
3
|
+
|
4
|
+
import styles from './AddToCartBtn.module.css';
|
5
|
+
|
6
|
+
import type { btnProps } from '~/components/AddToCartBtn/types';
|
7
|
+
|
8
|
+
export const HydrogenAddToCartBtn = ({
|
9
|
+
addToCartBtnText,
|
10
|
+
addToCartCallback,
|
11
|
+
disabled,
|
12
|
+
linesToAdd,
|
13
|
+
moneyData,
|
14
|
+
}: btnProps) => {
|
15
|
+
return (
|
16
|
+
<CartForm
|
17
|
+
action={CartForm.ACTIONS.LinesAdd}
|
18
|
+
inputs={{
|
19
|
+
lines: linesToAdd,
|
20
|
+
}}
|
21
|
+
route="/cart"
|
22
|
+
>
|
23
|
+
{(fetcher: FetcherWithComponents<unknown>) => (
|
24
|
+
<>
|
25
|
+
<button
|
26
|
+
className={styles.button}
|
27
|
+
disabled={disabled || fetcher.state !== 'idle'}
|
28
|
+
onClick={addToCartCallback}
|
29
|
+
type="submit"
|
30
|
+
>
|
31
|
+
{addToCartBtnText}
|
32
|
+
{moneyData && (
|
33
|
+
<>
|
34
|
+
<span> | </span>
|
35
|
+
<Money data={moneyData} withoutTrailingZeros />
|
36
|
+
</>
|
37
|
+
)}
|
38
|
+
</button>
|
39
|
+
</>
|
40
|
+
)}
|
41
|
+
</CartForm>
|
42
|
+
);
|
43
|
+
};
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import { Money, useCart } from '@shopify/hydrogen-react';
|
2
|
+
|
3
|
+
import styles from './AddToCartBtn.module.css';
|
4
|
+
|
5
|
+
import type { btnProps } from '~/components/AddToCartBtn/types';
|
6
|
+
|
7
|
+
export const HydrogenReactAddToCartBtn = ({
|
8
|
+
addToCartBtnText,
|
9
|
+
addToCartCallback,
|
10
|
+
disabled,
|
11
|
+
linesToAdd,
|
12
|
+
moneyData,
|
13
|
+
}: btnProps) => {
|
14
|
+
const { linesAdd } = useCart();
|
15
|
+
const handleAddToCart = () => {
|
16
|
+
linesAdd(linesToAdd);
|
17
|
+
addToCartCallback?.();
|
18
|
+
};
|
19
|
+
return (
|
20
|
+
<button
|
21
|
+
className={styles.button}
|
22
|
+
disabled={disabled}
|
23
|
+
onClick={handleAddToCart}
|
24
|
+
type="button"
|
25
|
+
>
|
26
|
+
{addToCartBtnText}
|
27
|
+
{moneyData && (
|
28
|
+
<>
|
29
|
+
<span> | </span>
|
30
|
+
<Money data={moneyData} withoutTrailingZeros />
|
31
|
+
</>
|
32
|
+
)}
|
33
|
+
</button>
|
34
|
+
);
|
35
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './AddToCartBtn';
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import type { MoneyV2 } from '@shopify/hydrogen-react/storefront-api-types';
|
2
|
+
import type { RebuyProductVariant } from '~/types/rebuyCustom';
|
3
|
+
|
4
|
+
export type btnProps = {
|
5
|
+
addToCartBtnText?: string;
|
6
|
+
addToCartCallback?: () => void;
|
7
|
+
disabled?: boolean;
|
8
|
+
linesToAdd: {
|
9
|
+
attributes: {
|
10
|
+
key: string;
|
11
|
+
value: string;
|
12
|
+
}[];
|
13
|
+
merchandiseId: string;
|
14
|
+
quantity: number;
|
15
|
+
selectedVariant: unknown;
|
16
|
+
}[];
|
17
|
+
moneyData?: MoneyV2;
|
18
|
+
};
|
19
|
+
|
20
|
+
export type AddToCartBtnProps = {
|
21
|
+
addToCartBtnText?: string;
|
22
|
+
addToCartCallback?: () => void;
|
23
|
+
disabled?: boolean;
|
24
|
+
isHydrogenReact?: boolean;
|
25
|
+
moneyData?: MoneyV2;
|
26
|
+
selectedVariants: RebuyProductVariant[];
|
27
|
+
};
|
@@ -0,0 +1,70 @@
|
|
1
|
+
import { Link } from '@remix-run/react';
|
2
|
+
import { Image } from '@shopify/hydrogen';
|
3
|
+
import { useState } from 'react';
|
4
|
+
|
5
|
+
import styles from './ProductCard.module.css';
|
6
|
+
|
7
|
+
import type { ProductCardProps } from '~/components/ProductCard/types';
|
8
|
+
import type { RebuyProduct } from '~/types/rebuyCustom';
|
9
|
+
|
10
|
+
import { AddToCartBtn } from '~/components/AddToCartBtn';
|
11
|
+
import { RebuyProductPrice } from '~/components/ProductPrice/ProductPrice';
|
12
|
+
import { Title } from '~/components/Title';
|
13
|
+
import { VariantSelect } from '~/components/VariantSelect';
|
14
|
+
|
15
|
+
export const ProductCard = ({
|
16
|
+
addToCartBtnText,
|
17
|
+
addToCartCallback,
|
18
|
+
isHydrogenReact,
|
19
|
+
product,
|
20
|
+
productCardTitleLevel,
|
21
|
+
}: ProductCardProps) => {
|
22
|
+
const [selectedVariant, setSelectedVariant] = useState(
|
23
|
+
product.variants.nodes[0]
|
24
|
+
);
|
25
|
+
|
26
|
+
const { image } = selectedVariant;
|
27
|
+
const handleSelectedVariant = (
|
28
|
+
product: RebuyProduct,
|
29
|
+
variant_id: string
|
30
|
+
) => {
|
31
|
+
const updatedVariant = product.variants.nodes.find(
|
32
|
+
(variant) => variant.id === variant_id
|
33
|
+
);
|
34
|
+
if (updatedVariant) {
|
35
|
+
setSelectedVariant(updatedVariant);
|
36
|
+
}
|
37
|
+
};
|
38
|
+
return (
|
39
|
+
<div className={styles.container}>
|
40
|
+
<div>
|
41
|
+
<Link to={`/products/${product.handle}`}>
|
42
|
+
<Image
|
43
|
+
alt={image?.altText ?? `Picture of ${product.title}`}
|
44
|
+
data={image}
|
45
|
+
sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
|
46
|
+
/>
|
47
|
+
</Link>
|
48
|
+
<div className={styles.productInfo}>
|
49
|
+
<Link to={`/products/${product.handle}`}>
|
50
|
+
<Title
|
51
|
+
level={productCardTitleLevel}
|
52
|
+
text={product.title}
|
53
|
+
/>
|
54
|
+
</Link>
|
55
|
+
<RebuyProductPrice selectedVariant={selectedVariant} />
|
56
|
+
<VariantSelect
|
57
|
+
handleSelectedVariant={handleSelectedVariant}
|
58
|
+
product={product}
|
59
|
+
/>
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
<AddToCartBtn
|
63
|
+
addToCartBtnText={addToCartBtnText}
|
64
|
+
addToCartCallback={addToCartCallback}
|
65
|
+
isHydrogenReact={isHydrogenReact}
|
66
|
+
selectedVariants={[selectedVariant]}
|
67
|
+
/>
|
68
|
+
</div>
|
69
|
+
);
|
70
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './ProductCard';
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { ProductCardTitleLevel } from '~/types/common';
|
2
|
+
import type { RebuyProduct } from '~/types/rebuyCustom';
|
3
|
+
|
4
|
+
export type ProductCardProps = {
|
5
|
+
addToCartBtnText?: string;
|
6
|
+
addToCartCallback?: () => void; // to allow for custom add to cart logic/opening the cart drawer
|
7
|
+
isHydrogenReact?: boolean;
|
8
|
+
product: RebuyProduct;
|
9
|
+
productCardTitleLevel: ProductCardTitleLevel;
|
10
|
+
};
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import { Money } from '@shopify/hydrogen';
|
2
|
+
|
3
|
+
import styles from './ProductPrice.module.css';
|
4
|
+
|
5
|
+
import type { MoneyV2 } from '@shopify/hydrogen-react/storefront-api-types';
|
6
|
+
import type { RebuyProductVariant } from '~/types/rebuyCustom';
|
7
|
+
|
8
|
+
export const RebuyProductPrice = ({
|
9
|
+
selectedVariant,
|
10
|
+
}: {
|
11
|
+
selectedVariant: RebuyProductVariant;
|
12
|
+
}) => {
|
13
|
+
if (!selectedVariant) return null;
|
14
|
+
const { compareAtPriceV2: compareAtPrice, priceV2: price } =
|
15
|
+
selectedVariant;
|
16
|
+
|
17
|
+
const isDiscounted = (
|
18
|
+
price: MoneyV2 | null,
|
19
|
+
compareAtPrice: MoneyV2 | null
|
20
|
+
) => Number(compareAtPrice?.amount) > Number(price?.amount);
|
21
|
+
|
22
|
+
const CompareAtPrice = ({
|
23
|
+
data: compareAtPrice,
|
24
|
+
}: {
|
25
|
+
data: MoneyV2 | null;
|
26
|
+
}) => {
|
27
|
+
return (
|
28
|
+
compareAtPrice && (
|
29
|
+
<Money
|
30
|
+
as="span"
|
31
|
+
className={styles.compareAtPrice}
|
32
|
+
data={compareAtPrice}
|
33
|
+
withoutTrailingZeros
|
34
|
+
/>
|
35
|
+
)
|
36
|
+
);
|
37
|
+
};
|
38
|
+
|
39
|
+
return (
|
40
|
+
price && (
|
41
|
+
<div className={styles.priceContainer}>
|
42
|
+
<Money data={price} withoutTrailingZeros />
|
43
|
+
{compareAtPrice && isDiscounted(price, compareAtPrice) && (
|
44
|
+
<CompareAtPrice data={compareAtPrice} />
|
45
|
+
)}
|
46
|
+
</div>
|
47
|
+
)
|
48
|
+
);
|
49
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './ProductPrice';
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import type { TitleProps } from '~/components/Title/types';
|
2
|
+
|
3
|
+
export const Title = ({ level, style, text }: TitleProps) => {
|
4
|
+
switch (level) {
|
5
|
+
case 'h1':
|
6
|
+
return <h1 style={style}>{text}</h1>;
|
7
|
+
case 'h2':
|
8
|
+
return <h2 style={style}>{text}</h2>;
|
9
|
+
case 'h3':
|
10
|
+
return <h3 style={style}>{text}</h3>;
|
11
|
+
case 'h4':
|
12
|
+
return <h4 style={style}>{text}</h4>;
|
13
|
+
case 'h5':
|
14
|
+
return <h5 style={style}>{text}</h5>;
|
15
|
+
case 'h6':
|
16
|
+
return <h6 style={style}>{text}</h6>;
|
17
|
+
default:
|
18
|
+
return <h2 style={style}>{text}</h2>;
|
19
|
+
}
|
20
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './Title';
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import styles from './VariantSelect.module.css';
|
2
|
+
|
3
|
+
import type { VariantSelectProps } from '~/components/VariantSelect/types';
|
4
|
+
import type { RebuyProduct } from '~/types/rebuyCustom';
|
5
|
+
|
6
|
+
export const VariantSelect = ({
|
7
|
+
handleSelectedVariant,
|
8
|
+
product,
|
9
|
+
}: VariantSelectProps) => {
|
10
|
+
const getOptionsLabel = (product: RebuyProduct) => {
|
11
|
+
const options = product.variants.nodes[0].selectedOptions;
|
12
|
+
const optionsFromKeys = options ? Object.keys(options[0]) : [];
|
13
|
+
const optionsFromValues = options
|
14
|
+
? options.map((option) => option.name)
|
15
|
+
: [];
|
16
|
+
const useValues = optionsFromKeys.every((key) =>
|
17
|
+
['name', 'value'].includes(key)
|
18
|
+
);
|
19
|
+
|
20
|
+
// Return delimited label for available option(s) e.g. Color / Size, Scent, etc
|
21
|
+
return (useValues ? optionsFromValues : optionsFromKeys).join(' / ');
|
22
|
+
};
|
23
|
+
|
24
|
+
return (
|
25
|
+
product?.variants.nodes.length > 1 && (
|
26
|
+
<div>
|
27
|
+
<select
|
28
|
+
aria-label="select variant"
|
29
|
+
className={styles.select}
|
30
|
+
onChange={(e) =>
|
31
|
+
handleSelectedVariant(product, e.target.value)
|
32
|
+
}
|
33
|
+
>
|
34
|
+
<optgroup label={getOptionsLabel(product)}>
|
35
|
+
{product.variants.nodes.map(({ id, title }) => (
|
36
|
+
<option key={id + '-variant'} value={id}>
|
37
|
+
{title}
|
38
|
+
</option>
|
39
|
+
))}
|
40
|
+
</optgroup>
|
41
|
+
</select>
|
42
|
+
</div>
|
43
|
+
)
|
44
|
+
);
|
45
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './VariantSelect';
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { createContext } from 'react';
|
2
|
+
|
3
|
+
import { type ContextParameters } from '~/types/rebuyCustom';
|
4
|
+
|
5
|
+
export type RebuyContextType = {
|
6
|
+
contextParameters: ContextParameters;
|
7
|
+
};
|
8
|
+
|
9
|
+
export const RebuyContext = createContext<RebuyContextType | null>(null);
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import { ProductCardTitleLevel } from '~/types/common';
|
2
|
+
|
3
|
+
// Convert the string header level to enum
|
4
|
+
export const getTitleLevel = (
|
5
|
+
level: string,
|
6
|
+
decreaseLevel: boolean = false
|
7
|
+
): ProductCardTitleLevel => {
|
8
|
+
switch (level) {
|
9
|
+
case 'h1':
|
10
|
+
if (decreaseLevel) {
|
11
|
+
return ProductCardTitleLevel.H2;
|
12
|
+
}
|
13
|
+
return ProductCardTitleLevel.H1;
|
14
|
+
case 'h2':
|
15
|
+
if (decreaseLevel) {
|
16
|
+
return ProductCardTitleLevel.H3;
|
17
|
+
}
|
18
|
+
return ProductCardTitleLevel.H2;
|
19
|
+
case 'h3':
|
20
|
+
if (decreaseLevel) {
|
21
|
+
return ProductCardTitleLevel.H4;
|
22
|
+
}
|
23
|
+
return ProductCardTitleLevel.H3;
|
24
|
+
case 'h4':
|
25
|
+
if (decreaseLevel) {
|
26
|
+
return ProductCardTitleLevel.H5;
|
27
|
+
}
|
28
|
+
return ProductCardTitleLevel.H4;
|
29
|
+
case 'h5':
|
30
|
+
if (decreaseLevel) {
|
31
|
+
return ProductCardTitleLevel.H6;
|
32
|
+
}
|
33
|
+
return ProductCardTitleLevel.H5;
|
34
|
+
case 'h6':
|
35
|
+
if (decreaseLevel) {
|
36
|
+
return ProductCardTitleLevel.H6;
|
37
|
+
}
|
38
|
+
return ProductCardTitleLevel.H6;
|
39
|
+
default:
|
40
|
+
return ProductCardTitleLevel.H2;
|
41
|
+
}
|
42
|
+
};
|
package/src/index.ts
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
export * from './providers/RebuyHydrogenContextProvider';
|
2
|
+
export * from './providers/RebuyHydrogenReactContextProvider';
|
3
|
+
export * from './widgetContainer/RebuyWidgetContainer';
|
4
|
+
export * from './widgets/RebuyCompleteTheLook';
|
5
|
+
export * from './widgets/RebuyDynamicBundleProducts';
|
6
|
+
export * from './widgets/RebuyProductAddOns';
|
7
|
+
export * from './widgets/RebuyProductRecommendations';
|
@@ -0,0 +1,112 @@
|
|
1
|
+
import * as Utilities from '@rebuy/rebuy/utilities';
|
2
|
+
import { Await, useLocation } from '@remix-run/react';
|
3
|
+
import { useEffect, useMemo, useState } from 'react';
|
4
|
+
|
5
|
+
import type { CartReturn } from '@shopify/hydrogen';
|
6
|
+
import type {
|
7
|
+
RebuyHydrogenContextProviderProps,
|
8
|
+
RebuyHydrogenProps,
|
9
|
+
} from '~/providers/types';
|
10
|
+
|
11
|
+
import { RebuyContext } from '~/context/RebuyContext';
|
12
|
+
import { RebuyConfig } from '~/types/rebuyCustom';
|
13
|
+
import { createContextParameters } from '~/utils/createContextParameters';
|
14
|
+
import { getRebuyConfig } from '~/utils/getRebuyConfig';
|
15
|
+
|
16
|
+
const RebuyHydrogenContext = ({
|
17
|
+
cartAttributes,
|
18
|
+
cartCost,
|
19
|
+
cartId,
|
20
|
+
cartLines,
|
21
|
+
cartNote,
|
22
|
+
cartQuantity,
|
23
|
+
children,
|
24
|
+
}: RebuyHydrogenProps) => {
|
25
|
+
const primaryDomain = import.meta.env.PRIMARY_DOMAIN;
|
26
|
+
const rebuyKey = import.meta.env.PUBLIC_REBUY_API_KEY;
|
27
|
+
const storeDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
|
28
|
+
|
29
|
+
const [rebuyConfig, setRebuyConfig] = useState<RebuyConfig | null>(null);
|
30
|
+
const location = useLocation();
|
31
|
+
const queryObject = Utilities.queryStringToObject(location.search);
|
32
|
+
const windowUrl = `${primaryDomain}${location.pathname}${location.search}`;
|
33
|
+
|
34
|
+
// Initialization
|
35
|
+
useEffect(() => {
|
36
|
+
const initConfig = async () => {
|
37
|
+
const config = await getRebuyConfig(rebuyKey, storeDomain);
|
38
|
+
setRebuyConfig(config);
|
39
|
+
};
|
40
|
+
|
41
|
+
if (!rebuyConfig?.shop) {
|
42
|
+
initConfig();
|
43
|
+
}
|
44
|
+
}, [rebuyConfig, rebuyKey, storeDomain]);
|
45
|
+
|
46
|
+
const contextParameters = useMemo(
|
47
|
+
() =>
|
48
|
+
createContextParameters({
|
49
|
+
cacheKey: rebuyConfig?.shop?.cache_key,
|
50
|
+
cartAttributes,
|
51
|
+
cartId,
|
52
|
+
cartLines,
|
53
|
+
cartLinesLength: cartLines?.length,
|
54
|
+
cartNote: cartNote as string,
|
55
|
+
cartSubtotal: cartCost,
|
56
|
+
cartTotalQuantity: cartQuantity,
|
57
|
+
isHydrogenReact: false,
|
58
|
+
queryObject,
|
59
|
+
windowUrl,
|
60
|
+
}),
|
61
|
+
[
|
62
|
+
rebuyConfig,
|
63
|
+
windowUrl,
|
64
|
+
queryObject,
|
65
|
+
cartAttributes,
|
66
|
+
cartCost,
|
67
|
+
cartId,
|
68
|
+
cartLines,
|
69
|
+
cartQuantity,
|
70
|
+
cartNote,
|
71
|
+
]
|
72
|
+
);
|
73
|
+
|
74
|
+
// Static reference (JSON) + memoization
|
75
|
+
// ^ prevent re-rendering children when context params are unchanged
|
76
|
+
const contextParametersJSON = JSON.stringify(contextParameters);
|
77
|
+
const contextValue = useMemo(
|
78
|
+
() => ({ contextParameters: JSON.parse(contextParametersJSON) }),
|
79
|
+
[contextParametersJSON]
|
80
|
+
);
|
81
|
+
|
82
|
+
return (
|
83
|
+
<RebuyContext.Provider value={contextValue}>
|
84
|
+
{children}
|
85
|
+
</RebuyContext.Provider>
|
86
|
+
);
|
87
|
+
};
|
88
|
+
|
89
|
+
export const RebuyHydrogenContextProvider = ({
|
90
|
+
cart,
|
91
|
+
children,
|
92
|
+
}: RebuyHydrogenContextProviderProps) => {
|
93
|
+
return (
|
94
|
+
<Await resolve={cart}>
|
95
|
+
{(resolvedCart) => {
|
96
|
+
const cart = resolvedCart as CartReturn;
|
97
|
+
return (
|
98
|
+
<RebuyHydrogenContext
|
99
|
+
cartAttributes={cart?.attributes}
|
100
|
+
cartCost={cart?.cost?.subtotalAmount?.amount}
|
101
|
+
cartId={cart?.id}
|
102
|
+
cartLines={cart?.lines?.nodes}
|
103
|
+
cartNote={cart?.note}
|
104
|
+
cartQuantity={cart?.totalQuantity}
|
105
|
+
>
|
106
|
+
{children}
|
107
|
+
</RebuyHydrogenContext>
|
108
|
+
);
|
109
|
+
}}
|
110
|
+
</Await>
|
111
|
+
);
|
112
|
+
};
|