@shopify/shop-minis-react 0.0.20 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/___vite-browser-external.js +7 -0
- package/dist/_virtual/___vite-browser-external.js.map +1 -0
- package/dist/_virtual/__vite-browser-external.js +5 -0
- package/dist/_virtual/__vite-browser-external.js.map +1 -0
- package/dist/_virtual/_commonjsHelpers.js +24 -4
- package/dist/_virtual/_commonjsHelpers.js.map +1 -1
- package/dist/_virtual/browser-index.js +8 -0
- package/dist/_virtual/browser-index.js.map +1 -0
- package/dist/_virtual/browser-index2.js +5 -0
- package/dist/_virtual/browser-index2.js.map +1 -0
- package/dist/_virtual/clock.js +6 -0
- package/dist/_virtual/clock.js.map +1 -0
- package/dist/_virtual/conventions.js +5 -0
- package/dist/_virtual/conventions.js.map +1 -0
- package/dist/_virtual/document.js +8 -0
- package/dist/_virtual/document.js.map +1 -0
- package/dist/_virtual/dom-parser.js +5 -0
- package/dist/_virtual/dom-parser.js.map +1 -0
- package/dist/_virtual/dom.js +5 -0
- package/dist/_virtual/dom.js.map +1 -0
- package/dist/_virtual/entities.js +5 -0
- package/dist/_virtual/entities.js.map +1 -0
- package/dist/_virtual/extends.js +5 -0
- package/dist/_virtual/extends.js.map +1 -0
- package/dist/_virtual/index10.js +5 -0
- package/dist/_virtual/index10.js.map +1 -0
- package/dist/_virtual/index11.js +5 -0
- package/dist/_virtual/index11.js.map +1 -0
- package/dist/_virtual/index2.js +5 -2
- package/dist/_virtual/index2.js.map +1 -1
- package/dist/_virtual/index3.js +5 -3
- package/dist/_virtual/index3.js.map +1 -1
- package/dist/_virtual/index5.js +6 -0
- package/dist/_virtual/index5.js.map +1 -0
- package/dist/_virtual/index6.js +6 -0
- package/dist/_virtual/index6.js.map +1 -0
- package/dist/_virtual/index7.js +5 -0
- package/dist/_virtual/index7.js.map +1 -0
- package/dist/_virtual/index8.js +5 -0
- package/dist/_virtual/index8.js.map +1 -0
- package/dist/_virtual/index9.js +5 -0
- package/dist/_virtual/index9.js.map +1 -0
- package/dist/_virtual/parse-sidx.js +8 -0
- package/dist/_virtual/parse-sidx.js.map +1 -0
- package/dist/_virtual/sax.js +5 -0
- package/dist/_virtual/sax.js.map +1 -0
- package/dist/_virtual/window.js +8 -0
- package/dist/_virtual/window.js.map +1 -0
- package/dist/components/atoms/video-player.js +121 -0
- package/dist/components/atoms/video-player.js.map +1 -0
- package/dist/components/commerce/merchant-card.js +236 -106
- package/dist/components/commerce/merchant-card.js.map +1 -1
- package/dist/hooks/storage/useImageUpload.js.map +1 -1
- package/dist/hooks/util/useErrorScreen.js.map +1 -1
- package/dist/hooks/util/useErrorToast.js.map +1 -1
- package/dist/index.js +205 -195
- package/dist/index.js.map +1 -1
- package/dist/mocks.js +114 -87
- package/dist/mocks.js.map +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js +20 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/byte-helpers.js +79 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/byte-helpers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/codecs.js +102 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/codecs.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/containers.js +149 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/containers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js +13 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/ebml-helpers.js +77 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/ebml-helpers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/id3-helpers.js +15 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/id3-helpers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js +13 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-types.js +7 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-types.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/mp4-helpers.js +31 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/mp4-helpers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/nal-helpers.js +39 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/nal-helpers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js +14 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/stream.js +33 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/stream.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/http-handler.js +42 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/http-handler.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js +169 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/interceptors.js +75 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/interceptors.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/retry.js +70 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/retry.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/conventions.js +124 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/conventions.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/dom-parser.js +151 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/dom-parser.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/dom.js +993 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/dom.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/entities.js +2146 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/entities.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js +14 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/sax.js +346 -0
- package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/sax.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-convert@2.0.1/node_modules/color-convert/conversions.js +308 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-convert@2.0.1/node_modules/color-convert/conversions.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-convert@2.0.1/node_modules/color-convert/index.js +41 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-convert@2.0.1/node_modules/color-convert/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-convert@2.0.1/node_modules/color-convert/route.js +53 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-convert@2.0.1/node_modules/color-convert/route.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-name@1.1.4/node_modules/color-name/index.js +157 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-name@1.1.4/node_modules/color-name/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-string@1.9.1/node_modules/color-string/index.js +103 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color-string@1.9.1/node_modules/color-string/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color@4.2.3/node_modules/color/index.js +269 -0
- package/dist/shop-minis-react/node_modules/.pnpm/color@4.2.3/node_modules/color/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/global@4.4.0/node_modules/global/document.js +13 -0
- package/dist/shop-minis-react/node_modules/.pnpm/global@4.4.0/node_modules/global/document.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/global@4.4.0/node_modules/global/window.js +12 -0
- package/dist/shop-minis-react/node_modules/.pnpm/global@4.4.0/node_modules/global/window.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/is-arrayish@0.3.2/node_modules/is-arrayish/index.js +10 -0
- package/dist/shop-minis-react/node_modules/.pnpm/is-arrayish@0.3.2/node_modules/is-arrayish/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/is-function@1.0.2/node_modules/is-function/index.js +18 -0
- package/dist/shop-minis-react/node_modules/.pnpm/is-function@1.0.2/node_modules/is-function/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/m3u8-parser@7.2.0/node_modules/m3u8-parser/dist/m3u8-parser.es.js +855 -0
- package/dist/shop-minis-react/node_modules/.pnpm/m3u8-parser@7.2.0/node_modules/m3u8-parser/dist/m3u8-parser.es.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js +1102 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mux.js@7.1.0/node_modules/mux.js/lib/tools/parse-sidx.js +32 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mux.js@7.1.0/node_modules/mux.js/lib/tools/parse-sidx.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mux.js@7.1.0/node_modules/mux.js/lib/utils/clock.js +34 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mux.js@7.1.0/node_modules/mux.js/lib/utils/clock.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mux.js@7.1.0/node_modules/mux.js/lib/utils/numbers.js +17 -0
- package/dist/shop-minis-react/node_modules/.pnpm/mux.js@7.1.0/node_modules/mux.js/lib/utils/numbers.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/simple-swizzle@0.2.2/node_modules/simple-swizzle/index.js +23 -0
- package/dist/shop-minis-react/node_modules/.pnpm/simple-swizzle@0.2.2/node_modules/simple-swizzle/index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js +1 -1
- package/dist/shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js +27824 -0
- package/dist/shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/browser-index.js +26 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/browser-index.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/vtt.js +802 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/vtt.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/vttcue.js +188 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/vttcue.js.map +1 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/vttregion.js +104 -0
- package/dist/shop-minis-react/node_modules/.pnpm/videojs-vtt.js@0.15.5/node_modules/videojs-vtt.js/lib/vttregion.js.map +1 -0
- package/dist/shop-minis-react.css +1 -1
- package/dist/utils/colors.js +6 -0
- package/dist/utils/colors.js.map +1 -0
- package/dist/utils/merchant-card.js +44 -0
- package/dist/utils/merchant-card.js.map +1 -0
- package/package.json +6 -2
- package/src/components/atoms/video-player.tsx +213 -0
- package/src/components/commerce/merchant-card.tsx +219 -49
- package/src/components/index.ts +2 -0
- package/src/hooks/storage/useImageUpload.ts +3 -2
- package/src/hooks/util/useErrorScreen.ts +2 -1
- package/src/hooks/util/useErrorToast.ts +2 -1
- package/src/mocks.ts +148 -16
- package/src/stories/MerchantCard.stories.tsx +63 -9
- package/src/utils/colors.ts +5 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/merchant-card.ts +99 -0
- package/src/hooks/navigation/useCloseMini.doc.ts +0 -32
- package/src/hooks/navigation/useCloseMini.example.tsx +0 -7
- package/src/hooks/navigation/useDeeplink.doc.ts +0 -32
- package/src/hooks/navigation/useDeeplink.example.tsx +0 -7
- package/src/hooks/navigation/useShopNavigation.doc.ts +0 -32
- package/src/hooks/navigation/useShopNavigation.example.tsx +0 -29
- package/src/hooks/product/useCuratedProducts.doc.ts +0 -32
- package/src/hooks/product/useCuratedProducts.example.tsx +0 -10
- package/src/hooks/product/useProductList.doc.ts +0 -32
- package/src/hooks/product/useProductList.example.tsx +0 -9
- package/src/hooks/product/useProductListActions.doc.ts +0 -32
- package/src/hooks/product/useProductListActions.example.tsx +0 -57
- package/src/hooks/product/useProductLists.doc.ts +0 -32
- package/src/hooks/product/useProductLists.example.tsx +0 -9
- package/src/hooks/product/useProductSearch.doc.ts +0 -32
- package/src/hooks/product/useProductSearch.example.tsx +0 -13
- package/src/hooks/product/useRecommendedProducts.doc.ts +0 -32
- package/src/hooks/product/useRecommendedProducts.example.tsx +0 -7
- package/src/hooks/shop/useRecommendedShops.doc.ts +0 -32
- package/src/hooks/shop/useRecommendedShops.example.tsx +0 -7
- package/src/hooks/shop/useShop.doc.ts +0 -31
- package/src/hooks/shop/useShop.example.tsx +0 -7
- package/src/hooks/shop/useShopCartActions.doc.ts +0 -32
- package/src/hooks/shop/useShopCartActions.example.tsx +0 -28
- package/src/hooks/storage/useAsyncStorage.doc.ts +0 -32
- package/src/hooks/storage/useAsyncStorage.example.tsx +0 -30
- package/src/hooks/storage/useImageUpload.doc.ts +0 -32
- package/src/hooks/storage/useImageUpload.example.tsx +0 -20
- package/src/hooks/storage/useSecureStorage.doc.ts +0 -32
- package/src/hooks/storage/useSecureStorage.example.tsx +0 -23
- package/src/hooks/user/useBuyerAttributes.doc.ts +0 -32
- package/src/hooks/user/useBuyerAttributes.example.tsx +0 -14
- package/src/hooks/user/useCurrentUser.doc.ts +0 -31
- package/src/hooks/user/useCurrentUser.example.tsx +0 -7
- package/src/hooks/user/useFollowedShopsActions.doc.ts +0 -32
- package/src/hooks/user/useFollowedShopsActions.example.tsx +0 -18
- package/src/hooks/user/useOrders.doc.ts +0 -32
- package/src/hooks/user/useOrders.example.tsx +0 -7
- package/src/hooks/user/useRecentProducts.doc.ts +0 -32
- package/src/hooks/user/useRecentProducts.example.tsx +0 -13
- package/src/hooks/user/useSavedProducts.doc.ts +0 -32
- package/src/hooks/user/useSavedProducts.example.tsx +0 -13
- package/src/hooks/user/useSavedProductsActions.doc.ts +0 -32
- package/src/hooks/user/useSavedProductsActions.example.tsx +0 -30
- package/src/hooks/util/useErrorScreen.doc.ts +0 -32
- package/src/hooks/util/useErrorScreen.example.tsx +0 -16
- package/src/hooks/util/useErrorToast.doc.ts +0 -32
- package/src/hooks/util/useErrorToast.example.tsx +0 -15
- package/src/hooks/util/useImagePicker.example.tsx +0 -85
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as
|
|
3
|
-
import { cva as
|
|
4
|
-
import { useShopNavigation as
|
|
5
|
-
import { cn as
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsx as e, jsxs as i, Fragment as w } from "react/jsx-runtime";
|
|
2
|
+
import * as d from "react";
|
|
3
|
+
import { cva as F } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { useShopNavigation as O } from "../../hooks/navigation/useShopNavigation.js";
|
|
5
|
+
import { cn as l } from "../../lib/utils.js";
|
|
6
|
+
import { isDarkColor as N } from "../../utils/colors.js";
|
|
7
|
+
import { ThumbhashImage as H } from "../atoms/thumbhash-image.js";
|
|
8
|
+
import { Touchable as P } from "../atoms/touchable.js";
|
|
9
|
+
import { getFeaturedImages as V, extractBrandTheme as q, normalizeRating as L, formatReviewCount as U } from "../../utils/merchant-card.js";
|
|
10
|
+
import E from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
|
|
11
|
+
import { Root as G } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
|
|
12
|
+
const J = F(
|
|
13
|
+
"relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200",
|
|
11
14
|
{
|
|
12
15
|
variants: {
|
|
13
16
|
touchable: {
|
|
@@ -20,187 +23,314 @@ const R = N(
|
|
|
20
23
|
}
|
|
21
24
|
}
|
|
22
25
|
);
|
|
23
|
-
function
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
function S(e) {
|
|
27
|
-
return Math.round(e * 10) / 10;
|
|
28
|
-
}
|
|
29
|
-
function m({
|
|
30
|
-
className: e,
|
|
26
|
+
function C({
|
|
27
|
+
className: t,
|
|
31
28
|
touchable: a = !0,
|
|
32
|
-
asChild:
|
|
33
|
-
onPress:
|
|
34
|
-
...
|
|
29
|
+
asChild: r = !1,
|
|
30
|
+
onPress: o,
|
|
31
|
+
...n
|
|
35
32
|
}) {
|
|
36
|
-
const
|
|
37
|
-
|
|
33
|
+
const m = /* @__PURE__ */ e(
|
|
34
|
+
r ? G : "div",
|
|
38
35
|
{
|
|
39
|
-
className:
|
|
40
|
-
...
|
|
36
|
+
className: l(J({ touchable: a }), t),
|
|
37
|
+
...n
|
|
41
38
|
}
|
|
42
39
|
);
|
|
43
|
-
return a &&
|
|
44
|
-
|
|
40
|
+
return a && o ? /* @__PURE__ */ e(
|
|
41
|
+
P,
|
|
45
42
|
{
|
|
46
|
-
onClick:
|
|
43
|
+
onClick: o,
|
|
47
44
|
whileTap: { opacity: 0.7 },
|
|
48
45
|
transition: {
|
|
49
46
|
opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
|
|
50
47
|
},
|
|
51
|
-
children:
|
|
48
|
+
children: m
|
|
52
49
|
}
|
|
53
|
-
) :
|
|
50
|
+
) : m;
|
|
54
51
|
}
|
|
55
|
-
function
|
|
56
|
-
className:
|
|
52
|
+
function y({
|
|
53
|
+
className: t,
|
|
57
54
|
...a
|
|
58
55
|
}) {
|
|
59
|
-
return /* @__PURE__ */
|
|
56
|
+
return /* @__PURE__ */ e(
|
|
60
57
|
"div",
|
|
61
58
|
{
|
|
62
59
|
"data-slot": "merchant-card-image-container",
|
|
63
|
-
className:
|
|
60
|
+
className: l("relative overflow-hidden w-full flex-grow", t),
|
|
64
61
|
...a
|
|
65
62
|
}
|
|
66
63
|
);
|
|
67
64
|
}
|
|
68
|
-
function
|
|
69
|
-
className:
|
|
65
|
+
function g({
|
|
66
|
+
className: t,
|
|
70
67
|
src: a,
|
|
71
|
-
alt:
|
|
68
|
+
alt: r,
|
|
69
|
+
thumbhash: o,
|
|
72
70
|
...n
|
|
73
71
|
}) {
|
|
74
|
-
return a ? /* @__PURE__ */
|
|
72
|
+
return a ? o ? /* @__PURE__ */ e(
|
|
73
|
+
H,
|
|
74
|
+
{
|
|
75
|
+
"data-slot": "merchant-card-image",
|
|
76
|
+
src: a,
|
|
77
|
+
alt: r,
|
|
78
|
+
thumbhash: o,
|
|
79
|
+
className: l("w-full h-full object-cover", t),
|
|
80
|
+
...n
|
|
81
|
+
}
|
|
82
|
+
) : /* @__PURE__ */ e(
|
|
75
83
|
"img",
|
|
76
84
|
{
|
|
77
85
|
"data-slot": "merchant-card-image",
|
|
78
86
|
src: a,
|
|
79
|
-
alt:
|
|
80
|
-
className:
|
|
87
|
+
alt: r,
|
|
88
|
+
className: l("w-full h-full object-cover", t),
|
|
81
89
|
...n
|
|
82
90
|
}
|
|
83
|
-
) : /* @__PURE__ */
|
|
91
|
+
) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-100" });
|
|
84
92
|
}
|
|
85
|
-
function
|
|
86
|
-
className:
|
|
93
|
+
function v({
|
|
94
|
+
className: t,
|
|
87
95
|
src: a,
|
|
88
|
-
alt:
|
|
96
|
+
alt: r,
|
|
97
|
+
shopName: o,
|
|
89
98
|
...n
|
|
90
99
|
}) {
|
|
91
|
-
return /* @__PURE__ */
|
|
100
|
+
return /* @__PURE__ */ e(
|
|
92
101
|
"div",
|
|
93
102
|
{
|
|
94
103
|
"data-slot": "merchant-card-logo",
|
|
95
|
-
className:
|
|
96
|
-
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
|
|
97
|
-
"w-
|
|
104
|
+
className: l(
|
|
105
|
+
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10",
|
|
106
|
+
"w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm",
|
|
98
107
|
"flex items-center justify-center overflow-hidden",
|
|
99
|
-
|
|
108
|
+
t
|
|
100
109
|
),
|
|
101
110
|
...n,
|
|
102
|
-
children: a ? /* @__PURE__ */
|
|
111
|
+
children: a ? /* @__PURE__ */ e("img", { src: a, alt: r, className: "w-full h-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-gray-600 font-semibold text-lg", children: o?.slice(0, 1) }) })
|
|
103
112
|
}
|
|
104
113
|
);
|
|
105
114
|
}
|
|
106
|
-
function
|
|
107
|
-
return /* @__PURE__ */
|
|
115
|
+
function k({ className: t, ...a }) {
|
|
116
|
+
return /* @__PURE__ */ e(
|
|
108
117
|
"div",
|
|
109
118
|
{
|
|
110
119
|
"data-slot": "merchant-card-info",
|
|
111
|
-
className:
|
|
120
|
+
className: l(
|
|
121
|
+
"p-3 space-y-2 flex-shrink-0 flex items-center justify-between",
|
|
122
|
+
t
|
|
123
|
+
),
|
|
112
124
|
...a
|
|
113
125
|
}
|
|
114
126
|
);
|
|
115
127
|
}
|
|
116
|
-
function
|
|
117
|
-
className:
|
|
128
|
+
function I({
|
|
129
|
+
className: t,
|
|
118
130
|
children: a,
|
|
119
|
-
...
|
|
131
|
+
...r
|
|
120
132
|
}) {
|
|
121
|
-
return /* @__PURE__ */
|
|
133
|
+
return /* @__PURE__ */ e(
|
|
122
134
|
"h3",
|
|
123
135
|
{
|
|
124
136
|
"data-slot": "merchant-card-name",
|
|
125
|
-
className:
|
|
137
|
+
className: l(
|
|
126
138
|
"text-sm font-medium text-grayscale-d100",
|
|
127
139
|
"truncate overflow-hidden whitespace-nowrap text-ellipsis",
|
|
128
|
-
|
|
140
|
+
t
|
|
129
141
|
),
|
|
130
|
-
...
|
|
142
|
+
...r,
|
|
131
143
|
children: a
|
|
132
144
|
}
|
|
133
145
|
);
|
|
134
146
|
}
|
|
135
|
-
function
|
|
136
|
-
className:
|
|
147
|
+
function M({
|
|
148
|
+
className: t,
|
|
137
149
|
rating: a,
|
|
138
|
-
reviewCount:
|
|
139
|
-
...
|
|
150
|
+
reviewCount: r,
|
|
151
|
+
...o
|
|
140
152
|
}) {
|
|
141
|
-
return !a || !
|
|
153
|
+
return !a || !r ? null : /* @__PURE__ */ i(
|
|
142
154
|
"div",
|
|
143
155
|
{
|
|
144
156
|
"data-slot": "merchant-card-rating",
|
|
145
|
-
className:
|
|
146
|
-
|
|
147
|
-
e
|
|
148
|
-
),
|
|
149
|
-
...n,
|
|
157
|
+
className: l("flex items-center gap-1 text-xs", t),
|
|
158
|
+
...o,
|
|
150
159
|
children: [
|
|
151
|
-
/* @__PURE__ */
|
|
152
|
-
/* @__PURE__ */ i(
|
|
153
|
-
|
|
160
|
+
/* @__PURE__ */ e(E, { className: "h-3 w-3 fill-current" }),
|
|
161
|
+
/* @__PURE__ */ i("span", { className: "text-xs", children: [
|
|
162
|
+
L(a),
|
|
154
163
|
" (",
|
|
155
|
-
|
|
164
|
+
U(r),
|
|
156
165
|
")"
|
|
157
166
|
] })
|
|
158
167
|
]
|
|
159
168
|
}
|
|
160
169
|
);
|
|
161
170
|
}
|
|
162
|
-
function
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
a &&
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
/* @__PURE__ */ i(f, { children: [
|
|
173
|
-
/* @__PURE__ */ r(
|
|
174
|
-
u,
|
|
171
|
+
function j({
|
|
172
|
+
shop: t,
|
|
173
|
+
cardTheme: a,
|
|
174
|
+
logoBackgroundClassName: r
|
|
175
|
+
}) {
|
|
176
|
+
const o = t.visualTheme?.brandSettings?.headerTheme?.wordmark;
|
|
177
|
+
return /* @__PURE__ */ i("div", { className: "size-full relative", children: [
|
|
178
|
+
a.type === "coverImage" && /* @__PURE__ */ i(w, { children: [
|
|
179
|
+
/* @__PURE__ */ e(
|
|
180
|
+
g,
|
|
175
181
|
{
|
|
176
|
-
src:
|
|
177
|
-
alt:
|
|
182
|
+
src: a.coverImageUrl,
|
|
183
|
+
alt: t.name,
|
|
184
|
+
thumbhash: a.coverImageThumbhash ?? void 0,
|
|
185
|
+
className: "size-full"
|
|
178
186
|
}
|
|
179
187
|
),
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
|
|
188
|
+
/* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] bg-black/20" }),
|
|
189
|
+
/* @__PURE__ */ e(
|
|
190
|
+
"div",
|
|
182
191
|
{
|
|
183
|
-
|
|
184
|
-
|
|
192
|
+
className: "absolute bottom-0 z-[1] size-full",
|
|
193
|
+
style: {
|
|
194
|
+
background: `linear-gradient(to top, ${a.backgroundColor} 0%, ${a.backgroundColor}00 40%)`
|
|
195
|
+
}
|
|
185
196
|
}
|
|
186
197
|
)
|
|
187
198
|
] }),
|
|
188
|
-
/* @__PURE__ */
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
199
|
+
/* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] flex items-center justify-center", children: o ? /* @__PURE__ */ e(
|
|
200
|
+
"img",
|
|
201
|
+
{
|
|
202
|
+
src: o.url,
|
|
203
|
+
alt: o.altText || t.name,
|
|
204
|
+
className: "max-h-16 min-h-10 max-w-28 object-contain",
|
|
205
|
+
"data-testid": "store-data-wordmark"
|
|
206
|
+
}
|
|
207
|
+
) : /* @__PURE__ */ e(
|
|
208
|
+
v,
|
|
209
|
+
{
|
|
210
|
+
src: t.visualTheme?.logoImage?.url,
|
|
211
|
+
alt: `${t.name} logo`,
|
|
212
|
+
shopName: t.name,
|
|
213
|
+
className: r
|
|
214
|
+
}
|
|
215
|
+
) })
|
|
192
216
|
] });
|
|
193
217
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
218
|
+
function oe({
|
|
219
|
+
shop: t,
|
|
220
|
+
touchable: a = !0,
|
|
221
|
+
fixedHeight: r = !1,
|
|
222
|
+
featuredImagesLimit: o = 4
|
|
223
|
+
}) {
|
|
224
|
+
const { navigateToShop: n } = O(), {
|
|
225
|
+
id: f,
|
|
226
|
+
name: m,
|
|
227
|
+
reviewAnalytics: { averageRating: T, reviewCount: z },
|
|
228
|
+
visualTheme: s
|
|
229
|
+
} = t, S = d.useCallback(() => {
|
|
230
|
+
a && n({ shopId: f });
|
|
231
|
+
}, [n, f, a]), b = d.useMemo(
|
|
232
|
+
() => V(s, o),
|
|
233
|
+
[s, o]
|
|
234
|
+
), R = b?.length ?? 0, B = s?.brandSettings?.colors?.logoAverage, D = s?.brandSettings?.colors?.logoDominant, h = B || D, x = d.useMemo(
|
|
235
|
+
() => h && N(h) ? "bg-white" : "bg-gray-800",
|
|
236
|
+
[h]
|
|
237
|
+
), c = d.useMemo(
|
|
238
|
+
() => q(s?.brandSettings),
|
|
239
|
+
[s?.brandSettings]
|
|
240
|
+
), p = d.useMemo(() => c.backgroundColor !== "white" && N(c.backgroundColor), [c.backgroundColor]) ? "text-primary-foreground" : "text-foreground", $ = c.type === "coverImage" || c.type === "brandColor";
|
|
241
|
+
return /* @__PURE__ */ e("div", { className: l("flex", r ? "" : "aspect-square"), children: /* @__PURE__ */ i(
|
|
242
|
+
C,
|
|
243
|
+
{
|
|
244
|
+
touchable: a,
|
|
245
|
+
onPress: S,
|
|
246
|
+
style: {
|
|
247
|
+
backgroundColor: c.backgroundColor
|
|
248
|
+
},
|
|
249
|
+
children: [
|
|
250
|
+
/* @__PURE__ */ e(
|
|
251
|
+
y,
|
|
252
|
+
{
|
|
253
|
+
className: l(
|
|
254
|
+
"relative overflow-hidden w-full",
|
|
255
|
+
r ? "h-[120px]" : "flex-1"
|
|
256
|
+
),
|
|
257
|
+
children: $ ? /* @__PURE__ */ e(
|
|
258
|
+
j,
|
|
259
|
+
{
|
|
260
|
+
shop: t,
|
|
261
|
+
cardTheme: c,
|
|
262
|
+
logoBackgroundClassName: x
|
|
263
|
+
}
|
|
264
|
+
) : /* @__PURE__ */ i(w, { children: [
|
|
265
|
+
/* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ e(
|
|
266
|
+
v,
|
|
267
|
+
{
|
|
268
|
+
src: s?.logoImage?.url,
|
|
269
|
+
alt: `${m} logo`,
|
|
270
|
+
shopName: m,
|
|
271
|
+
className: x,
|
|
272
|
+
"data-testid": "merchant-logo"
|
|
273
|
+
}
|
|
274
|
+
) }),
|
|
275
|
+
R > 0 ? b?.map((u, A) => /* @__PURE__ */ e(
|
|
276
|
+
"div",
|
|
277
|
+
{
|
|
278
|
+
className: "z-0 flex h-full flex-1",
|
|
279
|
+
children: /* @__PURE__ */ e(
|
|
280
|
+
g,
|
|
281
|
+
{
|
|
282
|
+
src: u.url,
|
|
283
|
+
alt: u.altText || "",
|
|
284
|
+
thumbhash: u.thumbhash ?? void 0
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
},
|
|
288
|
+
u.url || A
|
|
289
|
+
)) : /* @__PURE__ */ e(
|
|
290
|
+
"div",
|
|
291
|
+
{
|
|
292
|
+
className: "h-20 bg-gray-100",
|
|
293
|
+
"data-testid": "image-fallback"
|
|
294
|
+
}
|
|
295
|
+
)
|
|
296
|
+
] })
|
|
297
|
+
}
|
|
298
|
+
),
|
|
299
|
+
/* @__PURE__ */ e(k, { className: "flex items-center justify-between p-3", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-start gap-2", children: /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
300
|
+
/* @__PURE__ */ e(
|
|
301
|
+
I,
|
|
302
|
+
{
|
|
303
|
+
className: l(
|
|
304
|
+
"line-clamp-1 overflow-hidden text-ellipsis",
|
|
305
|
+
p
|
|
306
|
+
),
|
|
307
|
+
children: m
|
|
308
|
+
}
|
|
309
|
+
),
|
|
310
|
+
/* @__PURE__ */ e(
|
|
311
|
+
M,
|
|
312
|
+
{
|
|
313
|
+
rating: T,
|
|
314
|
+
reviewCount: z,
|
|
315
|
+
className: p
|
|
316
|
+
}
|
|
317
|
+
)
|
|
318
|
+
] }) }) })
|
|
319
|
+
]
|
|
320
|
+
}
|
|
321
|
+
) });
|
|
322
|
+
}
|
|
323
|
+
const le = Object.assign(C, {
|
|
324
|
+
ImageContainer: y,
|
|
325
|
+
Image: g,
|
|
326
|
+
Logo: v,
|
|
327
|
+
Info: k,
|
|
328
|
+
Name: I,
|
|
329
|
+
Rating: M,
|
|
330
|
+
BrandedHeader: j
|
|
201
331
|
});
|
|
202
332
|
export {
|
|
203
|
-
|
|
204
|
-
|
|
333
|
+
oe as MerchantCard,
|
|
334
|
+
le as MerchantCardPrimitive
|
|
205
335
|
};
|
|
206
336
|
//# sourceMappingURL=merchant-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {Touchable} from '../atoms/touchable'\n\nconst merchantCardVariants = cva(\n 'relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col',\n {\n variants: {\n touchable: {\n true: 'cursor-pointer',\n false: '',\n },\n },\n defaultVariants: {\n touchable: true,\n },\n }\n)\n\nfunction formatReviewCount(count: number): string {\n if (count >= 1000000) {\n return `${Math.floor(count / 100000) / 10}M`\n }\n if (count >= 1000) {\n return `${Math.floor(count / 1000)}K`\n }\n return count.toString()\n}\n\nfunction normalizeRating(rating: number): number {\n return Math.round(rating * 10) / 10\n}\n\nexport interface MerchantCardRootProps\n extends React.ComponentProps<'div'>,\n VariantProps<typeof merchantCardVariants> {\n touchable?: boolean\n asChild?: boolean\n onPress?: () => void\n}\n\nfunction MerchantCardRoot({\n className,\n touchable = true,\n asChild = false,\n onPress,\n ...props\n}: MerchantCardRootProps) {\n const Comp = asChild ? SlotPrimitive.Slot : 'div'\n\n const content = (\n <Comp\n className={cn(merchantCardVariants({touchable}), className)}\n {...props}\n />\n )\n\n if (touchable && onPress) {\n return (\n <Touchable\n onClick={onPress}\n whileTap={{opacity: 0.7}}\n transition={{\n opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n }}\n >\n {content}\n </Touchable>\n )\n }\n\n return content\n}\n\nfunction MerchantCardImageContainer({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"merchant-card-image-container\"\n className={cn('relative overflow-hidden w-full flex-grow', className)}\n {...props}\n />\n )\n}\n\nfunction MerchantCardImage({\n className,\n src,\n alt,\n ...props\n}: React.ComponentProps<'img'> & {\n src?: string\n alt?: string\n}) {\n return src ? (\n <img\n data-slot=\"merchant-card-image\"\n src={src}\n alt={alt}\n className={cn('w-full h-full object-cover', className)}\n {...props}\n />\n ) : (\n <div className=\"w-full h-full bg-grayscale-l10\" />\n )\n}\n\nfunction MerchantCardLogo({\n className,\n src,\n alt,\n ...props\n}: React.ComponentProps<'div'> & {\n src?: string\n alt?: string\n}) {\n return (\n <div\n data-slot=\"merchant-card-logo\"\n className={cn(\n 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n 'w-14 h-14 rounded-xl',\n 'flex items-center justify-center overflow-hidden',\n className\n )}\n {...props}\n >\n {src ? (\n <img src={src} alt={alt} className=\"w-full h-full object-cover\" />\n ) : (\n <div className=\"w-full h-full bg-grayscale-l20\" />\n )}\n </div>\n )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"merchant-card-info\"\n className={cn('p-3 space-y-1 flex-shrink-0', className)}\n {...props}\n />\n )\n}\n\nfunction MerchantCardName({\n className,\n children,\n ...props\n}: React.ComponentProps<'h3'>) {\n return (\n <h3\n data-slot=\"merchant-card-name\"\n className={cn(\n 'text-sm font-medium text-grayscale-d100',\n 'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n className\n )}\n {...props}\n >\n {children}\n </h3>\n )\n}\n\nfunction MerchantCardRating({\n className,\n rating,\n reviewCount,\n ...props\n}: React.ComponentProps<'div'> & {\n rating?: number | null\n reviewCount?: number\n}) {\n if (!rating || !reviewCount) return null\n\n return (\n <div\n data-slot=\"merchant-card-rating\"\n className={cn(\n 'flex items-center gap-1 text-sm text-grayscale-d100',\n className\n )}\n {...props}\n >\n <Star className=\"h-3.5 w-3.5 fill-current\" />\n <>\n {normalizeRating(rating)} ({formatReviewCount(reviewCount)})\n </>\n </div>\n )\n}\n\nexport interface MerchantCardProps {\n variant?: 'default' | 'compact'\n shop: Shop\n touchable?: boolean\n}\n\n// Composed MerchantCard component\nfunction MerchantCard({shop, touchable = true}: MerchantCardProps) {\n const {navigateToShop} = useShopNavigation()\n\n const {\n id,\n name,\n reviewAnalytics: {averageRating, reviewCount},\n visualTheme,\n } = shop\n\n const handlePress = React.useCallback(() => {\n if (!touchable) return\n navigateToShop({shopId: id})\n }, [navigateToShop, id, touchable])\n\n return (\n <MerchantCardRoot touchable={touchable} onPress={handlePress}>\n <MerchantCardImageContainer>\n <MerchantCardImage\n src={visualTheme?.featuredImages?.[0]?.url}\n alt={`${name} featured image`}\n />\n <MerchantCardLogo\n src={visualTheme?.logoImage?.url}\n alt={`${name} logo`}\n />\n </MerchantCardImageContainer>\n\n <MerchantCardInfo>\n <MerchantCardName>{name}</MerchantCardName>\n <MerchantCardRating rating={averageRating} reviewCount={reviewCount} />\n </MerchantCardInfo>\n </MerchantCardRoot>\n )\n}\n\nexport const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {\n ImageContainer: MerchantCardImageContainer,\n Image: MerchantCardImage,\n Logo: MerchantCardLogo,\n Info: MerchantCardInfo,\n Name: MerchantCardName,\n Rating: MerchantCardRating,\n})\n\nexport {MerchantCard}\n"],"names":["merchantCardVariants","cva","formatReviewCount","count","normalizeRating","rating","MerchantCardRoot","className","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","MerchantCardImageContainer","MerchantCardImage","src","alt","MerchantCardLogo","MerchantCardInfo","MerchantCardName","children","MerchantCardRating","reviewCount","jsxs","Star","Fragment","MerchantCard","shop","navigateToShop","useShopNavigation","id","name","averageRating","visualTheme","handlePress","React","MerchantCardPrimitive"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n type ExtractedBrandTheme,\n extractBrandTheme,\n formatReviewCount,\n getFeaturedImages,\n normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {ThumbhashImage} from '../atoms/thumbhash-image'\nimport {Touchable} from '../atoms/touchable'\n\nconst merchantCardVariants = cva(\n 'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200',\n {\n variants: {\n touchable: {\n true: 'cursor-pointer',\n false: '',\n },\n },\n defaultVariants: {\n touchable: true,\n },\n }\n)\n\nexport interface MerchantCardRootProps\n extends React.ComponentProps<'div'>,\n VariantProps<typeof merchantCardVariants> {\n touchable?: boolean\n asChild?: boolean\n onPress?: () => void\n}\n\nfunction MerchantCardRoot({\n className,\n touchable = true,\n asChild = false,\n onPress,\n ...props\n}: MerchantCardRootProps) {\n const Comp = asChild ? SlotPrimitive.Slot : 'div'\n\n const content = (\n <Comp\n className={cn(merchantCardVariants({touchable}), className)}\n {...props}\n />\n )\n\n if (touchable && onPress) {\n return (\n <Touchable\n onClick={onPress}\n whileTap={{opacity: 0.7}}\n transition={{\n opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n }}\n >\n {content}\n </Touchable>\n )\n }\n\n return content\n}\n\nfunction MerchantCardImageContainer({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"merchant-card-image-container\"\n className={cn('relative overflow-hidden w-full flex-grow', className)}\n {...props}\n />\n )\n}\n\nfunction MerchantCardImage({\n className,\n src,\n alt,\n thumbhash,\n ...props\n}: React.ComponentProps<'img'> & {\n src?: string\n alt?: string\n thumbhash?: string\n}) {\n if (!src) {\n return <div className=\"w-full h-full bg-gray-100\" />\n }\n\n if (thumbhash) {\n return (\n <ThumbhashImage\n data-slot=\"merchant-card-image\"\n src={src}\n alt={alt}\n thumbhash={thumbhash}\n className={cn('w-full h-full object-cover', className)}\n {...props}\n />\n )\n }\n\n return (\n <img\n data-slot=\"merchant-card-image\"\n src={src}\n alt={alt}\n className={cn('w-full h-full object-cover', className)}\n {...props}\n />\n )\n}\n\nfunction MerchantCardLogo({\n className,\n src,\n alt,\n shopName,\n ...props\n}: React.ComponentProps<'div'> & {\n src?: string\n alt?: string\n shopName?: string\n}) {\n return (\n <div\n data-slot=\"merchant-card-logo\"\n className={cn(\n 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n 'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n 'flex items-center justify-center overflow-hidden',\n className\n )}\n {...props}\n >\n {src ? (\n <img src={src} alt={alt} className=\"w-full h-full object-cover\" />\n ) : (\n <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n <span className=\"text-gray-600 font-semibold text-lg\">\n {shopName?.slice(0, 1)}\n </span>\n </div>\n )}\n </div>\n )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"merchant-card-info\"\n className={cn(\n 'p-3 space-y-2 flex-shrink-0 flex items-center justify-between',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction MerchantCardName({\n className,\n children,\n ...props\n}: React.ComponentProps<'h3'>) {\n return (\n <h3\n data-slot=\"merchant-card-name\"\n className={cn(\n 'text-sm font-medium text-grayscale-d100',\n 'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n className\n )}\n {...props}\n >\n {children}\n </h3>\n )\n}\n\nfunction MerchantCardRating({\n className,\n rating,\n reviewCount,\n ...props\n}: React.ComponentProps<'div'> & {\n rating?: number | null\n reviewCount?: number\n}) {\n if (!rating || !reviewCount) return null\n\n return (\n <div\n data-slot=\"merchant-card-rating\"\n className={cn('flex items-center gap-1 text-xs', className)}\n {...props}\n >\n <Star className=\"h-3 w-3 fill-current\" />\n <span className=\"text-xs\">\n {normalizeRating(rating)} ({formatReviewCount(reviewCount)})\n </span>\n </div>\n )\n}\n\nfunction MerchantCardBrandedHeader({\n shop,\n cardTheme,\n logoBackgroundClassName,\n}: {\n shop: Shop\n cardTheme: ExtractedBrandTheme\n logoBackgroundClassName?: string\n}) {\n const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n return (\n <div className=\"size-full relative\">\n {cardTheme.type === 'coverImage' && (\n <>\n <MerchantCardImage\n src={cardTheme.coverImageUrl}\n alt={shop.name}\n thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n className=\"size-full\"\n />\n\n <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n <div\n className=\"absolute bottom-0 z-[1] size-full\"\n style={{\n background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n }}\n />\n </>\n )}\n\n <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n {wordmarkImage ? (\n <img\n src={wordmarkImage.url}\n alt={wordmarkImage.altText || shop.name}\n className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n data-testid=\"store-data-wordmark\"\n />\n ) : (\n <MerchantCardLogo\n src={shop.visualTheme?.logoImage?.url}\n alt={`${shop.name} logo`}\n shopName={shop.name}\n className={logoBackgroundClassName}\n />\n )}\n </div>\n </div>\n )\n}\nexport interface MerchantCardProps {\n shop: Shop\n touchable?: boolean\n fixedHeight?: boolean\n featuredImagesLimit?: number\n}\n\nfunction MerchantCard({\n shop,\n touchable = true,\n fixedHeight = false,\n featuredImagesLimit = 4,\n}: MerchantCardProps) {\n const {navigateToShop} = useShopNavigation()\n\n const {\n id,\n name,\n reviewAnalytics: {averageRating, reviewCount},\n visualTheme,\n } = shop\n\n const handlePress = React.useCallback(() => {\n if (!touchable) return\n navigateToShop({shopId: id})\n }, [navigateToShop, id, touchable])\n\n const featuredImages = React.useMemo(\n () => getFeaturedImages(visualTheme, featuredImagesLimit),\n [visualTheme, featuredImagesLimit]\n )\n\n const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n const logoColor = logoAverageColor || logoDominantColor\n\n const logoBackgroundClassName = React.useMemo(\n () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n [logoColor]\n )\n\n const cardTheme = React.useMemo(\n () => extractBrandTheme(visualTheme?.brandSettings),\n [visualTheme?.brandSettings]\n )\n\n const isDarkTheme = React.useMemo(() => {\n return (\n cardTheme.backgroundColor !== 'white' &&\n isDarkColor(cardTheme.backgroundColor)\n )\n }, [cardTheme.backgroundColor])\n\n const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n const hasBrandedHeader =\n cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n return (\n <div className={cn('flex', fixedHeight ? '' : 'aspect-square')}>\n <MerchantCardRoot\n touchable={touchable}\n onPress={handlePress}\n style={{\n backgroundColor: cardTheme.backgroundColor,\n }}\n >\n <MerchantCardImageContainer\n className={cn(\n 'relative overflow-hidden w-full',\n fixedHeight ? 'h-[120px]' : 'flex-1'\n )}\n >\n {hasBrandedHeader ? (\n <MerchantCardBrandedHeader\n shop={shop}\n cardTheme={cardTheme}\n logoBackgroundClassName={logoBackgroundClassName}\n />\n ) : (\n <>\n <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n <MerchantCardLogo\n src={visualTheme?.logoImage?.url}\n alt={`${name} logo`}\n shopName={name}\n className={logoBackgroundClassName}\n data-testid=\"merchant-logo\"\n />\n </div>\n\n {numberOfFeaturedImages > 0 ? (\n featuredImages?.map((image, index) => (\n <div\n className=\"z-0 flex h-full flex-1\"\n key={image.url || index}\n >\n <MerchantCardImage\n src={image.url}\n alt={image.altText || ''}\n thumbhash={image.thumbhash ?? undefined}\n />\n </div>\n ))\n ) : (\n <div\n className=\"h-20 bg-gray-100\"\n data-testid=\"image-fallback\"\n />\n )}\n </>\n )}\n </MerchantCardImageContainer>\n\n <MerchantCardInfo className=\"flex items-center justify-between p-3\">\n <div className=\"flex flex-col items-start gap-2\">\n <div className=\"flex min-w-0 flex-1 flex-col\">\n <MerchantCardName\n className={cn(\n 'line-clamp-1 overflow-hidden text-ellipsis',\n textColor\n )}\n >\n {name}\n </MerchantCardName>\n\n <MerchantCardRating\n rating={averageRating}\n reviewCount={reviewCount}\n className={textColor}\n />\n </div>\n </div>\n </MerchantCardInfo>\n </MerchantCardRoot>\n </div>\n )\n}\n\nexport const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {\n ImageContainer: MerchantCardImageContainer,\n Image: MerchantCardImage,\n Logo: MerchantCardLogo,\n Info: MerchantCardInfo,\n Name: MerchantCardName,\n Rating: MerchantCardRating,\n BrandedHeader: MerchantCardBrandedHeader,\n})\n\nexport {MerchantCard}\n"],"names":["merchantCardVariants","cva","MerchantCardRoot","className","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","MerchantCardImageContainer","MerchantCardImage","src","alt","thumbhash","ThumbhashImage","MerchantCardLogo","shopName","MerchantCardInfo","MerchantCardName","children","MerchantCardRating","rating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardBrandedHeader","shop","cardTheme","logoBackgroundClassName","wordmarkImage","Fragment","MerchantCard","fixedHeight","featuredImagesLimit","navigateToShop","useShopNavigation","id","name","averageRating","visualTheme","handlePress","React","featuredImages","getFeaturedImages","numberOfFeaturedImages","logoAverageColor","logoDominantColor","logoColor","isDarkColor","extractBrandTheme","textColor","hasBrandedHeader","image","index","MerchantCardPrimitive"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {UploadTarget} from '
|
|
1
|
+
{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n /**\n * The MIME type of the image.\n */\n mimeType: string\n /**\n * The size of the image in bytes.\n */\n fileSize: number\n /**\n * The URI of the image to upload.\n */\n uri: string\n}\n\nexport interface UploadedImage {\n /**\n * The ID of the uploaded image.\n */\n id: string\n /**\n * The URL of the uploaded image.\n */\n imageUrl?: string\n /**\n * The resource URL of the uploaded image.\n */\n resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n /**\n * Upload an image attached to the current user.\n */\n uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\nconst uploadFileToGCS = async (\n image: UploadImageParams,\n target: UploadTarget\n) => {\n const formData = new FormData()\n target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n formData.append(name, value)\n })\n // Append the actual file data last\n formData.append('file', new Blob([image.uri], {type: image.mimeType}))\n\n const uploadResponse = await fetch(target.url, {\n method: 'POST',\n body: formData,\n })\n\n if (!uploadResponse.ok) {\n console.error('Failed to upload image', {\n response: await uploadResponse.text(),\n })\n return {error: 'Failed to upload image'}\n }\n\n return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n const uploadImage = useCallback(\n async (params: UploadImageParams[]) => {\n if (params.length > 1) {\n throw new Error('Multiple image upload is not supported yet')\n }\n\n const links = await createImageUploadLink({\n input: params.map(image => ({\n mimeType: image.mimeType,\n fileSize: image.fileSize,\n })),\n })\n\n if (!links.ok) {\n throw new Error(links.error.message)\n }\n\n // Upload single file to GCS\n // TODO: Upload multiple files to GCS\n const {error: uploadError} = await uploadFileToGCS(\n params[0],\n links?.data?.targets?.[0]!\n )\n\n if (uploadError) {\n throw new Error(uploadError)\n }\n\n // 10 second polling for image upload\n let count = 0\n while (count < 30) {\n const result = await completeImageUpload({\n resourceUrls:\n links?.data?.targets?.map(target => target.resourceUrl) || [],\n })\n\n if (!result.ok) {\n throw new Error(result.error.message)\n }\n\n // TODO: Add support for multiple files\n if (result.data?.files?.[0]?.fileStatus === 'READY') {\n return [\n {\n id: result.data.files[0].id,\n imageUrl: result.data.files[0].image?.url,\n resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n },\n ]\n }\n\n await new Promise(resolve => setTimeout(resolve, 1000))\n count++\n }\n\n throw new Error('Image upload completion timed out')\n },\n [createImageUploadLink, completeImageUpload]\n )\n\n return {\n uploadImage,\n }\n}\n"],"names":["uploadFileToGCS","image","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","links","uploadError","count","result","resolve"],"mappings":";;AA2CA,MAAMA,IAAkB,OACtBC,GACAC,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEDF,EAAS,OAAO,QAAQ,IAAI,KAAK,CAACF,EAAM,GAAG,GAAG,EAAC,MAAMA,EAAM,SAAS,CAAA,CAAC;AAErE,QAAMK,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA8D7D,SAAA;AAAA,IACL,aA7DkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAOI,EAAO,IAAI,CAAUX,OAAA;AAAA,YAC1B,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,UAAA,EAChB;AAAA,QAAA,CACH;AAEG,YAAA,CAACY,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAKrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMd;AAAA,UACjCY,EAAO,CAAC;AAAA,UACRC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAItC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useErrorScreen.js","sources":["../../../src/hooks/util/useErrorScreen.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useErrorScreen.js","sources":["../../../src/hooks/util/useErrorScreen.ts"],"sourcesContent":["import {ShopActions} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseErrorScreenReturns {\n /**\n * Show an error screen with the given error message.\n */\n showErrorScreen: ShopActions['showErrorScreen']\n}\n\nexport const useErrorScreen = (): UseErrorScreenReturns => {\n const {showErrorScreen} = useShopActions()\n\n return {showErrorScreen}\n}\n"],"names":["useErrorScreen","showErrorScreen","useShopActions"],"mappings":";AAWO,MAAMA,IAAiB,MAA6B;AACnD,QAAA,EAAC,iBAAAC,EAAe,IAAIC,EAAe;AAEzC,SAAO,EAAC,iBAAAD,EAAe;AACzB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useErrorToast.js","sources":["../../../src/hooks/util/useErrorToast.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useErrorToast.js","sources":["../../../src/hooks/util/useErrorToast.ts"],"sourcesContent":["import {ShopActions} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseErrorToastReturns {\n /**\n * Show an error toast with the given error message.\n */\n showErrorToast: ShopActions['showErrorToast']\n}\n\nexport const useErrorToast = (): UseErrorToastReturns => {\n const {showErrorToast} = useShopActions()\n\n return {showErrorToast}\n}\n"],"names":["useErrorToast","showErrorToast","useShopActions"],"mappings":";AAWO,MAAMA,IAAgB,MAA4B;AACjD,QAAA,EAAC,gBAAAC,EAAc,IAAIC,EAAe;AAExC,SAAO,EAAC,gBAAAD,EAAc;AACxB;"}
|