@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
496 lines (495 loc) • 14.1 kB
JavaScript
import { UserState as v } from "./shop-minis-platform/src/types/user.js";
import { MinisContentStatus as S } from "./shop-minis-platform/src/types/content.js";
const u = [
"garnished.jpeg",
"bath.jpeg",
"teapot.jpg",
"shoes.jpeg"
], P = (o) => {
let r = 0;
for (let t = 0; t < o.length; t++)
r = (r << 5) - r + o.charCodeAt(t), r |= 0;
return Math.abs(r);
}, e = (o, r, t = "99.99", n) => {
const s = P(o) % u.length, c = u[s];
return {
id: o,
title: r,
price: { amount: t, currencyCode: "USD" },
...n && {
compareAtPrice: { amount: n, currencyCode: "USD" }
},
reviewAnalytics: { averageRating: 4.5, reviewCount: 10 },
shop: i("shop1", "Mock Shop"),
defaultVariantId: `variant-${o}`,
isFavorited: !1,
featuredImage: {
url: `https://cdn.shopify.com/static/sample-images/${c}`,
altText: r
}
};
}, l = (o, r = {}) => ({
id: o,
rating: 5,
title: "Great product",
body: "Loved it. Would buy again.",
submittedAt: (/* @__PURE__ */ new Date()).toISOString(),
merchantReply: null,
merchantRepliedAt: null,
...r
}), i = (o, r, t) => {
const n = t?.themeType || "none", s = t?.withBrandSettings || n !== "none", c = t?.featuredImagesLimit || 3, p = Array.from({ length: c }, (C, m) => ({
url: `https://picsum.photos/400/400?random=${o}-${m}`,
sensitive: !1,
altText: `${r} featured image ${m + 1}`
})), g = () => {
switch (n) {
case "coverImage":
return {
primary: t?.primaryColor,
logoDominant: t?.logoDominantColor,
logoAverage: t?.logoAverageColor,
coverDominant: t?.coverDominantColor || "#FF6B35"
};
case "brandColor":
return {
primary: t?.primaryColor || "#27AE60",
logoDominant: t?.logoDominantColor,
logoAverage: t?.logoAverageColor,
coverDominant: t?.coverDominantColor
};
case "logoColor":
return {
primary: t?.primaryColor,
logoDominant: t?.logoDominantColor || "#E74C3C",
logoAverage: t?.logoAverageColor,
coverDominant: t?.coverDominantColor
};
default:
return {
primary: t?.primaryColor,
logoDominant: t?.logoDominantColor,
logoAverage: t?.logoAverageColor,
coverDominant: t?.coverDominantColor
};
}
}, h = () => {
if (n === "coverImage" || t?.coverImageUrl)
return {
id: `header-theme-${o}`,
coverImage: {
url: t?.coverImageUrl || "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&h=400&fit=crop",
altText: `${r} cover image`,
sensitive: !1,
thumbhash: "k9oGHQRnh493V4dIeHeXh4h3iIeI"
},
wordmark: t?.wordmarkUrl || n === "coverImage" ? {
url: t?.wordmarkUrl || "https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024",
altText: `${r} wordmark`,
sensitive: !1
} : void 0
};
if (t?.wordmarkUrl)
return {
id: `header-theme-${o}`,
wordmark: {
url: t.wordmarkUrl,
altText: `${r} wordmark`,
sensitive: !1
}
};
};
return {
id: o,
name: r,
primaryDomain: {
url: `https://${r.toLowerCase().replace(/\s+/g, "-")}.com`
},
reviewAnalytics: { averageRating: 4.3, reviewCount: 50 },
visualTheme: {
id: `visual-theme-${o}`,
featuredImages: p,
logoImage: {
url: `https://picsum.photos/100/100?random=${o}`,
sensitive: !1
},
brandSettings: s ? {
id: `brand-settings-${o}`,
colors: {
id: `colors-${o}`,
...g()
},
headerTheme: h()
} : void 0
}
};
}, a = (o = !1) => ({
hasNextPage: o,
endCursor: o ? "cursor123" : null
}), d = (o, r, t = []) => ({
id: o,
publicId: `public-${o}`,
name: r,
privacyStatus: "PRIVATE",
products: t
});
function f(o, r) {
window._mockLogs = window._mockLogs || [], window._mockLogs.push({ action: o, params: r });
}
function I(o, r) {
return (t) => (f(String(o), t), Promise.resolve({
ok: !0,
data: r,
mocked: !0
}));
}
function w() {
const o = {
translateContentUp: void 0,
translateContentDown: void 0,
followShop: !0,
unfollowShop: !1,
favorite: void 0,
unfavorite: void 0,
getShopAppInformation: {
appVersion: "1.0.0",
buildNumber: "12345",
buildId: "dev-build-123"
},
productRecommendationImpression: void 0,
productRecommendationClick: void 0,
closeMini: void 0,
getAccountInformation: {
status: "available",
value: "user@example.com"
},
getCurrentUser: {
data: {
displayName: "John Doe",
avatarImage: { url: "https://example.com/avatar.jpg" }
}
},
createOrderAttribution: void 0,
addToCart: void 0,
buyProduct: void 0,
buyProducts: void 0,
showErrorScreen: void 0,
showErrorToast: void 0,
getDeeplinkPaths: {
matchers: ["/products", "/collections", "/cart"]
},
navigateToDeeplink: void 0,
navigateToShop: void 0,
navigateToProduct: void 0,
navigateToOrder: void 0,
navigateToCheckout: void 0,
createImageUploadLink: {
// This action is mocked in the actual hook. See `useImageUpload` for more details.
targets: [
{
url: "https://example.com/upload",
resourceUrl: "https://example.com/resource",
parameters: [{ name: "key", value: "upload-123" }]
}
]
},
completeImageUpload: {
files: [
{
id: "file-123",
fileStatus: "READY",
image: {
url: "https://example.com/image.jpg"
}
}
]
},
getPersistedItem: null,
setPersistedItem: void 0,
removePersistedItem: void 0,
getAllPersistedKeys: ["key1", "key2", "key3"],
clearPersistedItems: void 0,
getInternalPersistedItem: null,
setInternalPersistedItem: void 0,
removeInternalPersistedItem: void 0,
getAllInternalPersistedKeys: ["internal-key1", "internal-key2"],
clearInternalPersistedItems: void 0,
getSecret: "secret-value",
setSecret: void 0,
removeSecret: void 0,
reportInteraction: void 0,
reportImpression: void 0,
reportContentImpression: void 0,
getProductLists: {
data: [
d("list-1", "Wishlist"),
d("list-2", "Favorites")
],
pageInfo: a()
},
getProductList: {
data: d("list-1", "Wishlist", [
e("prod-1", "Sample Product")
]),
pageInfo: a()
},
addProductList: d("list-3", "New List"),
removeProductList: void 0,
renameProductList: d("list-1", "Updated Wishlist"),
setProductListVisibility: d("list-1", "Wishlist"),
addProductListItem: void 0,
removeProductListItem: void 0,
getRecommendedProducts: {
data: [
e("rec-1", "Recommended Product 1", "79.99"),
e("rec-2", "Recommended Product 2", "129.99"),
e("rec-3", "Recommended Product 3", "129.99"),
e("rec-4", "Recommended Product 4", "29.99"),
e("rec-5", "Recommended Product 5", "39.99"),
e("rec-6", "Recommended Product 6", "49.99"),
e("rec-7", "Recommended Product 7", "59.99"),
e("rec-8", "Recommended Product 8", "69.99"),
e("rec-9", "Recommended Product 9", "129.99")
],
pageInfo: a()
},
getRecommendedShops: {
data: [
i("shop-1", "Amazing Store"),
i("shop-2", "Best Deals Shop"),
i("shop-3", "Great Products"),
i("shop-4", "Top Brands"),
i("shop-5", "Exclusive Offers")
],
pageInfo: a()
},
searchProductsByShop: {
data: [
e("search-1", "Search Result 1", "59.99"),
e("search-2", "Search Result 2", "89.99"),
e("search-3", "Search Result 3", "119.99"),
e("search-4", "Search Result 4", "149.99"),
e("search-5", "Search Result 5", "179.99")
],
pageInfo: a()
},
getOrders: {
data: [
{
id: "order-1",
name: "#1001",
lineItems: [
{
productTitle: "Sample Product",
variantTitle: "Medium",
quantity: 2,
product: null
}
],
shop: i("shop-1", "Sample Shop")
}
],
pageInfo: a()
},
getBuyerAttributes: {
data: {
genderAffinity: "NEUTRAL",
categoryAffinities: [
{ id: "cat1", name: "Electronics" },
{ id: "cat2", name: "Clothing" }
]
}
},
showFeedbackSheet: void 0,
getPopularProducts: {
data: [
e("pop-1", "The Hero Snowboard", "702.95"),
e("pop-2", "Snow Jacket", "605.95", "702.00"),
e("pop-3", "Winter Gloves", "89.95"),
e("pop-4", "Summer Gloves", "89.95"),
e("pop-5", "Spring Gloves", "89.95"),
e("pop-6", "Playstation 5", "499.95"),
e("pop-7", "Xbox Series X", "499.95"),
e("pop-8", "Nintendo Switch", "299.95"),
e("pop-9", "Playstation 4", "299.95"),
e("pop-10", "Nintendo 3DS", "89.95")
],
pageInfo: a()
},
share: {
message: "Shared!",
success: !0
},
shareSingle: {
message: "Shared!",
success: !0
},
getSavedProducts: {
data: [
e("saved-1", "Saved Product 1", "49.99"),
e("saved-2", "Saved Product 2", "59.99"),
e("saved-3", "Saved Product 3", "69.99"),
e("saved-4", "Saved Product 4", "79.99"),
e("saved-5", "Saved Product 5", "89.99")
],
pageInfo: a()
},
getRecentProducts: {
data: [
e("recent-1", "Recent Product 1", "59.99"),
e("recent-2", "Recent Product 2", "69.99"),
e("recent-3", "Recent Product 3", "79.99"),
e("recent-4", "Recent Product 4", "89.99"),
e("recent-5", "Recent Product 5", "99.99")
],
pageInfo: a()
},
getProductSearch: {
data: [
e("search-1", "Search Product 1", "39.99"),
e("search-2", "Search Product 2", "19.99"),
e("search-3", "Search Product 3", "29.99"),
e("search-4", "Search Product 4", "49.99"),
e("search-5", "Search Product 5", "9.99")
],
pageInfo: a()
},
getProducts: {
data: [
e("prod-1", "Product 1", "9.99"),
e("prod-2", "Product 2", "19.99"),
e("prod-3", "Product 3", "29.99"),
e("prod-4", "Product 4", "39.99"),
e("prod-5", "Product 5", "49.99")
]
},
getProduct: { data: e("prod-1", "Sample Product") },
getProductVariants: {
data: [
{
id: "variant-1",
title: "Variant 1",
isFavorited: !1,
image: { url: "https://example.com/variant-1.jpg" },
price: { amount: "19.99", currencyCode: "USD" },
compareAtPrice: { amount: "29.99", currencyCode: "USD" }
}
],
pageInfo: a()
},
getProductMedia: {
data: [
{
id: "media-1",
image: { url: "https://example.com/media-1.jpg" },
mediaContentType: "IMAGE",
alt: "Sample product image"
}
],
pageInfo: a()
},
getProductReviews: {
data: [
l("review-1"),
l("review-2", { rating: 4, title: "Pretty good" }),
l("review-3", {
rating: 3,
title: "Okay",
merchantReply: "Thanks for the feedback!",
merchantRepliedAt: (/* @__PURE__ */ new Date()).toISOString()
})
],
pageInfo: a()
},
getShop: {
data: i("shop-1", "Sample Shop", { featuredImagesLimit: 4 })
},
getRecentShops: {
data: [
i("recent-shop-1", "Recent Shop 1"),
i("recent-shop-2", "Recent Shop 2"),
i("recent-shop-3", "Recent Shop 3")
],
pageInfo: a()
},
getFollowedShops: {
data: [
i("followed-shop-1", "Followed Shop 1"),
i("followed-shop-2", "Followed Shop 2"),
i("followed-shop-3", "Followed Shop 3")
],
pageInfo: a()
},
previewProductInAR: void 0,
createContent: {
data: {
publicId: "content-123",
externalId: null,
image: {
id: "img-123",
url: "https://cdn.shopify.com/s/files/1/0633/6574/2742/files/Namnlosdesign-47.png?v=1740438079",
width: 800,
height: 600
},
title: "Mock Content",
description: "This is a mock content item",
visibility: ["DISCOVERABLE"],
shareableUrl: "https://example.com/content/123",
products: null
}
},
getContent: {
data: [
{
publicId: "content-123",
image: {
id: "img-123",
url: "https://cdn.shopify.com/s/files/1/0633/6574/2742/files/Namnlosdesign-47.png?v=1740438079",
width: 800,
height: 600
},
title: "Mock Content",
visibility: ["DISCOVERABLE"],
status: S.READY
}
]
},
generateUserToken: {
data: {
token: "user-token-123",
expiresAt: "2025-01-01",
userState: v.VERIFIED
}
},
navigateToCart: void 0,
requestPermission: {
granted: !0
},
reportError: void 0,
reportFetch: void 0
}, r = {};
for (const t in o)
Object.prototype.hasOwnProperty.call(o, t) && (r[t] = I(
t,
o[t]
));
return r;
}
const y = () => {
const o = navigator.userAgent.toLowerCase(), r = /iphone|ipad|ipod/.test(o), t = /android/.test(o);
return r || t;
}, A = ({ force: o } = {}) => {
y() && !o || window.minisSDK || (window.minisSDK = w(), window.minisParams = {
handle: "mock-handle",
initialUrl: "/",
platform: "web"
});
};
export {
e as createProduct,
l as createProductReview,
i as createShop,
A as injectMocks,
w as makeMockActions
};
//# sourceMappingURL=mocks.js.map