@neurodyn/react-ai-try-on 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
-export declare function AiTryOnDialog({ defaultOpen, language, onOpenChange, open, productImageSrc, productName, productType, productUrl, apiKey, ...props }: AiTryOnDialogProps): JSX.Element;
+export declare function AiTryOnDialog({ defaultOpen, language, onOpenChange, open, productImageSrc, productName, productPrice, productType, productUrl, apiKey, ...props }: AiTryOnDialogProps): JSX.Element;
 
 declare interface AiTryOnDialogOwnProps extends Omit<DialogProps, 'children' | 'modal'> {
     /** UI language override. */
@@ -11,6 +11,8 @@ declare interface AiTryOnDialogOwnProps extends Omit<DialogProps, 'children' | '
     productImageSrc: string;
     /** Product name for product preview alt text and product page CTA. */
     productName: string;
+    /** Optional already-formatted product price shown in Add-to-Cart CTAs. */
+    productPrice?: string;
     /** Canonical product category sent unchanged to AI try-on generation. */
     productType: ProductType;
     /** Product page URL opened from the result product CTA. */
@@ -115,7 +117,8 @@ declare const resources: {
             readonly resultReset: "Save";
             readonly resultShare: "Share";
             readonly resultTitle: "Here's how it looks on you";
-            readonly resultTryAnother: "Add To Cart – $430";
+            readonly resultTryAnother: "Add To Cart";
+            readonly resultTryAnotherWithPrice: "Add To Cart – {{price}}";
             readonly share: "Share";
             readonly startHistory: "View previous results";
             readonly startTitle: "Want to see it on you?";
@@ -226,7 +229,8 @@ declare const resources: {
             readonly resultReset: "Сохранить";
             readonly resultShare: "Поделиться";
             readonly resultTitle: "Вот как это выглядит на вас";
-            readonly resultTryAnother: "Add To Cart – $430";
+            readonly resultTryAnother: "Add To Cart";
+            readonly resultTryAnotherWithPrice: "Add To Cart – {{price}}";
             readonly share: "Поделиться";
             readonly startHistory: "Смотреть прошлые результаты";
             readonly startTitle: "Хотите увидеть это на себе?";

package/dist/index.js

@@ -1047,6 +1047,10 @@ var __webpack_modules__ = {
     width: 56px;
   }
 
+  .w-\\[90\\%\\] {
+    width: 90%;
+  }
+
   .w-\\[340px\\] {
     width: 340px;
   }
@@ -10222,7 +10226,8 @@ const ns1 = {
     resultReset: 'Save',
     resultShare: 'Share',
     resultTitle: 'Here\'s how it looks on you',
-    resultTryAnother: 'Add To Cart – $430',
+    resultTryAnother: 'Add To Cart',
+    resultTryAnotherWithPrice: 'Add To Cart – {{price}}',
     share: 'Share',
     startHistory: 'View previous results',
     startTitle: 'Want to see it on you?',
@@ -10331,7 +10336,8 @@ const ru_ns1 = {
     resultReset: 'Сохранить',
     resultShare: 'Поделиться',
     resultTitle: 'Вот как это выглядит на вас',
-    resultTryAnother: 'Add To Cart – $430',
+    resultTryAnother: 'Add To Cart',
+    resultTryAnotherWithPrice: 'Add To Cart – {{price}}',
     share: 'Поделиться',
     startHistory: 'Смотреть прошлые результаты',
     startTitle: 'Хотите увидеть это на себе?',
@@ -18079,21 +18085,30 @@ function ProductThumbnail({ className, imageSrc, name }) {
     });
 }
 function GuidanceCard({ good, imageSrc, label }) {
-    return /*#__PURE__*/ jsxs("div", {
-        className: "relative aspect-square w-full overflow-hidden rounded-xl border border-border-light bg-background-base",
+    return /*#__PURE__*/ jsxs("figure", {
+        className: "flex min-w-0 flex-col items-start gap-2",
         children: [
-            /*#__PURE__*/ jsx_runtime_jsx("img", {
-                alt: label,
-                className: "size-full object-cover",
-                src: imageSrc
+            /*#__PURE__*/ jsxs("div", {
+                className: "relative aspect-square w-full overflow-hidden rounded-xl border border-border-light bg-background-base",
+                children: [
+                    /*#__PURE__*/ jsx_runtime_jsx("img", {
+                        alt: label,
+                        className: "size-full object-cover",
+                        src: imageSrc
+                    }),
+                    /*#__PURE__*/ jsx_runtime_jsx("span", {
+                        className: utils_cn('absolute right-2 top-2 flex size-7 items-center justify-center rounded-full', good ? 'bg-background-green' : 'bg-background-red'),
+                        children: good ? /*#__PURE__*/ jsx_runtime_jsx(CheckDone, {
+                            className: "size-5 text-background-containers"
+                        }) : /*#__PURE__*/ jsx_runtime_jsx(close_Close, {
+                            className: "size-5 text-background-containers"
+                        })
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx_runtime_jsx("span", {
-                className: utils_cn('absolute right-2 top-2 flex size-7 items-center justify-center rounded-full', good ? 'bg-background-green' : 'bg-background-red'),
-                children: good ? /*#__PURE__*/ jsx_runtime_jsx(CheckDone, {
-                    className: "size-5 text-background-containers"
-                }) : /*#__PURE__*/ jsx_runtime_jsx(close_Close, {
-                    className: "size-5 text-background-containers"
-                })
+            /*#__PURE__*/ jsx_runtime_jsx("figcaption", {
+                className: "w-[90%] break-words text-xs font-medium leading-[1.6] tracking-[0.02em] text-text-base",
+                children: label
             })
         ]
     });
@@ -18166,9 +18181,13 @@ function ResultImagePanel({ className, onOpenComparison, productLabel, productUr
     });
 }
 const COMPARISON_DIALOG_BACKGROUND_CLASS_NAME = 'bg-[#212124E5]';
-function ComparisonDialog({ onAddToCart, onClose, onDeleteResult, onSaveResult, onShareResult, portalContainer, productName, productUrl, result }) {
+function ComparisonDialog({ onAddToCart, onClose, onDeleteResult, onSaveResult, onShareResult, portalContainer, productName, productPrice, productUrl, result }) {
     const { t } = useTranslation();
     const productLabel = productName ?? t('resultProductLink');
+    const normalizedProductPrice = normalizeProductPrice(productPrice);
+    const addToCartLabel = normalizedProductPrice ? t('resultTryAnotherWithPrice', {
+        price: normalizedProductPrice
+    }) : t('resultTryAnother');
     function handleDelete() {
         onDeleteResult();
     }
@@ -18293,7 +18312,7 @@ function ComparisonDialog({ onAddToCart, onClose, onDeleteResult, onSaveResult,
                                     }),
                                     /*#__PURE__*/ jsx_runtime_jsx("span", {
                                         className: "truncate",
-                                        children: t('resultTryAnother')
+                                        children: addToCartLabel
                                     })
                                 ]
                             }),
@@ -18334,6 +18353,10 @@ function ComparisonDialog({ onAddToCart, onClose, onDeleteResult, onSaveResult,
         })
     });
 }
+function normalizeProductPrice(value) {
+    const normalized = value?.trim();
+    return normalized || void 0;
+}
 const badgeVariants = cva('inline-flex w-fit items-center justify-center overflow-hidden rounded-full whitespace-nowrap', {
     variants: {
         variant: {
@@ -18518,6 +18541,17 @@ function Vizbl({ className, ...props }) {
         ]
     });
 }
+const DEFAULT_LEGAL_LINKS = {
+    privacy: 'https://vizbl.com/legal/privacy-policy',
+    terms: 'https://vizbl.com/legal/terms-of-use'
+};
+const RUSSIAN_LEGAL_LINKS = {
+    privacy: 'https://arizo.ru/privacy-policy/',
+    terms: 'https://arizo.ru/terms-of-use/'
+};
+function getLegalLinks(language) {
+    return language?.startsWith('ru') ? RUSSIAN_LEGAL_LINKS : DEFAULT_LEGAL_LINKS;
+}
 import bag_bad_cropped_namespaceObject from "./static/image/bag-bad-cropped.webp";
 import bag_bad_hands_full_namespaceObject from "./static/image/bag-bad-hands-full.webp";
 import bag_good_angle_namespaceObject from "./static/image/bag-good-angle.webp";
@@ -19145,6 +19179,10 @@ function ErrorScreen({ view }) {
 }
 function ResultScreen({ view }) {
     const { t } = useTranslation();
+    const normalizedProductPrice = try_on_screens_normalizeProductPrice(view.productPrice);
+    const addToCartLabel = normalizedProductPrice ? t('resultTryAnotherWithPrice', {
+        price: normalizedProductPrice
+    }) : t('resultTryAnother');
     if (view.myFitsOpen) return /*#__PURE__*/ jsx_runtime_jsx("div", {
         className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain pb-4",
         children: /*#__PURE__*/ jsx_runtime_jsx("div", {
@@ -19153,6 +19191,7 @@ function ResultScreen({ view }) {
                     compact: index > 0,
                     onAddToCart: view.addToCart,
                     productName: historyItem.productName ?? view.productName,
+                    productPrice: historyItem.productPrice,
                     productUrl: historyItem.productUrl ?? view.productUrl,
                     result: historyItem,
                     onDeleteResult: view.deleteResult,
@@ -19188,7 +19227,7 @@ function ResultScreen({ view }) {
                             /*#__PURE__*/ jsx_runtime_jsx(Cart, {
                                 "data-icon": "inline-start"
                             }),
-                            t('resultTryAnother')
+                            addToCartLabel
                         ]
                     }),
                     /*#__PURE__*/ jsxs("div", {
@@ -19234,9 +19273,13 @@ function ResultScreen({ view }) {
         ]
     });
 }
-function ResultFitCard({ compact = false, onAddToCart, onDeleteResult, onOpenComparison, onSaveResult, onShareResult, productName, productUrl, result }) {
+function ResultFitCard({ compact = false, onAddToCart, onDeleteResult, onOpenComparison, onSaveResult, onShareResult, productName, productPrice, productUrl, result }) {
     const { t } = useTranslation();
     const productLabel = productName ?? t('resultProductLink');
+    const normalizedProductPrice = try_on_screens_normalizeProductPrice(productPrice);
+    const addToCartLabel = normalizedProductPrice ? t('resultTryAnotherWithPrice', {
+        price: normalizedProductPrice
+    }) : t('resultTryAnother');
     return /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col gap-4",
         children: [
@@ -19262,7 +19305,7 @@ function ResultFitCard({ compact = false, onAddToCart, onDeleteResult, onOpenCom
                             }),
                             /*#__PURE__*/ jsx_runtime_jsx("span", {
                                 className: "truncate",
-                                children: t('resultTryAnother')
+                                children: addToCartLabel
                             })
                         ]
                     }),
@@ -19342,7 +19385,8 @@ function ActionStack({ children, className }) {
     });
 }
 function TermsCopy({ className }) {
-    const { t } = useTranslation();
+    const { i18n, t } = useTranslation();
+    const legalLinks = getLegalLinks(i18n.resolvedLanguage ?? i18n.language);
     return /*#__PURE__*/ jsxs("p", {
         className: utils_cn('pt-1 text-center text-xs font-medium text-text-base', className),
         children: [
@@ -19350,7 +19394,7 @@ function TermsCopy({ className }) {
             ' ',
             /*#__PURE__*/ jsx_runtime_jsx("a", {
                 className: "underline underline-offset-2",
-                href: "https://vizbl.com/legal/terms-of-use",
+                href: legalLinks.terms,
                 rel: "noopener noreferrer",
                 target: "_blank",
                 children: t('termsLink')
@@ -19360,7 +19404,7 @@ function TermsCopy({ className }) {
             ' ',
             /*#__PURE__*/ jsx_runtime_jsx("a", {
                 className: "underline underline-offset-2",
-                href: "https://vizbl.com/legal/privacy-policy",
+                href: legalLinks.privacy,
                 rel: "noopener noreferrer",
                 target: "_blank",
                 children: t('privacyLink')
@@ -19368,6 +19412,10 @@ function TermsCopy({ className }) {
         ]
     });
 }
+function try_on_screens_normalizeProductPrice(value) {
+    const normalized = value?.trim();
+    return normalized || void 0;
+}
 const REQUIRED_UPLOAD_COUNT = 2;
 function createNanoBananaAiTryOnProcessor({ createObjectUrl = defaultCreateObjectUrl, fetch: fetchImpl, productImageSrc, productType, tryOnClient, apiKey }) {
     assertProductType(productType);
@@ -19703,6 +19751,7 @@ async function toStoredResult(result) {
         id: result.id,
         productImageSrc: result.productImageSrc,
         productName: result.productName,
+        productPrice: result.productPrice,
         productUrl: result.productUrl
     };
 }
@@ -19792,7 +19841,7 @@ class AiTryOnSession {
     createObjectUrl;
     tipStore;
     state;
-    constructor({ createObjectUrl, productImageSrc, productName, productType, productUrl, tipStore }){
+    constructor({ createObjectUrl, productImageSrc, productName, productPrice, productType, productUrl, tipStore }){
         this.createObjectUrl = createObjectUrl;
         this.tipStore = tipStore;
         this.state = {
@@ -19805,6 +19854,7 @@ class AiTryOnSession {
             processingProgress: 0,
             productImageSrc,
             productName,
+            productPrice: ai_try_on_session_normalizeProductPrice(productPrice),
             productType,
             productUrl,
             result: null,
@@ -19840,6 +19890,7 @@ class AiTryOnSession {
                     canOpenMyFits: this.state.history.length > 0,
                     myFitsOpen: this.state.myFitsOpen,
                     productName: this.state.result?.productName ?? this.state.productName,
+                    productPrice: this.state.result ? ai_try_on_session_normalizeProductPrice(this.state.result.productPrice) : this.state.productPrice,
                     productUrl: this.state.result?.productUrl ?? this.state.productUrl,
                     result: this.state.result,
                     resultHistory: getResultHistory(this.state.result, this.state.history),
@@ -19862,6 +19913,7 @@ class AiTryOnSession {
         return {
             open: this.state.comparisonOpen && null !== result,
             productName: result?.productName ?? this.state.productName,
+            productPrice: result ? ai_try_on_session_normalizeProductPrice(result.productPrice) : this.state.productPrice,
             productUrl: result?.productUrl ?? this.state.productUrl,
             result
         };
@@ -19872,11 +19924,12 @@ class AiTryOnSession {
     get history() {
         return this.state.history;
     }
-    updateProduct({ productImageSrc, productName, productType, productUrl }) {
+    updateProduct({ productImageSrc, productName, productPrice, productType, productUrl }) {
         this.state = {
             ...this.state,
             productImageSrc,
             productName,
+            productPrice: ai_try_on_session_normalizeProductPrice(productPrice),
             productType,
             productUrl
         };
@@ -20177,6 +20230,7 @@ class AiTryOnSession {
         return {
             productImageSrc: this.state.productImageSrc,
             productName: this.state.productName,
+            productPrice: this.state.productPrice,
             productUrl: this.state.productUrl
         };
     }
@@ -20195,10 +20249,15 @@ function createAiTryOnHistoryItem(result, metadata, createdAt = Date.now()) {
     return {
         ...result,
         ...metadata,
+        productPrice: ai_try_on_session_normalizeProductPrice(metadata.productPrice),
         createdAt,
         id: `${result.before.id}-result-${createdAt}`
     };
 }
+function ai_try_on_session_normalizeProductPrice(value) {
+    const normalized = value?.trim();
+    return normalized || void 0;
+}
 function getResultHistory(result, history) {
     if (!result) return [];
     const results = [
@@ -20310,6 +20369,7 @@ function reviveStoredResult(result, createObjectUrl) {
         id: result.id,
         productImageSrc: result.productImageSrc,
         productName: result.productName,
+        productPrice: result.productPrice,
         productUrl: result.productUrl
     };
 }
@@ -20364,7 +20424,7 @@ function collectPhotoObjectUrl(photo) {
         photo.src
     ] : null;
 }
-function useAiTryOnSession({ historyStore = indexedDbAiTryOnHistoryStore, objectUrls = browserAiTryOnObjectUrls, onRequestClose, onRequestFileInput, processPhoto, productImageSrc, productName, productType, productUrl, tryOnClient, resultActions = browserAiTryOnResultActions, tipStore = browserAiTryOnTipStore }) {
+function useAiTryOnSession({ historyStore = indexedDbAiTryOnHistoryStore, objectUrls = browserAiTryOnObjectUrls, onRequestClose, onRequestFileInput, processPhoto, productImageSrc, productName, productPrice, productType, productUrl, tryOnClient, resultActions = browserAiTryOnResultActions, tipStore = browserAiTryOnTipStore }) {
     const [, rerender] = (0, __rspack_external_react.useReducer)((value)=>value + 1, 0);
     const trackedObjectUrls = (0, __rspack_external_react.useRef)(new Set());
     const createTrackedObjectUrl = (0, __rspack_external_react.useCallback)((blob)=>{
@@ -20379,6 +20439,7 @@ function useAiTryOnSession({ historyStore = indexedDbAiTryOnHistoryStore, object
         createObjectUrl: createTrackedObjectUrl,
         productImageSrc,
         productName,
+        productPrice,
         productType,
         productUrl,
         tipStore
@@ -20387,6 +20448,7 @@ function useAiTryOnSession({ historyStore = indexedDbAiTryOnHistoryStore, object
     session.updateProduct({
         productImageSrc,
         productName,
+        productPrice,
         productType,
         productUrl
     });
@@ -20578,7 +20640,7 @@ function useAiTryOnSession({ historyStore = indexedDbAiTryOnHistoryStore, object
 function waitForRemainingProcessingDuration(startedAt) {
     return waitForProcessingDuration(getRemainingProcessingDuration(startedAt));
 }
-function AiTryOnRoot({ dialogPortalContainer, language, onClose, processPhoto, productImageSrc, productName, productType, productUrl, tryOnClient: providedTryOnClient, apiKey, showDialogCloseButton = false }) {
+function AiTryOnRoot({ dialogPortalContainer, language, onClose, processPhoto, productImageSrc, productName, productPrice, productType, productUrl, tryOnClient: providedTryOnClient, apiKey, showDialogCloseButton = false }) {
     assertProductType(productType);
     const { i18n, t } = useTranslation();
     const fileInputRef = (0, __rspack_external_react.useRef)(null);
@@ -20601,6 +20663,7 @@ function AiTryOnRoot({ dialogPortalContainer, language, onClose, processPhoto, p
         processPhoto,
         productImageSrc,
         productName,
+        productPrice,
         productType,
         productUrl,
         tryOnClient
@@ -20678,6 +20741,7 @@ function AiTryOnRoot({ dialogPortalContainer, language, onClose, processPhoto, p
             }, stage),
             session.comparison.open && /*#__PURE__*/ jsx_runtime_jsx(ComparisonDialog, {
                 productName: session.comparison.productName,
+                productPrice: session.comparison.productPrice,
                 productUrl: session.comparison.productUrl,
                 portalContainer: dialogPortalContainer ?? void 0,
                 result: session.comparison.result,
@@ -20721,7 +20785,7 @@ function getBadgeTone(stage) {
 configureNodeApiClient({
     baseURL: "https://api.neurodyn.ai/"
 });
-function AiTryOnDialog({ defaultOpen = false, language, onOpenChange, open, productImageSrc, productName, productType, productUrl, apiKey, ...props }) {
+function AiTryOnDialog({ defaultOpen = false, language, onOpenChange, open, productImageSrc, productName, productPrice, productType, productUrl, apiKey, ...props }) {
     assertProductType(productType);
     const i18n = (0, __rspack_external_react.useMemo)(()=>createAiTryOnI18n(language), [
         language
@@ -20782,6 +20846,7 @@ function AiTryOnDialog({ defaultOpen = false, language, onOpenChange, open, prod
                                 portalContainer: themeRoot,
                                 productImageSrc: productImageSrc,
                                 productName: productName,
+                                productPrice: productPrice,
                                 productType: productType,
                                 productUrl: productUrl,
                                 tryOnClient: tryOnClient,
@@ -20796,7 +20861,7 @@ function AiTryOnDialog({ defaultOpen = false, language, onOpenChange, open, prod
         ]
     });
 }
-function AiTryOnDialogContent({ language, onRequestClose, portalContainer, productImageSrc, productName, productType, productUrl, tryOnClient, ...props }) {
+function AiTryOnDialogContent({ language, onRequestClose, portalContainer, productImageSrc, productName, productPrice, productType, productUrl, tryOnClient, ...props }) {
     const { t } = useTranslation();
     return /*#__PURE__*/ jsx_runtime_jsx(Dialog, {
         ...props,
@@ -20825,6 +20890,7 @@ function AiTryOnDialogContent({ language, onRequestClose, portalContainer, produ
                     language: language,
                     productImageSrc: productImageSrc,
                     productName: productName,
+                    productPrice: productPrice,
                     productType: productType,
                     productUrl: productUrl,
                     tryOnClient: tryOnClient,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-ai-try-on",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "publishConfig": {
     "access": "public"
   },