@commercelayer/app-elements 1.1.0 → 1.2.0

package/dist/ui/forms/InputCheckboxGroup/InputCheckboxGroupItem.d.ts

@@ -0,0 +1,55 @@
+import { type InputCheckboxProps } from '../../forms/InputCheckbox';
+import { type ComponentProps } from 'react';
+export interface InputCheckboxGroupOption extends Pick<InputCheckboxProps, 'icon' | 'checked'> {
+    /**
+     * Input name, will be used to set the html name for checkbox and the quantity inputs.
+     * If not provided, the value will be used instead.
+     */
+    name?: string;
+    /**
+     * Item identifier, must be unique and will be used for the onChange callback.
+     */
+    value: string;
+    /**
+     * Item content to be displayed in the central section of the row.
+     */
+    content: React.ReactNode;
+    /**
+     * Quantity range to be used in the InputSpinner.
+     * If not provided the quantity input spinner will not be displayed.
+     */
+    quantity?: {
+        min: number;
+        max: number;
+    };
+}
+export interface Props extends InputCheckboxGroupOption {
+    /**
+     * Callback triggered when the user checks/unchecks an option or changes the quantity.
+     * New quantity is returned only if `quantity` is part of the option (`InputCheckboxGroupOption`).
+     */
+    onChange: (value: string, newQuantity?: number) => void;
+    /**
+     * Quantity to be used as default value for the InputSpinner.
+     */
+    defaultQuantity?: number;
+}
+/**
+ * Internal component to render the single item of the InputCheckboxGroup.
+ */
+export declare const InputCheckboxGroupItem: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    onChange: (value: string, newQuantity?: number) => void;
+    defaultQuantity?: number | undefined;
+    name?: string | undefined;
+    value: string;
+    content: React.ReactNode;
+    quantity?: {
+        min: number;
+        max: number;
+    } | undefined;
+    icon?: JSX.Element | undefined;
+    checked?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export type InputCheckboxGroupItemProps = ComponentProps<typeof InputCheckboxGroupItem>;

package/dist/ui/forms/InputCheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { HookedInputCheckboxGroup, type HookedInputCheckboxGroupProps } from './HookedInputCheckboxGroup';
+export { InputCheckboxGroup, type InputCheckboxGroupProps } from './InputCheckboxGroup';

package/dist/ui/forms/InputCheckboxGroup/reducer.d.ts

@@ -0,0 +1,25 @@
+import { type SelectedItem } from './InputCheckboxGroup';
+import { type InputCheckboxGroupOption } from './InputCheckboxGroupItem';
+export type InternalState = Array<{
+    value: string;
+    quantity?: number;
+    isSelected: boolean;
+}>;
+type Action = {
+    type: 'updateQuantity';
+    payload: {
+        value: string;
+        quantity: number;
+    };
+} | {
+    type: 'toggleSelection';
+    payload: {
+        value: string;
+    };
+};
+export declare const reducer: (state: InternalState, action: Action) => InternalState;
+export declare function makeInitialState({ options, defaultValues }: {
+    options: InputCheckboxGroupOption[];
+    defaultValues: SelectedItem[];
+}): InternalState;
+export {};

package/dist/ui/forms/InputResourceGroup/utils.d.ts

