From 27ac7a4067881e32472c89c312090bcd9ba86368 Mon Sep 17 00:00:00 2001 From: Seth Weinheimer Date: Tue, 25 Feb 2025 14:02:46 -0700 Subject: [PATCH 01/12] fairshare --- README.md | 2 +- env.ts | 2 + package-lock.json | 274 +++++++++++------- package.json | 6 +- readme.dev.md | 15 + src/api/getProducts.ts | 3 +- src/app/[affiliateSlug]/fairshareProvider.tsx | 11 + src/components/Product/index.tsx | 2 +- 8 files changed, 212 insertions(+), 103 deletions(-) create mode 100644 readme.dev.md create mode 100644 src/app/[affiliateSlug]/fairshareProvider.tsx diff --git a/README.md b/README.md index d6e2d73..d23daa0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Fluid Headless Commerce Starter Pack +q# Fluid Headless Commerce Starter Pack ## Developer Documentation diff --git a/env.ts b/env.ts index 975acd5..00414d6 100644 --- a/env.ts +++ b/env.ts @@ -7,10 +7,12 @@ export const env = createEnv({ }, client: { NEXT_PUBLIC_FLUID_BASE_URL: z.string().default("https://api.fluid.app"), + NEXT_PUBLIC_FLUID_SHOP_ID: z.string().min(1), }, // For Next.js >= 13.4.4, you only need to destructure client variables: experimental__runtimeEnv: { NEXT_PUBLIC_FLUID_BASE_URL: process.env.NEXT_PUBLIC_FLUID_BASE_URL, + NEXT_PUBLIC_FLUID_SHOP_ID: process.env.NEXT_PUBLIC_FLUID_SHOP_ID, }, skipValidation: process.env.SKIP_ENV_VALIDATION === "true", }); diff --git a/package-lock.json b/package-lock.json index 62d0b92..5d4f588 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,10 @@ "name": "fluid-template", "version": "0.1.0", "dependencies": { + "@fluid-commerce/fairshare": "^1.0.13", "@fontsource/inter": "^5.1.0", - "@radix-ui/react-popover": "^1.1.1", - "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-popover": "^1.1.6", + "@radix-ui/react-select": "^2.1.6", "@t3-oss/env-nextjs": "^0.12.0", "@tanstack/react-query": "^5.66.9", "@types/lodash": "^4.17.7", @@ -42,6 +43,23 @@ "yarn": "use npm" } }, + "../fair-share/packages/sdk": { + "name": "@fluid-commerce/fairshare", + "version": "1.0.14", + "license": "MIT", + "dependencies": { + "react-device-detect": "^2.2.3", + "zod": "^3.24.2" + }, + "devDependencies": { + "dotenv": "^16.4.7", + "jsdom": "^26.0.0", + "tsc-alias": "^1.8.10" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "dev": true, @@ -164,22 +182,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.5", + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", + "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", "license": "MIT", "dependencies": { - "@floating-ui/utils": "^0.2.5" + "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.8", + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", + "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", "license": "MIT", "dependencies": { "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.5" + "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.1.1", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.0.0" @@ -190,9 +214,15 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.5", + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", "license": "MIT" }, + "node_modules/@fluid-commerce/fairshare": { + "resolved": "../fair-share/packages/sdk", + "link": true + }, "node_modules/@fontsource/inter": { "version": "5.1.0", "license": "OFL-1.1" @@ -571,14 +601,18 @@ "license": "MIT" }, "node_modules/@radix-ui/primitive": { - "version": "1.1.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz", + "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==", "license": "MIT" }, "node_modules/@radix-ui/react-arrow": { - "version": "1.1.0", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz", + "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==", "license": "MIT", "dependencies": { - "@radix-ui/react-primitive": "2.0.0" + "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", @@ -596,13 +630,15 @@ } }, "node_modules/@radix-ui/react-collection": { - "version": "1.1.0", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz", + "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==", "license": "MIT", "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-slot": "1.1.0" + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", @@ -620,7 +656,9 @@ } }, "node_modules/@radix-ui/react-compose-refs": { - "version": "1.1.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz", + "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==", "license": "MIT", "peerDependencies": { "@types/react": "*", @@ -633,7 +671,9 @@ } }, "node_modules/@radix-ui/react-context": { - "version": "1.1.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", "license": "MIT", "peerDependencies": { "@types/react": "*", @@ -659,12 +699,14 @@ } }, "node_modules/@radix-ui/react-dismissable-layer": { - "version": "1.1.0", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz", + "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==", "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-escape-keydown": "1.1.0" }, @@ -684,7 +726,9 @@ } }, "node_modules/@radix-ui/react-focus-guards": { - "version": "1.1.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz", + "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==", "license": "MIT", "peerDependencies": { "@types/react": "*", @@ -697,11 +741,13 @@ } }, "node_modules/@radix-ui/react-focus-scope": { - "version": "1.1.0", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz", + "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==", "license": "MIT", "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { @@ -736,24 +782,26 @@ } }, "node_modules/@radix-ui/react-popover": { - "version": "1.1.1", + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz", + "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==", "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", - "@radix-ui/react-dismissable-layer": "1.1.0", - "@radix-ui/react-focus-guards": "1.1.0", - "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", - "@radix-ui/react-popper": "1.2.0", - "@radix-ui/react-portal": "1.1.1", - "@radix-ui/react-presence": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-popper": "1.2.2", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", - "aria-hidden": "^1.1.1", - "react-remove-scroll": "2.5.7" + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", @@ -771,14 +819,16 @@ } }, "node_modules/@radix-ui/react-popper": { - "version": "1.2.0", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz", + "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==", "license": "MIT", "dependencies": { "@floating-ui/react-dom": "^2.0.0", - "@radix-ui/react-arrow": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-arrow": "1.1.2", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-rect": "1.1.0", @@ -801,10 +851,12 @@ } }, "node_modules/@radix-ui/react-portal": { - "version": "1.1.1", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz", + "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==", "license": "MIT", "dependencies": { - "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { @@ -823,10 +875,12 @@ } }, "node_modules/@radix-ui/react-presence": { - "version": "1.1.0", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz", + "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==", "license": "MIT", "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { @@ -845,10 +899,12 @@ } }, "node_modules/@radix-ui/react-primitive": { - "version": "2.0.0", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz", + "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==", "license": "MIT", "dependencies": { - "@radix-ui/react-slot": "1.1.0" + "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", @@ -866,30 +922,32 @@ } }, "node_modules/@radix-ui/react-select": { - "version": "2.1.1", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz", + "integrity": "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==", "license": "MIT", "dependencies": { "@radix-ui/number": "1.1.0", - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-collection": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-collection": "1.1.2", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", - "@radix-ui/react-dismissable-layer": "1.1.0", - "@radix-ui/react-focus-guards": "1.1.0", - "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", - "@radix-ui/react-popper": "1.2.0", - "@radix-ui/react-portal": "1.1.1", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-popper": "1.2.2", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", - "@radix-ui/react-visually-hidden": "1.1.0", - "aria-hidden": "^1.1.1", - "react-remove-scroll": "2.5.7" + "@radix-ui/react-visually-hidden": "1.1.2", + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", @@ -907,10 +965,12 @@ } }, "node_modules/@radix-ui/react-slot": { - "version": "1.1.0", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz", + "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==", "license": "MIT", "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0" + "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", @@ -953,6 +1013,8 @@ }, "node_modules/@radix-ui/react-use-escape-keydown": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz", + "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==", "license": "MIT", "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" @@ -995,6 +1057,8 @@ }, "node_modules/@radix-ui/react-use-rect": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz", + "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==", "license": "MIT", "dependencies": { "@radix-ui/rect": "1.1.0" @@ -1011,6 +1075,8 @@ }, "node_modules/@radix-ui/react-use-size": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", + "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", "license": "MIT", "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" @@ -1026,10 +1092,12 @@ } }, "node_modules/@radix-ui/react-visually-hidden": { - "version": "1.1.0", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz", + "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==", "license": "MIT", "dependencies": { - "@radix-ui/react-primitive": "2.0.0" + "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", @@ -1048,6 +1116,8 @@ }, "node_modules/@radix-ui/rect": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz", + "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==", "license": "MIT" }, "node_modules/@rtsao/scc": { @@ -2238,6 +2308,8 @@ }, "node_modules/detect-node-es": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==", "license": "MIT" }, "node_modules/didyoumean": { @@ -5620,6 +5692,8 @@ }, "node_modules/get-nonce": { "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", "license": "MIT", "engines": { "node": ">=6" @@ -5970,13 +6044,6 @@ "node": ">= 0.4" } }, - "node_modules/invariant": { - "version": "2.2.4", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/is-array-buffer": { "version": "3.0.4", "dev": true, @@ -6502,6 +6569,7 @@ }, "node_modules/js-tokens": { "version": "4.0.0", + "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -6633,6 +6701,7 @@ }, "node_modules/loose-envify": { "version": "1.4.0", + "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -7336,21 +7405,23 @@ "license": "MIT" }, "node_modules/react-remove-scroll": { - "version": "2.5.7", + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz", + "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==", "license": "MIT", "dependencies": { - "react-remove-scroll-bar": "^2.3.4", - "react-style-singleton": "^2.2.1", + "react-remove-scroll-bar": "^2.3.7", + "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", - "use-callback-ref": "^1.3.0", - "use-sidecar": "^1.1.2" + "use-callback-ref": "^1.3.3", + "use-sidecar": "^1.1.3" }, "engines": { "node": ">=10" }, "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@types/react": "*", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "peerDependenciesMeta": { "@types/react": { @@ -7359,18 +7430,20 @@ } }, "node_modules/react-remove-scroll-bar": { - "version": "2.3.6", + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz", + "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==", "license": "MIT", "dependencies": { - "react-style-singleton": "^2.2.1", + "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "engines": { "node": ">=10" }, "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@types/react": "*", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -7379,19 +7452,20 @@ } }, "node_modules/react-style-singleton": { - "version": "2.2.1", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", + "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==", "license": "MIT", "dependencies": { "get-nonce": "^1.0.0", - "invariant": "^2.2.4", "tslib": "^2.0.0" }, "engines": { "node": ">=10" }, "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@types/react": "*", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "peerDependenciesMeta": { "@types/react": { @@ -10668,7 +10742,9 @@ } }, "node_modules/use-callback-ref": { - "version": "1.3.2", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz", + "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==", "license": "MIT", "dependencies": { "tslib": "^2.0.0" @@ -10677,8 +10753,8 @@ "node": ">=10" }, "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@types/react": "*", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "peerDependenciesMeta": { "@types/react": { @@ -10687,7 +10763,9 @@ } }, "node_modules/use-sidecar": { - "version": "1.1.2", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz", + "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==", "license": "MIT", "dependencies": { "detect-node-es": "^1.1.0", @@ -10697,8 +10775,8 @@ "node": ">=10" }, "peerDependencies": { - "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@types/react": "*", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "peerDependenciesMeta": { "@types/react": { diff --git a/package.json b/package.json index 7576834..501ebb5 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "dev": "next dev --turbopack -p 8080", + "dev:webpack": "next dev -p 8080", "build": "next build", "start": "next start -p ${PORT:-8080}", "lint": "next lint", @@ -11,9 +12,10 @@ "format:check": "prettier --check ." }, "dependencies": { + "@fluid-commerce/fairshare": "^1.0.13", "@fontsource/inter": "^5.1.0", - "@radix-ui/react-popover": "^1.1.1", - "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-popover": "^1.1.6", + "@radix-ui/react-select": "^2.1.6", "@t3-oss/env-nextjs": "^0.12.0", "@tanstack/react-query": "^5.66.9", "@types/lodash": "^4.17.7", diff --git a/readme.dev.md b/readme.dev.md new file mode 100644 index 0000000..3891a4e --- /dev/null +++ b/readme.dev.md @@ -0,0 +1,15 @@ +# Development + +If you need to reference a local version of the fairshare sdk, you can do the following: + +1. Install the fairshare sdk locally + +``` +npm install ../fair-share/packages/sdk +``` + +2. Run the dev server with webpack. Turbopack does not work. + +``` +npm run dev:webpack +``` diff --git a/src/api/getProducts.ts b/src/api/getProducts.ts index 3f79df5..065aaa5 100644 --- a/src/api/getProducts.ts +++ b/src/api/getProducts.ts @@ -24,7 +24,8 @@ async function getProducts({ const { body } = await client( `products/${params.toString() ? `?${params.toString()}` : ""}`, ); - return safeZodParse(body.data.products, productsSchema); + + return safeZodParse(body?.products, productsSchema); } export default getProducts; diff --git a/src/app/[affiliateSlug]/fairshareProvider.tsx b/src/app/[affiliateSlug]/fairshareProvider.tsx new file mode 100644 index 0000000..8519043 --- /dev/null +++ b/src/app/[affiliateSlug]/fairshareProvider.tsx @@ -0,0 +1,11 @@ +"use client"; + +import { ReactNode } from "react"; + +export default function FairshareProvider({ + children, +}: { + children: ReactNode; +}) { + return <>{children}; +} diff --git a/src/components/Product/index.tsx b/src/components/Product/index.tsx index 17327bb..b3785d3 100644 --- a/src/components/Product/index.tsx +++ b/src/components/Product/index.tsx @@ -24,7 +24,7 @@ const Product = ({ product }: { product: Product }) => { "https://placehold.co/304x364/2F4F4F/black@3x.png" } className="object-contain h-[233px]" - alt={product?.title} + alt={product?.title || "Product Image"} />
From ef580d99a3938a096047473163c592d596a247b0 Mon Sep 17 00:00:00 2001 From: Seth Weinheimer Date: Tue, 25 Feb 2025 14:03:11 -0700 Subject: [PATCH 02/12] q --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d23daa0..d6e2d73 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -q# Fluid Headless Commerce Starter Pack +# Fluid Headless Commerce Starter Pack ## Developer Documentation From 772d19c3c0ed1c2d0c36ae193909a14671d271c1 Mon Sep 17 00:00:00 2001 From: Seth Weinheimer Date: Tue, 25 Feb 2025 14:11:05 -0700 Subject: [PATCH 03/12] wip --- .../[affiliateSlug]/fairshare-initializer.tsx | 35 +++++++++++++++++++ src/app/[affiliateSlug]/fairshareProvider.tsx | 20 ++++++++++- src/app/[affiliateSlug]/layout.tsx | 23 +++++++----- 3 files changed, 68 insertions(+), 10 deletions(-) create mode 100644 src/app/[affiliateSlug]/fairshare-initializer.tsx diff --git a/src/app/[affiliateSlug]/fairshare-initializer.tsx b/src/app/[affiliateSlug]/fairshare-initializer.tsx new file mode 100644 index 0000000..107d8be --- /dev/null +++ b/src/app/[affiliateSlug]/fairshare-initializer.tsx @@ -0,0 +1,35 @@ +"use client"; + +import { useEffect } from "react"; +import { FluidSDK } from "@fluid-commerce/fairshare"; + +interface FairshareInitializerProps { + fluidShopId: string; +} + +export default function FairshareInitializer({ + fluidShopId, +}: FairshareInitializerProps) { + useEffect(() => { + console.log("FairshareInitializer"); + async function init() { + console.log("Initializing Fairshare"); + const sdk = FluidSDK.getInstance(); + await sdk + .initialize({ + fluid_shop: fluidShopId, + api_url_host: "env.NEXT_PUBLIC_FLUID_BASE_URL", + }) + .then(() => { + console.log("Fairshare initialized"); + }) + .catch((error) => { + console.error("Fairshare initialization failed", error); + }); + } + init(); + }, [fluidShopId]); + + // This component doesn't render anything + return null; +} diff --git a/src/app/[affiliateSlug]/fairshareProvider.tsx b/src/app/[affiliateSlug]/fairshareProvider.tsx index 8519043..927a3d9 100644 --- a/src/app/[affiliateSlug]/fairshareProvider.tsx +++ b/src/app/[affiliateSlug]/fairshareProvider.tsx @@ -1,11 +1,29 @@ "use client"; +import dynamic from "next/dynamic"; +import { env } from "@/../env"; import { ReactNode } from "react"; +// Create a dynamic component that only loads on the client side +const DynamicFairshareInitializer = dynamic( + () => import("./fairshare-initializer"), // This will be a new file we'll create + { + ssr: false, // This is crucial - it prevents any server-side rendering + loading: () => null, // Optional: what to show while loading + }, +); + export default function FairshareProvider({ children, }: { children: ReactNode; }) { - return <>{children}; + return ( + <> + + {children} + + ); } diff --git a/src/app/[affiliateSlug]/layout.tsx b/src/app/[affiliateSlug]/layout.tsx index 75ab448..6efe7b7 100644 --- a/src/app/[affiliateSlug]/layout.tsx +++ b/src/app/[affiliateSlug]/layout.tsx @@ -1,11 +1,10 @@ import getCompany from "@/api/getCompany"; +import FairshareProvider from "@/app/[affiliateSlug]/fairshareProvider"; import Footer from "@/components/PageElements/Footer"; import Navbar from "@/components/PageElements/Navbar"; -import config from "@/config/env_config"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import { headers } from "next/headers"; -import Script from "next/script"; import "../globals.css"; const inter = Inter({ subsets: ["latin"] }); @@ -22,12 +21,14 @@ declare global { Spreedly: any; // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type showCartCount: Function; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + FluidSDK: any; } } type PageProps = Readonly<{ children: React.ReactNode; - params: Record; + params: Promise>; }>; export default async function RootLayout(props: PageProps) { @@ -35,18 +36,20 @@ export default async function RootLayout(props: PageProps) { const { children } = props; - const { affiliateSlug } = params; + // const { affiliateSlug } = params; const company = await getCompany(); return ( - + */} + - - {children} -