@wix/headless-gift-voucher 0.0.1

package/dist/react/core/GiftCard.js

@@ -0,0 +1,737 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { GiftCardServiceDefinition, GiftCardService, } from '../../services/gift-card-service.js';
+import { GiftCardCheckoutServiceDefinition, GiftCardCheckoutService, } from '../../services/gift-card-checkout-service.js';
+import { CUSTOM_VARIANT_ID } from '../../enums/index.js';
+import { getCurrencySymbol, formatDate, formatDateForInput, } from '../../utils/formatting-utils.js';
+/**
+ * Root component that provides the GiftCard service context to its children.
+ * Supports both SSR (with product in config) and client-side auto-fetch (empty config).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With SSR config
+ * <GiftCard.Root giftCardServiceConfig={{ product: myProduct }}>
+ *   <GiftCard.Name />
+ * </GiftCard.Root>
+ *
+ * // Without config (auto-fetch)
+ * <GiftCard.Root giftCardServiceConfig={{}}>
+ *   <GiftCard.Name />
+ * </GiftCard.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(GiftCardServiceDefinition, GiftCardService, props.giftCardServiceConfig)
+            .addService(GiftCardCheckoutServiceDefinition, GiftCardCheckoutService, {}), children: props.children }));
+}
+/**
+ * Headless component for displaying the gift card product name
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Name>
+ *   {({ name }) => (
+ *     <h1>{name}</h1>
+ *   )}
+ * </GiftCard.Name>
+ * ```
+ */
+export function Name(props) {
+    const service = useService(GiftCardServiceDefinition);
+    const product = service.product.get();
+    const name = product?.name ?? '';
+    return props.children({
+        name,
+    });
+}
+/**
+ * Headless component for handling loading state
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Loading>
+ *   {({ isLoading }) => isLoading ? <Spinner /> : null}
+ * </GiftCard.Loading>
+ * ```
+ */
+export function Loading(props) {
+    const service = useService(GiftCardServiceDefinition);
+    const isLoading = service.isLoading.get();
+    return props.children({
+        isLoading,
+    });
+}
+/**
+ * Headless component for handling error state
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Error>
+ *   {({ error }) => error ? <div className="error">{error}</div> : null}
+ * </GiftCard.Error>
+ * ```
+ */
+export function Error(props) {
+    const service = useService(GiftCardServiceDefinition);
+    const error = service.error.get();
+    return props.children({
+        error,
+    });
+}
+/**
+ * Headless component that exposes the gift card data via render props.
+ * Provides access to the gift card product, loading state, and error state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Raw>
+ *   {({ giftCard, isLoading, error }) => {
+ *     if (isLoading) return <div>Loading...</div>;
+ *     if (error) return <div>Error: {error}</div>;
+ *     return <div>{giftCard.name}</div>;
+ *   }}
+ * </GiftCard.Raw>
+ * ```
+ */
+export function Raw(props) {
+    const service = useService(GiftCardServiceDefinition);
+    const isLoading = service.isLoading.get();
+    const error = service.error.get();
+    const giftCard = service.product.get();
+    return props.children({
+        giftCard: giftCard ?? null,
+        isLoading,
+        error,
+    });
+}
+/**
+ * Headless component for displaying the gift card image.
+ * The image automatically updates when selecting a variant that has its own image defined.
+ * Returns null if no image is available.
+ *
+ * Behavior:
+ * - Shows the selected preset variant's image if one is defined
+ * - Falls back to the default product image otherwise (including when custom amount is selected)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Image>
+ *   {({ image }) => (
+ *     <img src={image} alt="Gift Card" />
+ *   )}
+ * </GiftCard.Image>
+ * ```
+ */
+export function Image(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const currentImage = checkoutService.currentImage.get();
+    // Return null if no image available
+    if (!currentImage) {
+        return null;
+    }
+    return props.children({
+        image: currentImage,
+    });
+}
+/**
+ * Headless component for displaying the gift card product description.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Description>
+ *   {({ description }) => (
+ *     <p>{description}</p>
+ *   )}
+ * </GiftCard.Description>
+ * ```
+ */
+export function Description(props) {
+    const service = useService(GiftCardServiceDefinition);
+    const product = service.product.get();
+    const description = product?.description ?? '';
+    return props.children({
+        description,
+    });
+}
+/**
+ * Headless component that provides the list of preset variants.
+ * Use this as a container to check for empty state before rendering the repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.PresetVariants>
+ *   {({ presetVariants }) => (
+ *     presetVariants.length > 0 ? (
+ *       <div className="flex gap-2">
+ *         {presetVariants.map(variant => (
+ *           <button key={variant.id} onClick={variant.select}>
+ *             <Money money={{ amount: variant.value, currency: variant.currencyCode }} />
+ *           </button>
+ *         ))}
+ *       </div>
+ *     ) : (
+ *       <div>No variants available</div>
+ *     )
+ *   )}
+ * </GiftCard.PresetVariants>
+ * ```
+ */
+export function PresetVariants(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const product = giftCardService.product.get();
+    const selectedId = checkoutService.selectedVariantId.get();
+    const currencyCode = giftCardService.currencyCode.get();
+    const locale = giftCardService.locale.get();
+    const presetVariants = (product?.presetVariants ?? []).map((variant) => {
+        const variantId = variant._id ?? '';
+        const price = parseFloat(variant.price?.amount ?? '0');
+        const value = parseFloat(variant.value?.amount ?? variant.price?.amount ?? '0');
+        return {
+            id: variantId,
+            price,
+            value,
+            hasDiscount: price < value,
+            hasImage: Boolean(variant.image),
+            isSelected: selectedId === variantId,
+            select: () => checkoutService.setVariant(variantId),
+            currencyCode,
+            locale,
+        };
+    });
+    return props.children({
+        presetVariants,
+    });
+}
+/**
+ * Headless component that provides preset variants for iteration.
+ * Used by the UI layer to create PresetVariant.Root contexts for each variant.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.PresetVariantRepeater>
+ *   {({ presetVariants }) =>
+ *     presetVariants.map(variant => (
+ *       <PresetVariant.Root key={variant.id} variant={variant}>
+ *         <PresetVariant.Amount />
+ *       </PresetVariant.Root>
+ *     ))
+ *   }
+ * </GiftCard.PresetVariantRepeater>
+ * ```
+ */
+export function PresetVariantRepeater(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const product = giftCardService.product.get();
+    const selectedId = checkoutService.selectedVariantId.get();
+    const currencyCode = giftCardService.currencyCode.get();
+    const locale = giftCardService.locale.get();
+    const presetVariants = (product?.presetVariants ?? []).map((variant) => {
+        const variantId = variant._id ?? '';
+        const price = parseFloat(variant.price?.amount ?? '0');
+        const value = parseFloat(variant.value?.amount ?? variant.price?.amount ?? '0');
+        return {
+            id: variantId,
+            price,
+            value,
+            hasDiscount: price < value,
+            hasImage: Boolean(variant.image),
+            isSelected: selectedId === variantId,
+            select: () => checkoutService.setVariant(variantId),
+            currencyCode,
+            locale,
+        };
+    });
+    return props.children({
+        presetVariants,
+    });
+}
+/**
+ * Headless component for displaying the current gift card price based on selected variant.
+ * The price automatically updates when the variant selection changes.
+ * Use the Money component for formatting the price and value amounts.
+ *
+ * Price vs Value:
+ * - `price` - What the customer pays (raw number)
+ * - `value` - What the gift card is worth (raw number)
+ * - `hasDiscount` - `true` when `price < value`, indicating a discounted variant
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.CurrentPrice>
+ *   {({ price, value, hasDiscount, currencyCode }) => (
+ *     <div className="flex items-baseline gap-3">
+ *       {hasDiscount && (
+ *         <Money money={{ amount: value, currency: currencyCode }} className="line-through text-muted" />
+ *       )}
+ *       <Money money={{ amount: price, currency: currencyCode }} className="text-4xl font-bold" />
+ *     </div>
+ *   )}
+ * </GiftCard.CurrentPrice>
+ * ```
+ */
+export function CurrentPrice(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const currentPriceData = checkoutService.currentPriceData.get();
+    const currencyCode = giftCardService.currencyCode.get();
+    const locale = giftCardService.locale.get();
+    // Return null if no price data available
+    if (!currentPriceData) {
+        return null;
+    }
+    return props.children({
+        price: currentPriceData.price,
+        value: currentPriceData.value,
+        hasDiscount: currentPriceData.hasDiscount,
+        currencyCode,
+        locale,
+    });
+}
+/**
+ * Headless component for triggering custom amount selection.
+ * Only renders when custom variant is enabled for the gift card product.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.CustomVariantTrigger>
+ *   {({ isSelected, onClick }) => (
+ *     <button
+ *       onClick={onClick}
+ *       data-selected={isSelected}
+ *       className="px-4 py-2 border-2 border-dashed rounded-xl"
+ *     >
+ *       Other amount
+ *     </button>
+ *   )}
+ * </GiftCard.CustomVariantTrigger>
+ * ```
+ */
+export function CustomVariantTrigger(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const product = giftCardService.product.get();
+    const selectedVariantId = checkoutService.selectedVariantId.get();
+    // Don't render if product doesn't have custom variant enabled
+    const hasCustomVariant = Boolean(product?.customVariant);
+    if (!hasCustomVariant) {
+        return null;
+    }
+    const isSelected = selectedVariantId === CUSTOM_VARIANT_ID;
+    const onClick = () => {
+        checkoutService.setVariant(CUSTOM_VARIANT_ID);
+    };
+    return props.children({
+        isSelected,
+        onClick,
+    });
+}
+/**
+ * Headless component for custom gift card amount input.
+ * Only renders when custom variant is selected.
+ * The custom amount affects the currentPrice value displayed by GiftCard.CurrentPrice.
+ *
+ * Validation:
+ * - Amount must be within min/max range defined by the product's custom variant
+ * - isValid will be false if amount is outside the allowed range
+ * - showError flag indicates whether validation errors should be displayed (set to true after form submission)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.CustomAmountInput>
+ *   {({ value, setValue, min, max, isValid, showError, isVisible, currencyCode }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Enter amount ({currencyCode})</label>
+ *         <input
+ *           type="number"
+ *           value={value || ''}
+ *           onChange={(e) => setValue(parseFloat(e.target.value) || 0)}
+ *           min={min ?? undefined}
+ *           max={max ?? undefined}
+ *           data-invalid={showError && !isValid}
+ *         />
+ *         {showError && !isValid && min && max && (
+ *           <p className="text-red-500">
+ *             Enter an amount between {min} and {max}
+ *           </p>
+ *         )}
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.CustomAmountInput>
+ * ```
+ */
+export function CustomAmountInput(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const selectedVariantId = checkoutService.selectedVariantId.get();
+    const customAmount = checkoutService.customAmount.get();
+    const isCustomAmountValid = checkoutService.isCustomAmountValid.get();
+    const customAmountData = checkoutService.customAmountData.get();
+    const showErrors = checkoutService.showErrors.get();
+    const currencyCode = giftCardService.currencyCode.get();
+    const currencySymbol = getCurrencySymbol(currencyCode);
+    const isVisible = selectedVariantId === CUSTOM_VARIANT_ID;
+    return props.children({
+        value: customAmount,
+        setValue: checkoutService.setCustomAmount,
+        min: customAmountData.min,
+        max: customAmountData.max,
+        isValid: isCustomAmountValid,
+        showError: showErrors,
+        isVisible,
+        currencyCode,
+        currencySymbol,
+    });
+}
+/**
+ * Headless component for gift card quantity selection.
+ * Exposes quantity state and setter to allow building custom quantity UIs.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.Quantity>
+ *   {({ quantity, setQuantity }) => (
+ *     <div className="flex items-center gap-2">
+ *       <button onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 1}>-</button>
+ *       <span>{quantity}</span>
+ *       <button onClick={() => setQuantity(quantity + 1)}>+</button>
+ *     </div>
+ *   )}
+ * </GiftCard.Quantity>
+ * ```
+ */
+export function Quantity(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const quantity = checkoutService.quantity.get();
+    return props.children({
+        quantity,
+        setQuantity: checkoutService.setQuantity,
+    });
+}
+/**
+ * Headless component for toggling between gift and self-purchase modes.
+ * When isGift is true, the purchase is "for someone else" (shows recipient form).
+ * When isGift is false, the purchase is "for myself" (hides recipient form).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.GiftToggle>
+ *   {({ isGift, setIsGift }) => (
+ *     <div className="flex gap-2">
+ *       <button
+ *         onClick={() => setIsGift(true)}
+ *         data-selected={isGift}
+ *       >
+ *         For someone else
+ *       </button>
+ *       <button
+ *         onClick={() => setIsGift(false)}
+ *         data-selected={!isGift}
+ *       >
+ *         For myself
+ *       </button>
+ *     </div>
+ *   )}
+ * </GiftCard.GiftToggle>
+ * ```
+ */
+export function GiftToggle(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const isGift = checkoutService.isGift.get();
+    return props.children({
+        isGift,
+        setIsGift: checkoutService.setIsGift,
+    });
+}
+/**
+ * Headless component for recipient email input.
+ * Exposes email state, setter, validation state, and error display flag.
+ *
+ * The `showError` flag is controlled by the checkout service and indicates
+ * whether validation errors should be displayed (typically set to true after
+ * a form submission attempt).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientEmail>
+ *   {({ value, setValue, isValid, showError }) => (
+ *     <div className="space-y-2">
+ *       <label>Recipient email</label>
+ *       <input
+ *         type="email"
+ *         value={value}
+ *         onChange={(e) => setValue(e.target.value)}
+ *         data-invalid={showError && !isValid}
+ *       />
+ *       {showError && !isValid && (
+ *         <p className="text-red-500">Please enter a valid email</p>
+ *       )}
+ *     </div>
+ *   )}
+ * </GiftCard.RecipientEmail>
+ * ```
+ */
+export function RecipientEmail(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const value = checkoutService.recipientEmail.get();
+    const isValid = checkoutService.isRecipientEmailValid.get();
+    const showError = checkoutService.showErrors.get();
+    const isGift = checkoutService.isGift.get();
+    return props.children({
+        value,
+        setValue: checkoutService.setRecipientEmail,
+        isValid,
+        showError,
+        isVisible: isGift,
+    });
+}
+/**
+ * Headless component for recipient name input.
+ * Exposes name state and setter.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientName>
+ *   {({ value, setValue, isVisible }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Recipient name (optional)</label>
+ *         <input
+ *           type="text"
+ *           value={value}
+ *           onChange={(e) => setValue(e.target.value)}
+ *         />
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientName>
+ * ```
+ */
+export function RecipientName(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const value = checkoutService.recipientName.get();
+    const isGift = checkoutService.isGift.get();
+    return props.children({
+        value,
+        setValue: checkoutService.setRecipientName,
+        isVisible: isGift,
+    });
+}
+/**
+ * Headless component for recipient delivery date input.
+ * Exposes date state, setter, and formatted values.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientDate>
+ *   {({ value, formattedValue, inputValue, setValue, isVisible }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Delivery date</label>
+ *         <input
+ *           type="date"
+ *           value={inputValue}
+ *           onChange={(e) => setValue(new Date(e.target.value))}
+ *         />
+ *         <p>Selected: {formattedValue}</p>
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientDate>
+ * ```
+ */
+export function RecipientDate(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const value = checkoutService.deliverAt.get();
+    const isGift = checkoutService.isGift.get();
+    const locale = giftCardService.locale.get();
+    return props.children({
+        value,
+        formattedValue: formatDate(value, locale),
+        inputValue: formatDateForInput(value),
+        setValue: checkoutService.setDeliverAt,
+        isVisible: isGift,
+    });
+}
+/**
+ * Headless component for recipient message textarea.
+ * Exposes message state and setter.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientMessage>
+ *   {({ value, setValue, isVisible }) =>
+ *     isVisible && (
+ *       <div className="space-y-2">
+ *         <label>Personal message (optional)</label>
+ *         <textarea
+ *           value={value}
+ *           onChange={(e) => setValue(e.target.value)}
+ *           rows={4}
+ *         />
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientMessage>
+ * ```
+ */
+export function RecipientMessage(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const value = checkoutService.recipientMessage.get();
+    const isGift = checkoutService.isGift.get();
+    return props.children({
+        value,
+        setValue: checkoutService.setRecipientMessage,
+        isVisible: isGift,
+    });
+}
+/**
+ * Headless component for recipient form that combines all recipient fields.
+ * Provides consolidated access to email, name, date, and message fields.
+ * Only visible when isGift is true (purchasing for someone else).
+ *
+ * This is a convenience component that aggregates all recipient field data.
+ * For granular control, use the individual RecipientEmail, RecipientName,
+ * RecipientDate, and RecipientMessage components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <GiftCard.RecipientForm>
+ *   {({ isVisible, showErrors, email, name, deliverAt, message }) =>
+ *     isVisible && (
+ *       <div className="space-y-4">
+ *         <div>
+ *           <label>Recipient email</label>
+ *           <input
+ *             type="email"
+ *             value={email.value}
+ *             onChange={(e) => email.setValue(e.target.value)}
+ *             data-invalid={showErrors && !email.isValid}
+ *           />
+ *           {showErrors && !email.isValid && <p>Please enter a valid email</p>}
+ *         </div>
+ *         <div>
+ *           <label>Recipient name</label>
+ *           <input
+ *             type="text"
+ *             value={name.value}
+ *             onChange={(e) => name.setValue(e.target.value)}
+ *           />
+ *         </div>
+ *         <div>
+ *           <label>Delivery date</label>
+ *           <input
+ *             type="date"
+ *             value={deliverAt.inputValue}
+ *             onChange={(e) => deliverAt.setValue(new Date(e.target.value))}
+ *           />
+ *         </div>
+ *         <div>
+ *           <label>Message</label>
+ *           <textarea
+ *             value={message.value}
+ *             onChange={(e) => message.setValue(e.target.value)}
+ *           />
+ *         </div>
+ *       </div>
+ *     )
+ *   }
+ * </GiftCard.RecipientForm>
+ * ```
+ */
+export function RecipientForm(props) {
+    const giftCardService = useService(GiftCardServiceDefinition);
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    const isGift = checkoutService.isGift.get();
+    const showErrors = checkoutService.showErrors.get();
+    const locale = giftCardService.locale.get();
+    // Email data
+    const emailValue = checkoutService.recipientEmail.get();
+    const isEmailValid = checkoutService.isRecipientEmailValid.get();
+    // Name data
+    const nameValue = checkoutService.recipientName.get();
+    // Date data
+    const dateValue = checkoutService.deliverAt.get();
+    // Message data
+    const messageValue = checkoutService.recipientMessage.get();
+    return props.children({
+        isVisible: isGift,
+        showErrors,
+        email: {
+            value: emailValue,
+            setValue: checkoutService.setRecipientEmail,
+            isValid: isEmailValid,
+        },
+        name: {
+            value: nameValue,
+            setValue: checkoutService.setRecipientName,
+        },
+        deliverAt: {
+            value: dateValue,
+            formattedValue: formatDate(dateValue, locale),
+            inputValue: formatDateForInput(dateValue),
+            setValue: checkoutService.setDeliverAt,
+        },
+        message: {
+            value: messageValue,
+            setValue: checkoutService.setRecipientMessage,
+        },
+    });
+}
+/**
+ * Headless component that exposes cart action data via render props.
+ * Provides lineItems, validation state, and validateAndShowErrors function.
+ *
+ * The loading state is handled by Commerce.Actions.AddToCart / CurrentCartService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreGiftCard.Actions>
+ *   {({ lineItems, validateAndShowErrors }) => (
+ *     <Commerce.Actions.AddToCart
+ *       lineItems={lineItems}
+ *       onClick={() => {
+ *         if (!validateAndShowErrors()) return; // Validation failed, errors shown
+ *       }}
+ *     />
+ *   )}
+ * </CoreGiftCard.Actions>
+ * ```
+ */
+export function Actions(props) {
+    const checkoutService = useService(GiftCardCheckoutServiceDefinition);
+    return props.children({
+        lineItems: checkoutService.lineItems.get(),
+        validateAndShowErrors: checkoutService.validateAndShowErrors,
+    });
+}