@datlv-trustshop/shopify-inapp-components 0.2.15 → 0.2.17
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.
|
@@ -87,7 +87,7 @@ export const ArticleList = ({ limit, className = "", onArticleClick, layout = "s
|
|
|
87
87
|
transform: `translateX(-${slidePercentage}%)`,
|
|
88
88
|
}, children: displayArticles.map((article) => (_jsx("div", { style: {
|
|
89
89
|
flex: "0 0 auto",
|
|
90
|
-
width: isMobile ? "
|
|
90
|
+
width: isMobile ? "85%" : "270px",
|
|
91
91
|
}, children: _jsxs("div", { style: {
|
|
92
92
|
display: "flex",
|
|
93
93
|
flexDirection: "column",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../src/components/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Button, Box } from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { ArticleItem } from \"../types\";\nimport { useDashboard } from \"../hooks/useDashboard\";\n\nexport interface ArticleListProps {\n limit?: number;\n className?: string;\n onArticleClick?: (article: ArticleItem) => void;\n layout?: \"slide\" | \"list\" | \"grid\";\n showThumbnail?: boolean;\n showAuthor?: boolean;\n showDate?: boolean;\n currentIndex?: number;\n showNavigation?: boolean;\n autoPlay?: boolean;\n autoPlayInterval?: number;\n onSlideChange?: (index: number) => void;\n renderButton?: (\n article: ArticleItem,\n handlers: {\n onClick: () => void;\n },\n ) => React.ReactNode;\n}\n\nexport const ArticleList: React.FC<ArticleListProps> = ({\n limit,\n className = \"\",\n onArticleClick,\n layout = \"slide\",\n showThumbnail = true,\n currentIndex: externalCurrentIndex,\n showNavigation = true,\n autoPlay = false,\n autoPlayInterval = 5000,\n onSlideChange,\n renderButton,\n}) => {\n const { data } = useDashboard();\n const articles = data?.articles || [];\n const displayArticles = limit ? articles.slice(0, limit) : articles;\n const [isMobile, setIsMobile] = useState(false);\n const [internalCurrentIndex, setInternalCurrentIndex] = useState(0);\n\n const currentIndex =\n externalCurrentIndex !== undefined\n ? externalCurrentIndex\n : internalCurrentIndex;\n\n useEffect(() => {\n const checkMobile = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n useEffect(() => {\n if (!autoPlay || layout !== \"slide\" || displayArticles.length <= 1) return;\n\n const interval = setInterval(() => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n }, autoPlayInterval);\n\n return () => clearInterval(interval);\n }, [\n autoPlay,\n layout,\n displayArticles.length,\n currentIndex,\n autoPlayInterval,\n externalCurrentIndex,\n onSlideChange,\n ]);\n\n const handleSlideChange = (newIndex: number) => {\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n };\n\n const handlePrevious = () => {\n const newIndex =\n currentIndex === 0 ? displayArticles.length - 1 : currentIndex - 1;\n handleSlideChange(newIndex);\n };\n\n const handleNext = () => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n handleSlideChange(newIndex);\n };\n\n const handleArticleClick = (article: ArticleItem) => {\n if (article.link) {\n window.open(article.link, \"_blank\");\n }\n onArticleClick?.(article);\n };\n\n if (displayArticles.length === 0) {\n return (\n <div className={className} style={{ width: \"100%\" }}>\n <p style={{ textAlign: \"center\", color: \"#999\" }}>\n No articles available\n </p>\n </div>\n );\n }\n\n if (layout === \"slide\") {\n let slidePercentage: number;\n if (isMobile) {\n slidePercentage = currentIndex * 90;\n } else {\n const itemWidth = 100 / displayArticles.length;\n slidePercentage = currentIndex * itemWidth * 1.5;\n }\n\n return (\n <div\n className={className}\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n width: \"100%\",\n }}\n >\n <div\n style={{\n overflow: \"hidden\",\n position: \"relative\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n transition: \"transform 0.5s ease-in-out\",\n gap: \"20px\",\n willChange: \"transform\",\n transform: `translateX(-${slidePercentage}%)`,\n }}\n >\n {displayArticles.map((article) => (\n <div\n key={article.id}\n style={{\n flex: \"0 0 auto\",\n width: isMobile ? \"90%\" : \"270px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n >\n {showThumbnail && article.imageUrl && (\n <div\n style={{\n width: isMobile ? \"100%\" : \"270px\",\n height: \"152px\",\n overflow: \"hidden\",\n borderRadius: \"8px\",\n }}\n >\n <img\n src={\n article.imageUrl ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={article.title}\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n }}\n />\n </div>\n )}\n {article.category && (\n <div\n style={{\n color: \"var(--p-color-text-emphasis, #616161)\",\n }}\n >\n <span style={{ fontSize: \"13px\" }}>\n {article.category}\n </span>\n </div>\n )}\n </div>\n\n <div\n className=\"title-button\"\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"6px\",\n }}\n >\n <h3\n style={{\n margin: 0,\n fontSize: \"14px\",\n fontWeight: \"bold\",\n color: \"#303030\",\n lineHeight: \"1.4\",\n }}\n >\n {article.title}\n </h3>\n\n {renderButton ? (\n renderButton(article, {\n onClick: () => handleArticleClick(article),\n })\n ) : (\n <Box>\n <Button\n icon={ExternalIcon}\n onClick={() => handleArticleClick(article)}\n variant=\"plain\"\n >\n {article.buttonText || (article.link ? \"Read article\" : \"Learn more\")}\n </Button>\n </Box>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <>\n <button\n onClick={handlePrevious}\n aria-label=\"Previous slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n left: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M10.5 13L5.5 8l5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n <button\n onClick={handleNext}\n aria-label=\"Next slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n right: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M5.5 13l5-5-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n </>\n )}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n gap: \"8px\",\n marginTop: \"16px\",\n }}\n >\n {displayArticles.map((_, index) => (\n <button\n key={index}\n onClick={() => handleSlideChange(index)}\n aria-label={`Go to slide ${index + 1}`}\n style={{\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n backgroundColor:\n index === currentIndex ? \"#303030\" : \"#e3e3e3\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s\",\n border: \"none\",\n padding: 0,\n }}\n />\n ))}\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../src/components/ArticleList.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAuBrD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,KAAK,EACL,SAAS,GAAG,EAAE,EACd,cAAc,EACd,MAAM,GAAG,OAAO,EAChB,aAAa,GAAG,IAAI,EACpB,YAAY,EAAE,oBAAoB,EAClC,cAAc,GAAG,IAAI,EACrB,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,IAAI,EACvB,aAAa,EACb,YAAY,GACb,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,CAAC;IAChC,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,EAAE,CAAC;IACtC,MAAM,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IACpE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpE,MAAM,YAAY,GAChB,oBAAoB,KAAK,SAAS;QAChC,CAAC,CAAC,oBAAoB;QACtB,CAAC,CAAC,oBAAoB,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,WAAW,CAAC,MAAM,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC;QACxC,CAAC,CAAC;QAEF,WAAW,EAAE,CAAC;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACjE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,MAAM,KAAK,OAAO,IAAI,eAAe,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO;QAE3E,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,MAAM,QAAQ,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC;YAC7D,IAAI,oBAAoB,KAAK,SAAS,EAAE,CAAC;gBACvC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;YACpC,CAAC;YACD,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC;QAC5B,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAErB,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE;QACD,QAAQ;QACR,MAAM;QACN,eAAe,CAAC,MAAM;QACtB,YAAY;QACZ,gBAAgB;QAChB,oBAAoB;QACpB,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,IAAI,oBAAoB,KAAK,SAAS,EAAE,CAAC;YACvC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;QACD,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,QAAQ,GACZ,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;QACrE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,QAAQ,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC;QAC7D,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,OAAoB,EAAE,EAAE;QAClD,IAAI,OAAO,CAAC,IAAI,EAAE,CAAC;YACjB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACtC,CAAC;QACD,cAAc,EAAE,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YACjD,YAAG,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,sCAE5C,GACA,CACP,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;QACvB,IAAI,eAAuB,CAAC;QAC5B,IAAI,QAAQ,EAAE,CAAC;YACb,eAAe,GAAG,YAAY,GAAG,EAAE,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,MAAM,SAAS,GAAG,GAAG,GAAG,eAAe,CAAC,MAAM,CAAC;YAC/C,eAAe,GAAG,YAAY,GAAG,SAAS,GAAG,GAAG,CAAC;QACnD,CAAC;QAED,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,MAAM;aACd,aAED,eACE,KAAK,EAAE;wBACL,QAAQ,EAAE,QAAQ;wBAClB,QAAQ,EAAE,UAAU;qBACrB,aAED,cACE,KAAK,EAAE;gCACL,OAAO,EAAE,MAAM;gCACf,UAAU,EAAE,4BAA4B;gCACxC,GAAG,EAAE,MAAM;gCACX,UAAU,EAAE,WAAW;gCACvB,SAAS,EAAE,eAAe,eAAe,IAAI;6BAC9C,YAEA,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAChC,cAEE,KAAK,EAAE;oCACL,IAAI,EAAE,UAAU;oCAChB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;iCAClC,YAED,eACE,KAAK,EAAE;wCACL,OAAO,EAAE,MAAM;wCACf,aAAa,EAAE,QAAQ;wCACvB,GAAG,EAAE,KAAK;qCACX,aAED,eACE,KAAK,EAAE;gDACL,OAAO,EAAE,MAAM;gDACf,aAAa,EAAE,QAAQ;gDACvB,GAAG,EAAE,MAAM;6CACZ,aAEA,aAAa,IAAI,OAAO,CAAC,QAAQ,IAAI,CACpC,cACE,KAAK,EAAE;wDACL,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wDAClC,MAAM,EAAE,OAAO;wDACf,QAAQ,EAAE,QAAQ;wDAClB,YAAY,EAAE,KAAK;qDACpB,YAED,cACE,GAAG,EACD,OAAO,CAAC,QAAQ;4DAChB,8DAA8D,EAEhE,GAAG,EAAE,OAAO,CAAC,KAAK,EAClB,KAAK,EAAE;4DACL,KAAK,EAAE,MAAM;4DACb,MAAM,EAAE,MAAM;4DACd,SAAS,EAAE,OAAO;yDACnB,GACD,GACE,CACP,EACA,OAAO,CAAC,QAAQ,IAAI,CACnB,cACE,KAAK,EAAE;wDACL,KAAK,EAAE,uCAAuC;qDAC/C,YAED,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC9B,OAAO,CAAC,QAAQ,GACZ,GACH,CACP,IACG,EAEN,eACE,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE;gDACL,OAAO,EAAE,MAAM;gDACf,aAAa,EAAE,QAAQ;gDACvB,GAAG,EAAE,KAAK;6CACX,aAED,aACE,KAAK,EAAE;wDACL,MAAM,EAAE,CAAC;wDACT,QAAQ,EAAE,MAAM;wDAChB,UAAU,EAAE,MAAM;wDAClB,KAAK,EAAE,SAAS;wDAChB,UAAU,EAAE,KAAK;qDAClB,YAEA,OAAO,CAAC,KAAK,GACX,EAEJ,YAAY,CAAC,CAAC,CAAC,CACd,YAAY,CAAC,OAAO,EAAE;oDACpB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC;iDAC3C,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,GAAG,cACF,KAAC,MAAM,IACL,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAC1C,OAAO,EAAC,OAAO,YAEd,OAAO,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,GAC9D,GACL,CACP,IACG,IACF,IA5FD,OAAO,CAAC,EAAE,CA6FX,CACP,CAAC,GACE,EAEL,cAAc,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/C,8BACE,iBACE,OAAO,EAAE,cAAc,gBACZ,gBAAgB,EAC3B,KAAK,EAAE;wCACL,QAAQ,EAAE,UAAU;wCACpB,GAAG,EAAE,KAAK;wCACV,SAAS,EAAE,kBAAkB;wCAC7B,IAAI,EAAE,MAAM;wCACZ,UAAU,EAAE,0BAA0B;wCACtC,MAAM,EAAE,mBAAmB;wCAC3B,YAAY,EAAE,KAAK;wCACnB,KAAK,EAAE,MAAM;wCACb,MAAM,EAAE,MAAM;wCACd,OAAO,EAAE,MAAM;wCACf,UAAU,EAAE,QAAQ;wCACpB,cAAc,EAAE,QAAQ;wCACxB,MAAM,EAAE,SAAS;wCACjB,MAAM,EAAE,EAAE;wCACV,UAAU,EAAE,uBAAuB;wCACnC,OAAO,EAAE,CAAC;qCACX,YAED,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,YAC5D,eACE,CAAC,EAAC,oBAAoB,EACtB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,MAAM,GACX,GACE,GACC,EACT,iBACE,OAAO,EAAE,UAAU,gBACR,YAAY,EACvB,KAAK,EAAE;wCACL,QAAQ,EAAE,UAAU;wCACpB,GAAG,EAAE,KAAK;wCACV,SAAS,EAAE,kBAAkB;wCAC7B,KAAK,EAAE,MAAM;wCACb,UAAU,EAAE,0BAA0B;wCACtC,MAAM,EAAE,mBAAmB;wCAC3B,YAAY,EAAE,KAAK;wCACnB,KAAK,EAAE,MAAM;wCACb,MAAM,EAAE,MAAM;wCACd,OAAO,EAAE,MAAM;wCACf,UAAU,EAAE,QAAQ;wCACpB,cAAc,EAAE,QAAQ;wCACxB,MAAM,EAAE,SAAS;wCACjB,MAAM,EAAE,EAAE;wCACV,UAAU,EAAE,uBAAuB;wCACnC,OAAO,EAAE,CAAC;qCACX,YAED,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,YAC5D,eACE,CAAC,EAAC,iBAAiB,EACnB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAC,MAAM,GACX,GACE,GACC,IACR,CACJ,IACG,EAEL,cAAc,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/C,cACE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,cAAc,EAAE,QAAQ;wBACxB,GAAG,EAAE,KAAK;wBACV,SAAS,EAAE,MAAM;qBAClB,YAEA,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAC3B,eAAe,KAAK,GAAG,CAAC,EAAE,EACtC,KAAK,EAAE;4BACL,KAAK,EAAE,KAAK;4BACZ,MAAM,EAAE,KAAK;4BACb,YAAY,EAAE,KAAK;4BACnB,eAAe,EACb,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;4BAChD,MAAM,EAAE,SAAS;4BACjB,UAAU,EAAE,uBAAuB;4BACnC,MAAM,EAAE,MAAM;4BACd,OAAO,EAAE,CAAC;yBACX,IAbI,KAAK,CAcV,CACH,CAAC,GACE,CACP,IACG,CACP,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Button, Box } from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { ArticleItem } from \"../types\";\nimport { useDashboard } from \"../hooks/useDashboard\";\n\nexport interface ArticleListProps {\n limit?: number;\n className?: string;\n onArticleClick?: (article: ArticleItem) => void;\n layout?: \"slide\" | \"list\" | \"grid\";\n showThumbnail?: boolean;\n showAuthor?: boolean;\n showDate?: boolean;\n currentIndex?: number;\n showNavigation?: boolean;\n autoPlay?: boolean;\n autoPlayInterval?: number;\n onSlideChange?: (index: number) => void;\n renderButton?: (\n article: ArticleItem,\n handlers: {\n onClick: () => void;\n },\n ) => React.ReactNode;\n}\n\nexport const ArticleList: React.FC<ArticleListProps> = ({\n limit,\n className = \"\",\n onArticleClick,\n layout = \"slide\",\n showThumbnail = true,\n currentIndex: externalCurrentIndex,\n showNavigation = true,\n autoPlay = false,\n autoPlayInterval = 5000,\n onSlideChange,\n renderButton,\n}) => {\n const { data } = useDashboard();\n const articles = data?.articles || [];\n const displayArticles = limit ? articles.slice(0, limit) : articles;\n const [isMobile, setIsMobile] = useState(false);\n const [internalCurrentIndex, setInternalCurrentIndex] = useState(0);\n\n const currentIndex =\n externalCurrentIndex !== undefined\n ? externalCurrentIndex\n : internalCurrentIndex;\n\n useEffect(() => {\n const checkMobile = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n useEffect(() => {\n if (!autoPlay || layout !== \"slide\" || displayArticles.length <= 1) return;\n\n const interval = setInterval(() => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n }, autoPlayInterval);\n\n return () => clearInterval(interval);\n }, [\n autoPlay,\n layout,\n displayArticles.length,\n currentIndex,\n autoPlayInterval,\n externalCurrentIndex,\n onSlideChange,\n ]);\n\n const handleSlideChange = (newIndex: number) => {\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n };\n\n const handlePrevious = () => {\n const newIndex =\n currentIndex === 0 ? displayArticles.length - 1 : currentIndex - 1;\n handleSlideChange(newIndex);\n };\n\n const handleNext = () => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n handleSlideChange(newIndex);\n };\n\n const handleArticleClick = (article: ArticleItem) => {\n if (article.link) {\n window.open(article.link, \"_blank\");\n }\n onArticleClick?.(article);\n };\n\n if (displayArticles.length === 0) {\n return (\n <div className={className} style={{ width: \"100%\" }}>\n <p style={{ textAlign: \"center\", color: \"#999\" }}>\n No articles available\n </p>\n </div>\n );\n }\n\n if (layout === \"slide\") {\n let slidePercentage: number;\n if (isMobile) {\n slidePercentage = currentIndex * 90;\n } else {\n const itemWidth = 100 / displayArticles.length;\n slidePercentage = currentIndex * itemWidth * 1.5;\n }\n\n return (\n <div\n className={className}\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n width: \"100%\",\n }}\n >\n <div\n style={{\n overflow: \"hidden\",\n position: \"relative\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n transition: \"transform 0.5s ease-in-out\",\n gap: \"20px\",\n willChange: \"transform\",\n transform: `translateX(-${slidePercentage}%)`,\n }}\n >\n {displayArticles.map((article) => (\n <div\n key={article.id}\n style={{\n flex: \"0 0 auto\",\n width: isMobile ? \"85%\" : \"270px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n >\n {showThumbnail && article.imageUrl && (\n <div\n style={{\n width: isMobile ? \"100%\" : \"270px\",\n height: \"152px\",\n overflow: \"hidden\",\n borderRadius: \"8px\",\n }}\n >\n <img\n src={\n article.imageUrl ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={article.title}\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n }}\n />\n </div>\n )}\n {article.category && (\n <div\n style={{\n color: \"var(--p-color-text-emphasis, #616161)\",\n }}\n >\n <span style={{ fontSize: \"13px\" }}>\n {article.category}\n </span>\n </div>\n )}\n </div>\n\n <div\n className=\"title-button\"\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"6px\",\n }}\n >\n <h3\n style={{\n margin: 0,\n fontSize: \"14px\",\n fontWeight: \"bold\",\n color: \"#303030\",\n lineHeight: \"1.4\",\n }}\n >\n {article.title}\n </h3>\n\n {renderButton ? (\n renderButton(article, {\n onClick: () => handleArticleClick(article),\n })\n ) : (\n <Box>\n <Button\n icon={ExternalIcon}\n onClick={() => handleArticleClick(article)}\n variant=\"plain\"\n >\n {article.buttonText || (article.link ? \"Read article\" : \"Learn more\")}\n </Button>\n </Box>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <>\n <button\n onClick={handlePrevious}\n aria-label=\"Previous slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n left: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M10.5 13L5.5 8l5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n <button\n onClick={handleNext}\n aria-label=\"Next slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n right: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M5.5 13l5-5-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n </>\n )}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n gap: \"8px\",\n marginTop: \"16px\",\n }}\n >\n {displayArticles.map((_, index) => (\n <button\n key={index}\n onClick={() => handleSlideChange(index)}\n aria-label={`Go to slide ${index + 1}`}\n style={{\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n backgroundColor:\n index === currentIndex ? \"#303030\" : \"#e3e3e3\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s\",\n border: \"none\",\n padding: 0,\n }}\n />\n ))}\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.d.ts","sourceRoot":"","sources":["../../src/components/WhatsNew.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAiBpE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG1D,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKhE,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE3D,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"WhatsNew.d.ts","sourceRoot":"","sources":["../../src/components/WhatsNew.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAiBpE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG1D,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKhE,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE3D,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+jB5C,CAAC"}
|
|
@@ -207,7 +207,7 @@ shopInfo, locale, translations, config, }) => {
|
|
|
207
207
|
minHeight: "280px",
|
|
208
208
|
},
|
|
209
209
|
slideImage: {
|
|
210
|
-
|
|
210
|
+
// marginBottom: "16px",
|
|
211
211
|
},
|
|
212
212
|
hideScrollbar: {
|
|
213
213
|
"&::-webkit-scrollbar": {
|
|
@@ -260,7 +260,9 @@ shopInfo, locale, translations, config, }) => {
|
|
|
260
260
|
: `translateX(calc(-${productUpdateIndex * 90}% + ${touchDelta}px))`,
|
|
261
261
|
transition: isSwiping ? "none" : "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
262
262
|
willChange: "transform", // GPU acceleration
|
|
263
|
-
}), children: limitedUpdates.map((update) => (_jsxs("div", { style: mergeStyles(sdkStyles.slideBox, isMobile ? mobileStyles.slideBox : {}), children: [_jsxs("div", { style: sdkStyles.slideContent, children: [
|
|
263
|
+
}), children: limitedUpdates.map((update) => (_jsxs("div", { style: mergeStyles(sdkStyles.slideBox, isMobile ? mobileStyles.slideBox : {}), children: [_jsxs("div", { style: sdkStyles.slideContent, children: [isMobile && (_jsx("div", { style: mergeStyles(sdkStyles.slideImage, mobileStyles.slideImage), children: _jsx(ImageLoading, { src: update.imageUrl ||
|
|
264
|
+
update.image_url ||
|
|
265
|
+
"https://asset.trustshop.io/dashboard/news-review-summary.png", alt: `what-new-${update.id}`, width: 712, height: 400, borderRadius: 12 }) })), _jsx(Text, { variant: "headingMd", as: "h3", children: update.title }), (update.releaseDate || update.date_time) && (_jsx(Text, { variant: "bodySm", tone: "subdued", as: "p", children: update.releaseDate || update.date_time })), (update.description || update.content?.text) && (_jsx(Text, { as: "p", children: update.description || update.content?.text })), update.features && update.features.length > 0 && (_jsx("ul", { style: { paddingLeft: "20px", margin: 0 }, children: update.features.map((item, idx) => (_jsx("li", { style: {
|
|
264
266
|
fontSize: "13px",
|
|
265
267
|
lineHeight: 1.4,
|
|
266
268
|
marginBottom: "4px",
|
|
@@ -271,9 +273,9 @@ shopInfo, locale, translations, config, }) => {
|
|
|
271
273
|
if (learnUrl && learnUrl !== "modal") {
|
|
272
274
|
window.open(learnUrl, "_blank");
|
|
273
275
|
}
|
|
274
|
-
}, children: update.button_learn_more || "Learn more" }))] })] }), _jsx("div", { style:
|
|
276
|
+
}, children: update.button_learn_more || "Learn more" }))] })] }), !isMobile && (_jsx("div", { style: sdkStyles.slideImage, children: _jsx(ImageLoading, { src: update.imageUrl ||
|
|
275
277
|
update.image_url ||
|
|
276
|
-
"https://asset.trustshop.io/dashboard/news-review-summary.png", alt: `what-new-${update.id}`, width: 712, height: 400, borderRadius: 12 }) })] }, update.id))) }) })) : (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, {
|
|
278
|
+
"https://asset.trustshop.io/dashboard/news-review-summary.png", alt: `what-new-${update.id}`, width: 712, height: 400, borderRadius: 12 }) }))] }, update.id))) }) })) : (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, {
|
|
277
279
|
scrollbarWidth: "none",
|
|
278
280
|
}, mobileStyles.slidesContainer), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx(ArticleList, { layout: "slide", onArticleClick: handleArticleClick, showThumbnail: true, showAuthor: true, showDate: true, currentIndex: articleIndex, onSlideChange: setArticleIndex, showNavigation: false }) })) })] }) })] }));
|
|
279
281
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.js","sourceRoot":"","sources":["../../src/components/WhatsNew.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport {\n Button,\n Tabs,\n Text,\n BlockStack,\n InlineStack,\n Box,\n Card,\n SkeletonBodyText,\n SkeletonThumbnail,\n} from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { ArticleList } from \"./ArticleList\";\nimport ImageLoading from \"./ImageLoading\";\nimport { useArticles, useWhatsNew } from \"../hooks\";\nimport { useTranslation } from \"../hooks/useTranslations\";\nimport { ArticleItem, ProductUpdateItem } from \"../types\";\nimport { sdkStyles, mergeStyles } from \"./styles\";\nimport { COMPONENT_DEFAULTS } from \"../config/component-defaults\";\nimport { useSDK, type UseSDKOptions } from \"../core/SDKManager\";\n\n// Fixed dimensions to prevent CLS - reduced to avoid excessive white space\nconst CONTAINER_MIN_HEIGHT = 300; // Reduced from 450\n\nexport interface WhatsNewProps extends UseSDKOptions {\n /** Optional CSS class */\n className?: string;\n \n /** Navigation function for internal routing */\n navigate?: (path: string) => void;\n \n /** Handle product update clicks */\n onProductUpdateClick?: (update: ProductUpdateItem) => void;\n \n /** Handle article clicks */\n onArticleClick?: (article: ArticleItem) => void;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n className = \"\",\n navigate,\n onProductUpdateClick,\n onArticleClick,\n // SDK options (optional)\n shopInfo,\n locale,\n translations,\n config,\n}) => {\n // Connect to SDK Manager (auto-initializes)\n // @ts-ignore - Will be used in future refactoring\n const _sdk = useSDK({ shopInfo, locale, translations, config });\n \n // Use internal defaults\n const { \n maxUpdates,\n showNavigation,\n showViewAllButton,\n } = COMPONENT_DEFAULTS.whatsNew;\n const [productUpdateIndex, setProductUpdateIndex] = useState(0);\n const [articleIndex, setArticleIndex] = useState(0);\n const [selectedTab, setSelectedTab] = useState(0);\n const [isMobile, setIsMobile] = useState(false);\n const [isContentReady, setIsContentReady] = useState(false);\n const [touchDelta, setTouchDelta] = useState(0);\n const [isSwiping, setIsSwiping] = useState(false);\n\n const touchStartX = useRef<number | null>(null);\n const touchEndX = useRef<number | null>(null);\n const swiping = useRef(false);\n const slideContainerRef = useRef<HTMLDivElement>(null);\n\n const articles = useArticles();\n const whatsNew = useWhatsNew();\n const t = useTranslation('whatsNew');\n\n const limitedUpdates = useMemo(() => \n whatsNew.updates.slice(0, maxUpdates), \n [whatsNew.updates, maxUpdates]\n );\n\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n // Mark content as ready when data loads\n useEffect(() => {\n if (limitedUpdates.length > 0 || articlesList.length > 0) {\n requestAnimationFrame(() => {\n setIsContentReady(true);\n });\n }\n }, [limitedUpdates.length, articles.articles.length]);\n \n const articlesList = articles.articles;\n\n const nextSlide = () => {\n if (selectedTab === 0) {\n setProductUpdateIndex((prevIndex) => {\n const newIndex = Math.min(prevIndex + 1, limitedUpdates.length - 1);\n return newIndex;\n });\n } else {\n setArticleIndex((prevIndex) => {\n if (isMobile) {\n const newIndex = Math.min(prevIndex + 1, articlesList.length - 1);\n return newIndex;\n } else {\n const visibleItems = 3;\n const maxIndex = Math.max(0, articlesList.length - visibleItems);\n const newIndex = Math.min(prevIndex + 1, maxIndex);\n return newIndex;\n }\n });\n }\n };\n\n const prevSlide = () => {\n if (selectedTab === 0) {\n setProductUpdateIndex((prevIndex) => {\n const newIndex = Math.max(prevIndex - 1, 0);\n return newIndex;\n });\n } else {\n setArticleIndex((prevIndex) => {\n const newIndex = Math.max(prevIndex - 1, 0);\n return newIndex;\n });\n }\n };\n\n const handleTouchStart = (e: React.TouchEvent) => {\n touchStartX.current = e.touches[0].clientX;\n swiping.current = true;\n setIsSwiping(true);\n setTouchDelta(0);\n };\n\n const handleTouchMove = (e: React.TouchEvent) => {\n if (!swiping.current || touchStartX.current === null) return;\n touchEndX.current = e.touches[0].clientX;\n const delta = touchEndX.current - touchStartX.current;\n setTouchDelta(delta);\n };\n\n const handleTouchEnd = () => {\n if (!swiping.current) return;\n\n const swipeThreshold = 50;\n const diff = (touchStartX.current || 0) - (touchEndX.current || 0);\n\n if (Math.abs(diff) > swipeThreshold) {\n if (diff > 0) {\n nextSlide();\n } else {\n prevSlide();\n }\n }\n\n swiping.current = false;\n touchStartX.current = null;\n touchEndX.current = null;\n setIsSwiping(false);\n setTouchDelta(0);\n };\n\n const handleProductUpdateClick = (update: ProductUpdateItem) => {\n const tryUrl = update.button_try_url || update.link;\n\n if (update.id === \"feature_up_vote\") {\n window.dispatchEvent(\n new CustomEvent(\"openFeatureBoard\", {\n detail: { source: \"whatsnew\" },\n }),\n );\n onProductUpdateClick?.(update);\n return;\n }\n\n if (tryUrl && tryUrl !== \"modal\") {\n if (tryUrl.startsWith(\"/\")) {\n if (navigate) {\n navigate(tryUrl);\n }\n onProductUpdateClick?.(update);\n return;\n } else if (\n tryUrl.startsWith(\"http://\") ||\n tryUrl.startsWith(\"https://\")\n ) {\n window.open(tryUrl, \"_blank\");\n onProductUpdateClick?.(update);\n }\n } else if (tryUrl === \"modal\") {\n onProductUpdateClick?.(update);\n } else {\n onProductUpdateClick?.(update);\n }\n };\n\n const handleArticleClick = (article: ArticleItem) => {\n if (article.link) {\n window.open(article.link, \"_blank\");\n }\n onArticleClick?.(article);\n };\n\n const handleViewAllUpdates = () => {\n // Use SDK default behavior\n window.open(\"https://trust1.io/updates/\", \"_blank\");\n };\n\n const handleViewAllArticles = () => {\n // Use SDK default behavior\n window.open(\"https://trust1.io/blog/\", \"_blank\");\n };\n\n const tabs = [\n { id: \"product-update\", content: t.tabs?.productUpdate || \"Product Updates\" },\n { id: \"article\", content: t.tabs?.article || \"Articles\" },\n ];\n\n const isPrevDisabled =\n selectedTab === 0 ? productUpdateIndex === 0 : articleIndex === 0;\n const isNextDisabled =\n selectedTab === 0\n ? productUpdateIndex === limitedUpdates.length - 1\n : (() => {\n if (isMobile) {\n return articleIndex === articlesList.length - 1;\n } else {\n const visibleItems = 3;\n const maxIndex = Math.max(0, articlesList.length - visibleItems);\n return articleIndex >= maxIndex;\n }\n })();\n\n // Show skeleton while loading\n if (!isContentReady) {\n return (\n <div style={{ ...sdkStyles.dashboardWhatsNew, minHeight: `${CONTAINER_MIN_HEIGHT}px` }} className={className}>\n <Card>\n <BlockStack gap=\"400\">\n <BlockStack gap=\"100\">\n <SkeletonBodyText lines={1} />\n <InlineStack gap=\"300\" blockAlign=\"center\" align=\"space-between\">\n <div style={{ width: \"200px\" }}>\n <SkeletonBodyText lines={1} />\n </div>\n </InlineStack>\n </BlockStack>\n <Box>\n <BlockStack gap=\"400\">\n <SkeletonThumbnail size=\"large\" />\n <SkeletonBodyText lines={3} />\n </BlockStack>\n </Box>\n </BlockStack>\n </Card>\n </div>\n );\n }\n\n // Empty state\n if (limitedUpdates.length === 0 && articlesList.length === 0) {\n return (\n <div style={{ ...sdkStyles.dashboardWhatsNew, minHeight: `${CONTAINER_MIN_HEIGHT}px` }} className={className}>\n <Card>\n <BlockStack gap=\"400\">\n <Text variant=\"bodyMd\" tone=\"subdued\" as=\"p\">\n {t.noData || \"No updates available\"}\n </Text>\n </BlockStack>\n </Card>\n </div>\n );\n }\n\n const mobileStyles = isMobile\n ? {\n slidesContainer: {\n overflow: \"auto\",\n scrollSnapType: \"x mandatory\",\n WebkitOverflowScrolling: \"touch\" as any,\n scrollbarWidth: \"none\" as const,\n msOverflowStyle: \"none\" as const,\n },\n slidesWrapper: {\n scrollSnapAlign: \"start\" as const,\n },\n slideBox: {\n scrollSnapAlign: \"center\" as const,\n flex: \"0 0 85%\",\n maxWidth: \"85%\",\n minHeight: \"280px\",\n },\n slideImage: {\n display: \"none\",\n },\n hideScrollbar: {\n \"&::-webkit-scrollbar\": {\n display: \"none\",\n },\n },\n }\n : {};\n\n return (\n <div style={mergeStyles(sdkStyles.dashboardWhatsNew)} className={className}>\n <style>{`\n .whats-new-mobile-scrollbar::-webkit-scrollbar {\n display: none;\n }\n `}</style>\n <Card>\n <BlockStack gap=\"400\">\n <BlockStack gap=\"100\">\n <div\n style={{\n fontSize: \"16px\",\n fontWeight: \"650\",\n lineHeight: \"24px\",\n color: \"#303030\",\n marginBottom: \"8px\",\n margin: 0,\n }}\n >\n {t.title || \"What's New\"}\n </div>\n\n <InlineStack gap=\"300\" blockAlign=\"center\" align=\"space-between\">\n <div\n className=\"custom-tabs--wrapper-dashboard\"\n style={{\n margin: \"0\",\n padding: \"0\",\n }}\n >\n <style>{`\n .custom-tabs--wrapper-dashboard .Polaris-Box {\n --pc-box-padding-inline-start-md: 0 !important;\n --pc-box-padding-inline-end-md: 0 !important;\n }\n .custom-tabs--wrapper-dashboard .Polaris-Tabs {\n padding: 0 !important;\n }\n .custom-tabs--wrapper-dashboard .Polaris-Tabs__Wrapper {\n padding: 0 !important;\n overflow-y: hidden;\n }\n `}</style>\n <Tabs\n tabs={tabs}\n selected={selectedTab}\n onSelect={setSelectedTab}\n />\n </div>\n\n <InlineStack gap=\"200\">\n {showViewAllButton && (\n <Button\n icon={ExternalIcon}\n onClick={\n selectedTab === 0\n ? handleViewAllUpdates\n : handleViewAllArticles\n }\n >\n {selectedTab === 0\n ? (t.buttonViewAll?.productUpdate || \"View all updates\")\n : (t.buttonViewAll?.article || \"View all articles\")}\n </Button>\n )}\n\n {showNavigation && (\n <div style={sdkStyles.slideNavigation}>\n <button\n onClick={prevSlide}\n disabled={isPrevDisabled}\n style={mergeStyles(\n sdkStyles.slideButton,\n isPrevDisabled ? sdkStyles.slideButtonDisabled : {},\n {\n cursor: isPrevDisabled ? \"not-allowed\" : \"pointer\",\n opacity: isPrevDisabled ? 0.5 : 1,\n },\n )}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n >\n <path\n d=\"M10.5 13L5.5 8l5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n <button\n onClick={nextSlide}\n disabled={isNextDisabled}\n style={mergeStyles(\n sdkStyles.slideButton,\n isNextDisabled ? sdkStyles.slideButtonDisabled : {},\n {\n cursor: isNextDisabled ? \"not-allowed\" : \"pointer\",\n opacity: isNextDisabled ? 0.5 : 1,\n },\n )}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.5 13l5-5-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n </div>\n )}\n </InlineStack>\n </InlineStack>\n </BlockStack>\n\n <Box>\n {selectedTab === 0 ? (\n <div\n ref={slideContainerRef}\n style={mergeStyles(\n sdkStyles.slidesContainer,\n mobileStyles.slidesContainer,\n { \n scrollbarWidth: \"none\" as any,\n }\n )}\n className={isMobile ? \"whats-new-mobile-scrollbar\" : \"\"}\n onTouchStart={isMobile ? handleTouchStart : undefined}\n onTouchMove={isMobile ? handleTouchMove : undefined}\n onTouchEnd={isMobile ? handleTouchEnd : undefined}\n >\n <div\n style={mergeStyles(\n sdkStyles.slidesWrapper,\n mobileStyles.slidesWrapper,\n {\n transform: isMobile\n ? `translateX(calc(-${productUpdateIndex * 85}% + ${touchDelta}px))` // 85% for mobile with swipe delta\n : `translateX(calc(-${productUpdateIndex * 90}% + ${touchDelta}px))`,\n transition: isSwiping ? \"none\" : \"transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n willChange: \"transform\", // GPU acceleration\n },\n )}\n >\n {limitedUpdates.map((update) => (\n <div\n key={update.id}\n style={mergeStyles(\n sdkStyles.slideBox,\n isMobile ? mobileStyles.slideBox : {},\n )}\n >\n <div style={sdkStyles.slideContent}>\n <Text variant=\"headingMd\" as=\"h3\">\n {update.title}\n </Text>\n {(update.releaseDate || update.date_time) && (\n <Text variant=\"bodySm\" tone=\"subdued\" as=\"p\">\n {update.releaseDate || update.date_time}\n </Text>\n )}\n {(update.description || update.content?.text) && (\n <Text as=\"p\">\n {update.description || update.content?.text}\n </Text>\n )}\n {update.features && update.features.length > 0 && (\n <ul style={{ paddingLeft: \"20px\", margin: 0 }}>\n {update.features.map(\n (item: string, idx: number) => (\n <li\n key={idx}\n style={{\n fontSize: \"13px\",\n lineHeight: 1.4,\n marginBottom: \"4px\",\n }}\n >\n {item}\n </li>\n ),\n )}\n </ul>\n )}\n <InlineStack gap=\"200\">\n {(update.button_try_url || update.link) && (\n <Button\n onClick={() => handleProductUpdateClick(update)}\n >\n {update.button_try_it_now || \"Try it now\"}\n </Button>\n )}\n {(update.button_learn_url || update.link) && (\n <Button\n variant={\n !(update.button_try_url || update.link)\n ? \"secondary\"\n : \"monochromePlain\"\n }\n onClick={() => {\n const learnUrl =\n update.button_learn_url || update.link;\n\n if (learnUrl && learnUrl !== \"modal\") {\n window.open(learnUrl, \"_blank\");\n }\n }}\n >\n {update.button_learn_more || \"Learn more\"}\n </Button>\n )}\n </InlineStack>\n </div>\n <div\n style={mergeStyles(\n sdkStyles.slideImage,\n isMobile ? mobileStyles.slideImage : {},\n )}\n >\n <ImageLoading\n src={\n update.imageUrl ||\n update.image_url ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={`what-new-${update.id}`}\n width={712}\n height={400}\n borderRadius={12}\n />\n </div>\n </div>\n ))}\n </div>\n </div>\n ) : (\n <div\n ref={slideContainerRef}\n style={mergeStyles(\n sdkStyles.slidesContainer,\n { \n scrollbarWidth: \"none\" as any,\n },\n mobileStyles.slidesContainer,\n )}\n className={isMobile ? \"whats-new-mobile-scrollbar\" : \"\"}\n onTouchStart={isMobile ? handleTouchStart : undefined}\n onTouchMove={isMobile ? handleTouchMove : undefined}\n onTouchEnd={isMobile ? handleTouchEnd : undefined}\n >\n <ArticleList\n layout=\"slide\"\n onArticleClick={handleArticleClick}\n showThumbnail={true}\n showAuthor={true}\n showDate={true}\n currentIndex={articleIndex}\n onSlideChange={setArticleIndex}\n showNavigation={false}\n />\n </div>\n )}\n </Box>\n </BlockStack>\n </Card>\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"WhatsNew.js","sourceRoot":"","sources":["../../src/components/WhatsNew.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport {\n Button,\n Tabs,\n Text,\n BlockStack,\n InlineStack,\n Box,\n Card,\n SkeletonBodyText,\n SkeletonThumbnail,\n} from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { ArticleList } from \"./ArticleList\";\nimport ImageLoading from \"./ImageLoading\";\nimport { useArticles, useWhatsNew } from \"../hooks\";\nimport { useTranslation } from \"../hooks/useTranslations\";\nimport { ArticleItem, ProductUpdateItem } from \"../types\";\nimport { sdkStyles, mergeStyles } from \"./styles\";\nimport { COMPONENT_DEFAULTS } from \"../config/component-defaults\";\nimport { useSDK, type UseSDKOptions } from \"../core/SDKManager\";\n\n// Fixed dimensions to prevent CLS - reduced to avoid excessive white space\nconst CONTAINER_MIN_HEIGHT = 300; // Reduced from 450\n\nexport interface WhatsNewProps extends UseSDKOptions {\n /** Optional CSS class */\n className?: string;\n \n /** Navigation function for internal routing */\n navigate?: (path: string) => void;\n \n /** Handle product update clicks */\n onProductUpdateClick?: (update: ProductUpdateItem) => void;\n \n /** Handle article clicks */\n onArticleClick?: (article: ArticleItem) => void;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n className = \"\",\n navigate,\n onProductUpdateClick,\n onArticleClick,\n // SDK options (optional)\n shopInfo,\n locale,\n translations,\n config,\n}) => {\n // Connect to SDK Manager (auto-initializes)\n // @ts-ignore - Will be used in future refactoring\n const _sdk = useSDK({ shopInfo, locale, translations, config });\n \n // Use internal defaults\n const { \n maxUpdates,\n showNavigation,\n showViewAllButton,\n } = COMPONENT_DEFAULTS.whatsNew;\n const [productUpdateIndex, setProductUpdateIndex] = useState(0);\n const [articleIndex, setArticleIndex] = useState(0);\n const [selectedTab, setSelectedTab] = useState(0);\n const [isMobile, setIsMobile] = useState(false);\n const [isContentReady, setIsContentReady] = useState(false);\n const [touchDelta, setTouchDelta] = useState(0);\n const [isSwiping, setIsSwiping] = useState(false);\n\n const touchStartX = useRef<number | null>(null);\n const touchEndX = useRef<number | null>(null);\n const swiping = useRef(false);\n const slideContainerRef = useRef<HTMLDivElement>(null);\n\n const articles = useArticles();\n const whatsNew = useWhatsNew();\n const t = useTranslation('whatsNew');\n\n const limitedUpdates = useMemo(() => \n whatsNew.updates.slice(0, maxUpdates), \n [whatsNew.updates, maxUpdates]\n );\n\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n // Mark content as ready when data loads\n useEffect(() => {\n if (limitedUpdates.length > 0 || articlesList.length > 0) {\n requestAnimationFrame(() => {\n setIsContentReady(true);\n });\n }\n }, [limitedUpdates.length, articles.articles.length]);\n \n const articlesList = articles.articles;\n\n const nextSlide = () => {\n if (selectedTab === 0) {\n setProductUpdateIndex((prevIndex) => {\n const newIndex = Math.min(prevIndex + 1, limitedUpdates.length - 1);\n return newIndex;\n });\n } else {\n setArticleIndex((prevIndex) => {\n if (isMobile) {\n const newIndex = Math.min(prevIndex + 1, articlesList.length - 1);\n return newIndex;\n } else {\n const visibleItems = 3;\n const maxIndex = Math.max(0, articlesList.length - visibleItems);\n const newIndex = Math.min(prevIndex + 1, maxIndex);\n return newIndex;\n }\n });\n }\n };\n\n const prevSlide = () => {\n if (selectedTab === 0) {\n setProductUpdateIndex((prevIndex) => {\n const newIndex = Math.max(prevIndex - 1, 0);\n return newIndex;\n });\n } else {\n setArticleIndex((prevIndex) => {\n const newIndex = Math.max(prevIndex - 1, 0);\n return newIndex;\n });\n }\n };\n\n const handleTouchStart = (e: React.TouchEvent) => {\n touchStartX.current = e.touches[0].clientX;\n swiping.current = true;\n setIsSwiping(true);\n setTouchDelta(0);\n };\n\n const handleTouchMove = (e: React.TouchEvent) => {\n if (!swiping.current || touchStartX.current === null) return;\n touchEndX.current = e.touches[0].clientX;\n const delta = touchEndX.current - touchStartX.current;\n setTouchDelta(delta);\n };\n\n const handleTouchEnd = () => {\n if (!swiping.current) return;\n\n const swipeThreshold = 50;\n const diff = (touchStartX.current || 0) - (touchEndX.current || 0);\n\n if (Math.abs(diff) > swipeThreshold) {\n if (diff > 0) {\n nextSlide();\n } else {\n prevSlide();\n }\n }\n\n swiping.current = false;\n touchStartX.current = null;\n touchEndX.current = null;\n setIsSwiping(false);\n setTouchDelta(0);\n };\n\n const handleProductUpdateClick = (update: ProductUpdateItem) => {\n const tryUrl = update.button_try_url || update.link;\n\n if (update.id === \"feature_up_vote\") {\n window.dispatchEvent(\n new CustomEvent(\"openFeatureBoard\", {\n detail: { source: \"whatsnew\" },\n }),\n );\n onProductUpdateClick?.(update);\n return;\n }\n\n if (tryUrl && tryUrl !== \"modal\") {\n if (tryUrl.startsWith(\"/\")) {\n if (navigate) {\n navigate(tryUrl);\n }\n onProductUpdateClick?.(update);\n return;\n } else if (\n tryUrl.startsWith(\"http://\") ||\n tryUrl.startsWith(\"https://\")\n ) {\n window.open(tryUrl, \"_blank\");\n onProductUpdateClick?.(update);\n }\n } else if (tryUrl === \"modal\") {\n onProductUpdateClick?.(update);\n } else {\n onProductUpdateClick?.(update);\n }\n };\n\n const handleArticleClick = (article: ArticleItem) => {\n if (article.link) {\n window.open(article.link, \"_blank\");\n }\n onArticleClick?.(article);\n };\n\n const handleViewAllUpdates = () => {\n // Use SDK default behavior\n window.open(\"https://trust1.io/updates/\", \"_blank\");\n };\n\n const handleViewAllArticles = () => {\n // Use SDK default behavior\n window.open(\"https://trust1.io/blog/\", \"_blank\");\n };\n\n const tabs = [\n { id: \"product-update\", content: t.tabs?.productUpdate || \"Product Updates\" },\n { id: \"article\", content: t.tabs?.article || \"Articles\" },\n ];\n\n const isPrevDisabled =\n selectedTab === 0 ? productUpdateIndex === 0 : articleIndex === 0;\n const isNextDisabled =\n selectedTab === 0\n ? productUpdateIndex === limitedUpdates.length - 1\n : (() => {\n if (isMobile) {\n return articleIndex === articlesList.length - 1;\n } else {\n const visibleItems = 3;\n const maxIndex = Math.max(0, articlesList.length - visibleItems);\n return articleIndex >= maxIndex;\n }\n })();\n\n // Show skeleton while loading\n if (!isContentReady) {\n return (\n <div style={{ ...sdkStyles.dashboardWhatsNew, minHeight: `${CONTAINER_MIN_HEIGHT}px` }} className={className}>\n <Card>\n <BlockStack gap=\"400\">\n <BlockStack gap=\"100\">\n <SkeletonBodyText lines={1} />\n <InlineStack gap=\"300\" blockAlign=\"center\" align=\"space-between\">\n <div style={{ width: \"200px\" }}>\n <SkeletonBodyText lines={1} />\n </div>\n </InlineStack>\n </BlockStack>\n <Box>\n <BlockStack gap=\"400\">\n <SkeletonThumbnail size=\"large\" />\n <SkeletonBodyText lines={3} />\n </BlockStack>\n </Box>\n </BlockStack>\n </Card>\n </div>\n );\n }\n\n // Empty state\n if (limitedUpdates.length === 0 && articlesList.length === 0) {\n return (\n <div style={{ ...sdkStyles.dashboardWhatsNew, minHeight: `${CONTAINER_MIN_HEIGHT}px` }} className={className}>\n <Card>\n <BlockStack gap=\"400\">\n <Text variant=\"bodyMd\" tone=\"subdued\" as=\"p\">\n {t.noData || \"No updates available\"}\n </Text>\n </BlockStack>\n </Card>\n </div>\n );\n }\n\n const mobileStyles = isMobile\n ? {\n slidesContainer: {\n overflow: \"auto\",\n scrollSnapType: \"x mandatory\",\n WebkitOverflowScrolling: \"touch\" as any,\n scrollbarWidth: \"none\" as const,\n msOverflowStyle: \"none\" as const,\n },\n slidesWrapper: {\n scrollSnapAlign: \"start\" as const,\n },\n slideBox: {\n scrollSnapAlign: \"center\" as const,\n flex: \"0 0 85%\",\n maxWidth: \"85%\",\n minHeight: \"280px\",\n },\n slideImage: {\n // marginBottom: \"16px\",\n },\n hideScrollbar: {\n \"&::-webkit-scrollbar\": {\n display: \"none\",\n },\n },\n }\n : {};\n\n return (\n <div style={mergeStyles(sdkStyles.dashboardWhatsNew)} className={className}>\n <style>{`\n .whats-new-mobile-scrollbar::-webkit-scrollbar {\n display: none;\n }\n `}</style>\n <Card>\n <BlockStack gap=\"400\">\n <BlockStack gap=\"100\">\n <div\n style={{\n fontSize: \"16px\",\n fontWeight: \"650\",\n lineHeight: \"24px\",\n color: \"#303030\",\n marginBottom: \"8px\",\n margin: 0,\n }}\n >\n {t.title || \"What's New\"}\n </div>\n\n <InlineStack gap=\"300\" blockAlign=\"center\" align=\"space-between\">\n <div\n className=\"custom-tabs--wrapper-dashboard\"\n style={{\n margin: \"0\",\n padding: \"0\",\n }}\n >\n <style>{`\n .custom-tabs--wrapper-dashboard .Polaris-Box {\n --pc-box-padding-inline-start-md: 0 !important;\n --pc-box-padding-inline-end-md: 0 !important;\n }\n .custom-tabs--wrapper-dashboard .Polaris-Tabs {\n padding: 0 !important;\n }\n .custom-tabs--wrapper-dashboard .Polaris-Tabs__Wrapper {\n padding: 0 !important;\n overflow-y: hidden;\n }\n `}</style>\n <Tabs\n tabs={tabs}\n selected={selectedTab}\n onSelect={setSelectedTab}\n />\n </div>\n\n <InlineStack gap=\"200\">\n {showViewAllButton && (\n <Button\n icon={ExternalIcon}\n onClick={\n selectedTab === 0\n ? handleViewAllUpdates\n : handleViewAllArticles\n }\n >\n {selectedTab === 0\n ? (t.buttonViewAll?.productUpdate || \"View all updates\")\n : (t.buttonViewAll?.article || \"View all articles\")}\n </Button>\n )}\n\n {showNavigation && (\n <div style={sdkStyles.slideNavigation}>\n <button\n onClick={prevSlide}\n disabled={isPrevDisabled}\n style={mergeStyles(\n sdkStyles.slideButton,\n isPrevDisabled ? sdkStyles.slideButtonDisabled : {},\n {\n cursor: isPrevDisabled ? \"not-allowed\" : \"pointer\",\n opacity: isPrevDisabled ? 0.5 : 1,\n },\n )}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n >\n <path\n d=\"M10.5 13L5.5 8l5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n <button\n onClick={nextSlide}\n disabled={isNextDisabled}\n style={mergeStyles(\n sdkStyles.slideButton,\n isNextDisabled ? sdkStyles.slideButtonDisabled : {},\n {\n cursor: isNextDisabled ? \"not-allowed\" : \"pointer\",\n opacity: isNextDisabled ? 0.5 : 1,\n },\n )}\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n >\n <path\n d=\"M5.5 13l5-5-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n </div>\n )}\n </InlineStack>\n </InlineStack>\n </BlockStack>\n\n <Box>\n {selectedTab === 0 ? (\n <div\n ref={slideContainerRef}\n style={mergeStyles(\n sdkStyles.slidesContainer,\n mobileStyles.slidesContainer,\n { \n scrollbarWidth: \"none\" as any,\n }\n )}\n className={isMobile ? \"whats-new-mobile-scrollbar\" : \"\"}\n onTouchStart={isMobile ? handleTouchStart : undefined}\n onTouchMove={isMobile ? handleTouchMove : undefined}\n onTouchEnd={isMobile ? handleTouchEnd : undefined}\n >\n <div\n style={mergeStyles(\n sdkStyles.slidesWrapper,\n mobileStyles.slidesWrapper,\n {\n transform: isMobile\n ? `translateX(calc(-${productUpdateIndex * 85}% + ${touchDelta}px))` // 85% for mobile with swipe delta\n : `translateX(calc(-${productUpdateIndex * 90}% + ${touchDelta}px))`,\n transition: isSwiping ? \"none\" : \"transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n willChange: \"transform\", // GPU acceleration\n },\n )}\n >\n {limitedUpdates.map((update) => (\n <div\n key={update.id}\n style={mergeStyles(\n sdkStyles.slideBox,\n isMobile ? mobileStyles.slideBox : {},\n )}\n >\n <div style={sdkStyles.slideContent}>\n {isMobile && (\n <div\n style={mergeStyles(\n sdkStyles.slideImage,\n mobileStyles.slideImage,\n )}\n >\n <ImageLoading\n src={\n update.imageUrl ||\n update.image_url ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={`what-new-${update.id}`}\n width={712}\n height={400}\n borderRadius={12}\n />\n </div>\n )}\n <Text variant=\"headingMd\" as=\"h3\">\n {update.title}\n </Text>\n {(update.releaseDate || update.date_time) && (\n <Text variant=\"bodySm\" tone=\"subdued\" as=\"p\">\n {update.releaseDate || update.date_time}\n </Text>\n )}\n {(update.description || update.content?.text) && (\n <Text as=\"p\">\n {update.description || update.content?.text}\n </Text>\n )}\n {update.features && update.features.length > 0 && (\n <ul style={{ paddingLeft: \"20px\", margin: 0 }}>\n {update.features.map(\n (item: string, idx: number) => (\n <li\n key={idx}\n style={{\n fontSize: \"13px\",\n lineHeight: 1.4,\n marginBottom: \"4px\",\n }}\n >\n {item}\n </li>\n ),\n )}\n </ul>\n )}\n <InlineStack gap=\"200\">\n {(update.button_try_url || update.link) && (\n <Button\n onClick={() => handleProductUpdateClick(update)}\n >\n {update.button_try_it_now || \"Try it now\"}\n </Button>\n )}\n {(update.button_learn_url || update.link) && (\n <Button\n variant={\n !(update.button_try_url || update.link)\n ? \"secondary\"\n : \"monochromePlain\"\n }\n onClick={() => {\n const learnUrl =\n update.button_learn_url || update.link;\n\n if (learnUrl && learnUrl !== \"modal\") {\n window.open(learnUrl, \"_blank\");\n }\n }}\n >\n {update.button_learn_more || \"Learn more\"}\n </Button>\n )}\n </InlineStack>\n </div>\n {!isMobile && (\n <div style={sdkStyles.slideImage}>\n <ImageLoading\n src={\n update.imageUrl ||\n update.image_url ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={`what-new-${update.id}`}\n width={712}\n height={400}\n borderRadius={12}\n />\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n ) : (\n <div\n ref={slideContainerRef}\n style={mergeStyles(\n sdkStyles.slidesContainer,\n { \n scrollbarWidth: \"none\" as any,\n },\n mobileStyles.slidesContainer,\n )}\n className={isMobile ? \"whats-new-mobile-scrollbar\" : \"\"}\n onTouchStart={isMobile ? handleTouchStart : undefined}\n onTouchMove={isMobile ? handleTouchMove : undefined}\n onTouchEnd={isMobile ? handleTouchEnd : undefined}\n >\n <ArticleList\n layout=\"slide\"\n onArticleClick={handleArticleClick}\n showThumbnail={true}\n showAuthor={true}\n showDate={true}\n currentIndex={articleIndex}\n onSlideChange={setArticleIndex}\n showNavigation={false}\n />\n </div>\n )}\n </Box>\n </BlockStack>\n </Card>\n </div>\n );\n};\n"]}
|