@@ -1,3 +1,5 @@
+import { type CommerceLayerClient } from '@commercelayer/sdk';
+import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 export declare function useToggleCheckboxValues(defaultValues: string[]): {
     values: string[];
     toggleValue: (value: string) => void;
@@ -18,3 +20,17 @@ export declare function computeLabelWithSelected({ label, selectedCount, totalCo
     selectedCount: number;
     totalCount?: number;
 }): string;
+type Resource = Awaited<ReturnType<CommerceLayerClient[ListableResourceType]['list']>>[number];
+/**
+ * Helper to prepare the options for the checkbox group or mocked info to be used for skeleton.
+ */
+export declare function prepareCheckboxItemOrMock({ resource, isLoading, fieldForLabel, fieldForValue }: {
+    resource?: Resource;
+    isLoading?: boolean;
+    fieldForValue: string;
+    fieldForLabel: string;
+}): {
+    value: string;
+    label: string;
+};
+export {};

package/dist/ui/resources/ResourceLineItems/ResourceLineItems.d.ts

@@ -1,35 +1,18 @@
-/// <reference types="react" />
 import type { LineItem, ParcelLineItem, ReturnLineItem, StockLineItem } from '@commercelayer/sdk';
+import { type ComponentProps } from 'react';
 type Item = LineItem | ParcelLineItem | StockLineItem | ReturnLineItem;
-export interface ResourceLineItemsProps {
-    /**
-     * Array of supported line items to be rendered.
-     */
-    items: Item[];
-    /**
-     * Optional size of rendered items structure. This setting is going to change font size, spacings, icon size in a proportional way.
-     */
-    size?: 'small' | 'normal';
-    /**
-     * Optional footer slot to add bottom elements / actions.
-     */
-    footer?: React.ReactNode;
-    /**
-     * Optional setting to define the visibility of line item Edit link.
-     */
-    editable?: boolean;
-    /**
-     * Optional onChange function to define line item Edit callback.
-     */
-    onChange?: () => void;
-}
+export type ResourceLineItemsProps = ComponentProps<typeof ResourceLineItems>;
 /**
  * This component renders a list of line items taking care of showing the right informations and structure depending of provided line item type.
  */
 export declare const ResourceLineItems: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     items: Item[];
     size?: "small" | "normal" | undefined;
-    footer?: React.ReactNode;
+    footer?: {
+        key: string;
+        element: React.ReactNode;
+        fullWidth?: boolean | undefined;
+    }[] | undefined;
     editable?: boolean | undefined;
     onChange?: (() => void) | undefined;
     delayMs?: number | undefined;

package/dist/ui/resources/ResourceLineItems/ResourceLineItems.mocks.d.ts

@@ -338,10 +338,11 @@ export declare const presetLineItems: {
         reference_origin: null;
         metadata: {};
     };
-    percentageDiscountPromotionSkuList: {
+    percentageDiscountPromotionCoupon: {
         type: "line_items";
         id: string;
         sku_code: null;
+        coupon_code: string;
         bundle_code: null;
         quantity: number;
         currency_code: string;
@@ -373,7 +374,7 @@ export declare const presetLineItems: {
         reference_origin: null;
         metadata: {};
     };
-    percentageDiscountPromotionCoupon: {
+    freeShippingPromotion: {
         type: "line_items";
         id: string;
         sku_code: null;
@@ -400,7 +401,7 @@ export declare const presetLineItems: {
         discount_breakdown: {};
         tax_rate: number;
         tax_breakdown: {};
-        item_type: "percentage_discount_promotions";
+        item_type: "free_shipping_promotions";
         frequency: null;
         created_at: string;
         updated_at: string;
@@ -408,7 +409,7 @@ export declare const presetLineItems: {
         reference_origin: null;
         metadata: {};
     };
-    freeShippingPromotion: {
+    paymentMethod: {
         type: "line_items";
         id: string;
         sku_code: null;
@@ -435,8 +436,45 @@ export declare const presetLineItems: {
         discount_breakdown: {};
         tax_rate: number;
         tax_breakdown: {};
-        item_type: "free_shipping_promotions";
+        item_type: "payment_methods";
+        frequency: null;
+        coupon_code: null;
+        created_at: string;
+        updated_at: string;
+        reference: null;
+        reference_origin: null;
+        metadata: {};
+    };
+    shipment: {
+        type: "line_items";
+        id: string;
+        sku_code: null;
+        bundle_code: null;
+        quantity: number;
+        currency_code: string;
+        unit_amount_cents: number;
+        unit_amount_float: number;
+        formatted_unit_amount: string;
+        options_amount_cents: number;
+        options_amount_float: number;
+        formatted_options_amount: string;
+        discount_cents: number;
+        discount_float: number;
+        formatted_discount: string;
+        total_amount_cents: number;
+        total_amount_float: number;
+        formatted_total_amount: string;
+        tax_amount_cents: number;
+        tax_amount_float: number;
+        formatted_tax_amount: string;
+        name: string;
+        image_url: null;
+        discount_breakdown: {};
+        tax_rate: number;
+        tax_breakdown: {};
+        item_type: "shipments";
         frequency: null;
+        coupon_code: null;
         created_at: string;
         updated_at: string;
         reference: null;

package/dist/ui/resources/ResourceOrderSummary/AddCouponOverlay.d.ts

@@ -0,0 +1,6 @@
+import type { Order } from '@commercelayer/sdk';
+export declare function useAddCouponOverlay(order: Order, onChange?: () => void): {
+    close: () => void;
+    open: () => void;
+    Overlay: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/ui/resources/ResourceOrderSummary/AdjustTotalOverlay.d.ts

@@ -0,0 +1,6 @@
+import type { Order } from '@commercelayer/sdk';
+export declare function useAdjustTotalOverlay(order: Order, onChange?: () => void): {
+    close: () => void;
+    open: () => void;
+    Overlay: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/ui/resources/ResourceOrderSummary/DeleteCouponButton.d.ts

@@ -0,0 +1,6 @@
+export declare const DeleteCouponButton: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    order: import("@commercelayer/sdk/lib/cjs/resources/orders").Order;
+    onChange?: (() => void) | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;

package/dist/ui/resources/{ResourceOrderSummary.d.ts → ResourceOrderSummary/ResourceOrderSummary.d.ts}

@@ -1,13 +1,14 @@
-/// <reference types="react" />
-import { type ActionButtonsProps } from '../composite/ActionButtons';
+import { type ActionButtonsProps } from '../../composite/ActionButtons';
 import type { Order } from '@commercelayer/sdk';
-export interface ResourceOrderSummaryProps {
+import { type ComponentProps } from 'react';
+export interface Props {
     editable?: boolean;
     onChange?: () => void;
     footerActions?: ActionButtonsProps['actions'];
     order: Order;
 }
-export declare const ResourceOrderSummary: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+export type ResourceOrderSummaryProps = ComponentProps<typeof ResourceOrderSummary>;
+export declare const ResourceOrderSummary: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     editable?: boolean | undefined;
     onChange?: (() => void) | undefined;
     footerActions?: {

package/dist/ui/resources/ResourceOrderSummary/index.d.ts

@@ -0,0 +1 @@
+export { ResourceOrderSummary, type ResourceOrderSummaryProps } from './ResourceOrderSummary';

package/dist/ui/resources/ResourceOrderSummary/utils.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { Order } from '@commercelayer/sdk';
+interface TotalRowProps {
+    /** Displayed label */
+    label: string;
+    /** Formatted amount */
+    formattedAmount: string | undefined | null;
+    /** Set font-weight to bold */
+    bold?: boolean;
+    /**
+     * When `true` the row will be always  printed.
+     * @default false
+     */
+    force?: boolean;
+}
+export declare function renderTotalRow({ label, value, bold }: {
+    label: string;
+    value: React.ReactNode;
+    bold?: boolean;
+}): JSX.Element;
+export declare function renderTotalRowAmount({ label, formattedAmount, force, bold }: TotalRowProps): JSX.Element | null;
+export declare function renderDiscounts(order: Order): JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "license": "MIT",
   "files": [

package/dist/ui/forms/InputCheckboxGroup.d.ts

@@ -1,56 +0,0 @@
-import { type ReactNode } from 'react';
-interface OptionItem {
-    /**
-     * Input name, will be used to set the html name for checkbox and the quantity inputs
-     * If not provided, the value will be used instead
-     */
-    name?: string;
-    /**
-     * Item identifier, must be unique and will be used for the onChange callback
-     */
-    value: string;
-    /**
-     * Item content to be displayed in the central section of the row
-     */
-    content: ReactNode;
-    /**
-     * Quantity range to be used in the InputSpinner
-     */
-    quantity: {
-        min: number;
-        max: number;
-    };
-}
-interface SelectedItem {
-    /**
-     * Item identifier, should be one of the options
-     */
-    value: string;
-    /**
-     * Selected quantity for the checked item
-     */
-    quantity: number;
-}
-export interface InputCheckboxGroupProps {
-    /**
-     * Text to be displayed on top of the list
-     */
-    title?: string;
-    /**
-     * list of options to render as checkboxes with quantity input
-     */
-    options: OptionItem[];
-    /**
-     * pre-selected options
-     */
-    defaultValues?: SelectedItem[];
-    /**
-     * Callback triggered when the user checks/unchecks an option or changes the quantity
-     */
-    onChange: (selected: SelectedItem[]) => void;
-}
-export declare function InputCheckboxGroup({ options, defaultValues, onChange, title, ...rest }: InputCheckboxGroupProps): JSX.Element;
-export declare namespace InputCheckboxGroup {
-    var displayName: string;
-}
-export {};

package/dist/ui/forms/InputResourceGroup/Checkbox.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { type InputCheckboxProps } from '../../forms/InputCheckbox/InputCheckbox';
-import { type CommerceLayerClient } from '@commercelayer/sdk';
-import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
-export interface CheckboxItem {
-    value: string;
-    label: string;
-}
-interface CheckboxProps extends Pick<InputCheckboxProps, 'checked' | 'onChange'> {
-    item: CheckboxItem;
-    showIcon?: boolean;
-    hasBottomMargin?: boolean;
-}
-export declare function Checkbox({ item, showIcon, checked, onChange }: CheckboxProps): JSX.Element;
-type Resource = Awaited<ReturnType<CommerceLayerClient[ListableResourceType]['list']>>[number];
-export declare function prepareCheckboxItemOrMock({ resource, isLoading, fieldForLabel, fieldForValue }: {
-    resource?: Resource;
-    isLoading?: boolean;
-    fieldForValue: string;
-    fieldForLabel: string;
-}): CheckboxItem;
-export {};