@shipengine/elements 0.16.0 → 0.17.2

package/components/add-funds-form/add-funds-form.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type AddFundsFormProvider = {
+    isCustomAmount?: boolean;
+    isSubmitted?: boolean;
+    isSubmitting?: boolean;
+    isValid?: boolean;
+    selectedAmount?: number;
+    submit?: () => void;
+};
+export type AddFundsFormProps = {
+    carrierId: string;
+    children?: (addFundsForm: AddFundsFormProvider) => React.ReactElement;
+    minimumAmount?: number;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+};
+/**
+ * Form for adding funds to a carrier's account.
+ *
+ * If a render child is provided, external control is assumed and the cancel / submit buttons are hidden.
+ */
+export declare const AddFundsForm: ({ carrierId, children, onCancel, onSuccess, minimumAmount, }: AddFundsFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/add-funds-form/add-funds-form.styles.d.ts

@@ -0,0 +1,6 @@
+type GetStylesProps = {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+export declare const getStyles: ({ isDisabled, isSelected }?: GetStylesProps) => Record<"chip" | "chipList" | "fundsInput", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;
+export {};

package/components/{organisms/manual-funding-form/manual-funding-schema.d.ts → add-funds-form/add-funds-schema.d.ts}

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export declare const manualFundingSchema: z.ZodObject<{
+export declare const getAddFundsSchema: (minimumAmount?: number) => z.ZodEffects<z.ZodObject<{
     funds: z.ZodObject<z.extendShape<{
         amount: z.ZodNumber;
         currency: z.ZodNativeEnum<typeof import("@shipengine/api").Currency>;
@@ -22,6 +22,16 @@ export declare const manualFundingSchema: z.ZodObject<{
         amount: number;
         currency: import("@shipengine/api").Currency;
     };
+}>, {
+    amount: number;
+    currency: import("@shipengine/api").Currency;
+}, {
+    funds: {
+        amount: number;
+        currency: import("@shipengine/api").Currency;
+    };
 }>;
-export type ManualFundingFormFields = z.input<typeof manualFundingSchema>;
-export type ManualFundingFormPayload = z.output<typeof manualFundingSchema>;
+type AddFundsFormSchema = ReturnType<typeof getAddFundsSchema>;
+export type AddFundsFormFields = z.input<AddFundsFormSchema>;
+export type AddFundsFormPayload = z.output<AddFundsFormSchema>;
+export {};

package/components/add-funds-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./add-funds-form";
+export * from "./add-funds-schema";

package/components/auto-funding-form/auto-funding-form.d.ts

@@ -0,0 +1,8 @@
+export type AutoFundingFormProps = {
+    carrierId: string;
+};
+/**
+ * This form that allows users to enable or disable auto funding, and
+ * configure auto funding settings in ShipEngine API.
+ */
+export declare const AutoFundingForm: ({ carrierId }: AutoFundingFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/auto-funding-form/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./auto-funding-form";
+export * from "./auto-funding-schema";

package/components/carrier-balance/carrier-balance.d.ts

@@ -0,0 +1,4 @@
+export type CarrierBalanceProps = {
+    carrierId: string;
+};
+export declare const CarrierBalance: ({ carrierId }: CarrierBalanceProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/carrier-balance/carrier-balance.styles.d.ts

@@ -0,0 +1 @@
+export declare const getStyles: (balance?: number) => Record<"balanceText", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/carrier-balance/index.d.ts

@@ -0,0 +1 @@
+export * from "./carrier-balance";

package/components/field/create-field-controller.d.ts

@@ -10,6 +10,7 @@ export type FieldControllerProps<NP, TFieldValues extends FieldValues = FieldVal
     displayErrors?: boolean;
     displayLabel?: boolean;
     errors?: string[];
+    hint?: string;
     inputOnly?: boolean;
     isOptional?: boolean;
     label: string;
@@ -19,7 +20,7 @@ export type FieldControllerProps<NP, TFieldValues extends FieldValues = FieldVal
 type FieldControllerOptions = {
     inputOnly?: boolean;
 };
-export declare const createFieldController: <P>(options?: FieldControllerOptions) => <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ children, control, defaultValue, displayErrors, displayLabel, errors: errorsProp, inputOnly, isOptional, label, labelWeight, name, nativeLabel, rules, shouldUnregister, subLabel, ...formInputProps }: FieldControllerProps<P, TFieldValues, TName>) => JSX.Element;
+export declare const createFieldController: <P>(options?: FieldControllerOptions) => <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ children, control, defaultValue, displayErrors, displayLabel, errors: errorsProp, hint, inputOnly, isOptional, label, labelWeight, name, nativeLabel, rules, shouldUnregister, subLabel, ...formInputProps }: FieldControllerProps<P, TFieldValues, TName>) => JSX.Element;
 export type ControlledFieldProps = Parameters<ControlledField>[0];
 export type ControlledField<NP = object, CP = object, OK extends string = ""> = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(fieldProps: Omit<FieldControllerProps<NP, TFieldValues, TName>, "children" | OK> & CP) => JSX.Element;
 export {};

package/components/fund-and-purchase/fund-and-purchase.d.ts

@@ -0,0 +1,15 @@
+export type FundAndPurchaseProps = {
+    carrierId?: string;
+    className?: string;
+    disabled?: boolean;
+    isFundingRequired: boolean;
+    onPurchase: () => void;
+    onSave: () => Promise<void>;
+    purchaseAmount: number;
+};
+/**
+ * Fund and Purchase handles the label purchase submission UX, ensuring that a user
+ * has the necessary funds available and can add them if not. It allows a single button
+ * to submit the funding form followed by the purchase form.
+ */
+export declare const FundAndPurchase: ({ carrierId, className, disabled, isFundingRequired, onSave, purchaseAmount, onPurchase, }: FundAndPurchaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/fund-and-purchase/fund-and-purchase.styles.d.ts

@@ -0,0 +1 @@
+export declare const getStyles: (isCustomAmount?: boolean) => Record<"balanceText" | "container" | "formExtension" | "saveRateButton", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/fund-and-purchase/index.d.ts

@@ -0,0 +1 @@
+export * from "./fund-and-purchase";

package/components/index.d.ts

@@ -1,12 +1,21 @@
 export * as Templates from "./templates";
 export * from "./accordion";
+export * from "./add-funds-form";
+export * from "./auto-funding-form";
 export * from "./button-group";
+export * from "./carrier-balance";
 export * from "./cube";
 export * from "./error-boundary";
 export * from "./field";
 export * from "./field-label";
 export * from "./form-portal";
+export * from "./fund-and-purchase";
+export * from "./inline-label";
 export * from "./items-breakdown";
+export * from "./link-action";
 export * from "./loader";
+export * from "./manage-funding";
 export * from "./portal";
 export * from "./spacer";
+export * from "./spread";
+export * from "./story-notes";

package/components/inline-label/index.d.ts

@@ -0,0 +1 @@
+export * from "./inline-label";

package/components/inline-label/inline-label.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type InlineLabelProps = {
+    children: React.ReactElement;
+    label: string;
+};
+export declare const InlineLabel: ({ children, label }: InlineLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/items-breakdown/items-breakdown.d.ts

@@ -6,7 +6,7 @@ export type Item = {
     subDetail?: string;
     subDetailValue?: SE.Money;
     totalValue?: SE.Money;
-    value: SE.Money;
+    value?: SE.Money;
 };
 export type ItemsBreakdownProps = {
     items: Item[];

package/components/link-action/index.d.ts

@@ -0,0 +1 @@
+export * from "./link-action";

package/components/link-action/link-action.d.ts

@@ -0,0 +1,12 @@
+import { IconNames } from "@packlink/brands";
+import { ILinkProps } from "@packlink/giger";
+declare const icons: {
+    readonly add: IconNames.ADD;
+    readonly download: IconNames.DOWNLOAD;
+};
+export type LinkActionProps = {
+    icon?: keyof typeof icons;
+    title: string;
+} & ILinkProps;
+export declare const LinkAction: ({ css, icon, isDisabled, isLoading, title, ...props }: LinkActionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/components/manage-funding/manage-funding.d.ts

@@ -0,0 +1,4 @@
+export type ManageFundingProps = {
+    carrierId: string;
+};
+export declare const ManageFunding: ({ carrierId }: ManageFundingProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/spread/index.d.ts

@@ -0,0 +1 @@
+export * from "./spread";

package/components/spread/spread.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type SpreadProps = {
+    children: [React.ReactNode, React.ReactNode];
+};
+export declare const Spread: ({ children }: SpreadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/story-notes/index.d.ts

@@ -0,0 +1 @@
+export * from "./story-notes";

package/components/story-notes/story-notes.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type StoryNotesProps = {
+    children: React.ReactNode;
+    notes: string[];
+};
+/**
+ * For relevant notes about Storybook stories
+ *
+ * Stopgap until we setup https://storybook.js.org/addons/@storybook/addon-docs
+ */
+export declare const StoryNotes: ({ children, notes }: StoryNotesProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/templates/completion-page/completion-page.d.ts

@@ -0,0 +1,4 @@
+export type CompletionPageProps = {
+    onContinue: () => void;
+};
+export declare const CompletionPage: ({ onContinue }: CompletionPageProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/templates/completion-page/index.d.ts

@@ -0,0 +1 @@
+export * from "./completion-page";

package/components/templates/index.d.ts

@@ -6,16 +6,16 @@ export * from "./address-preference-display";
 export * from "./carrier-recovery-form";
 export * from "./carrier-terms-form";
 export * from "./customs-item-form";
-export * from "./funding-methods";
 export * from "./label";
 export * from "./landing-page";
 export * from "./list-carriers";
 export * from "./manage-warehouses";
 export * from "./onboarding";
 export * from "./rate-form";
-export * from "./sales-order";
+export * from "./suspend-sales-order";
 export * from "./shipment-form";
 export * from "./shipment";
+export * from "./suspend-shipment";
 export * from "./warehouse-form";
 export * from "./void-label";
 export * from "./wallet-form";

package/components/templates/list-carriers-row/list-carriers-row.styles.d.ts

@@ -1 +1 @@
-export declare const styles: Record<"carrierTypography" | "container" | "loadingButtonContainer" | "logoContainer" | "rowContainer" | "statusChipConnected" | "statusChipNotConnected", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;
+export declare const getStyles: (isConnected?: boolean) => Record<"connectButton" | "container" | "logoContainer" | "rowContainer", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/templates/rate-form/rate-form.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: Record<"fundAndPurchase" | "ratesInterstitial" | "showMoreOrLessRatesButton", import("@emotion/serialize").Interpolation<import("@packlink/brands/dist/js/theme/Theme").Theme>>;

package/components/templates/shipment-form/shipment-form.d.ts

@@ -30,7 +30,7 @@ export type ShipmentFormProps = {
     onSubmitParseShipTo: (payload: AddressParserPayload) => Promise<SE.AddressExtraction | undefined>;
     onToggleAddressPreferenceDisclosure?: AddressPreferenceDisplayProps["onToggleDisclosure"];
     onUpdateCustoms?: (customs: SE.Customs) => Promise<SE.SalesOrderShipment | undefined>;
-    salesOrder: SE.SalesOrder;
+    salesOrder?: SE.SalesOrder;
     shipment?: SE.SalesOrderShipment;
     shippingPresets?: UseShippingPresetsOptionsProps;
     warehouseId?: string;

package/components/templates/suspend-sales-order/index.d.ts

@@ -0,0 +1 @@
+export * from "./suspend-sales-order";

package/components/templates/suspend-sales-order/suspend-sales-order.d.ts

@@ -0,0 +1,8 @@
+import { WithChildrenCommonProps } from "@packlink/giger";
+import { SE } from "@shipengine/api";
+export type SuspendSalesOrderProps = WithChildrenCommonProps<{
+    errors?: SE.CodedError[];
+    isLoading?: boolean;
+    salesOrder?: SE.SalesOrder;
+}>;
+export declare const SuspendSalesOrder: ({ children, errors, isLoading, salesOrder, }: SuspendSalesOrderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/templates/suspend-shipment/index.d.ts

@@ -0,0 +1 @@
+export * from "./suspend-shipment";

package/components/templates/suspend-shipment/suspend-shipment.d.ts

@@ -0,0 +1,8 @@
+import { WithChildrenCommonProps } from "@packlink/giger";
+import { SE } from "@shipengine/api";
+export type SuspendShipmentProps = WithChildrenCommonProps<{
+    errors?: SE.CodedError[];
+    isLoading?: boolean;
+    shipment?: SE.SalesOrderShipment;
+}>;
+export declare const SuspendShipment: ({ children, errors, isLoading, shipment, }: SuspendShipmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/elements/components/configure-shipment/configure-shipment.d.ts

@@ -24,7 +24,7 @@ export type ConfigureShipmentProps = {
     onShipmentUpdated: UseShipmentFormProps["onShipmentUpdated"];
     onToggleAddressPreferenceDisclosure?: Templates.ShipmentFormProps["onToggleAddressPreferenceDisclosure"];
     printLabelLayout?: UseRatesFormProps["printLabelLayout"];
-    salesOrder: SE.SalesOrder;
+    salesOrder?: SE.SalesOrder;
     shipment?: SE.SalesOrderShipment;
     shippingPresets?: UseShippingPresetsOptionsProps;
     warehouseId?: string;

package/elements/components/configure-shipment/hooks/use-address.d.ts

@@ -5,7 +5,7 @@ export type UseAddressProps = {
     compatibleCountryCodes?: CountryCode[];
     onChange?: (oldShipment: SE.SalesOrderShipment, updatedShipment: SE.SalesOrderShipment) => Promise<void> | void;
     onValidation?: (addressPreference: Templates.AddressPreference) => Promise<void> | void;
-    salesOrder: SE.SalesOrder;
+    salesOrder?: SE.SalesOrder;
     shipment?: SE.SalesOrderShipment;
 };
 export declare const useAddress: ({ compatibleCountryCodes, onChange, onValidation, salesOrder, shipment, }: UseAddressProps) => {

package/elements/components/configure-shipment/hooks/use-shipment-form.d.ts

@@ -9,7 +9,7 @@ export type UseShipmentFormProps = {
     onChangeAddress?: UseAddressProps["onChange"];
     onShipmentUpdated?: (shipment: SE.SalesOrderShipment) => Promise<void> | void;
     onSubmit?: (shipment: SE.SalesOrderShipment) => Promise<void> | void;
-    salesOrder: SE.SalesOrder;
+    salesOrder?: SE.SalesOrder;
     shipment?: SE.SalesOrderShipment;
 };
 export declare const useShipmentForm: ({ compatibleCountryCodes, onAddressValidation, onApplyPreset, onChangeAddress, onShipmentUpdated, onSubmit, salesOrder, shipment, }: UseShipmentFormProps) => {
@@ -25,7 +25,7 @@ export declare const useShipmentForm: ({ compatibleCountryCodes, onAddressValida
         fullAddress: string;
     }) => Promise<SE.AddressExtraction>;
     onUpdateCustoms: (customs: SE.Customs) => Promise<SE.SalesOrderShipment>;
-    salesOrder: SE.SalesOrder;
+    salesOrder: SE.SalesOrder | undefined;
     shipment: SE.SalesOrderShipment | undefined;
     warehouses: SE.Warehouse[] | undefined;
 };

package/elements/components/index.d.ts

@@ -1,8 +1,7 @@
 export * from "./configure-shipment";
 export * from "./list-carriers";
-export * from "./manage-funding";
 export * from "./manage-warehouses";
 export * from "./onboarding";
-export * from "./sales-order";
+export * from "./purchase-label";
 export * from "./shipment";
 export * from "./void-label";

package/elements/components/{sales-order → purchase-label}/hooks/use-configure-shipment.d.ts

@@ -8,7 +8,7 @@ export type UseConfigureShipmentProps = {
     salesOrder?: SE.SalesOrder;
     warehouseId?: UsePendingShipmentProps["warehouseId"];
 };
-export declare const useConfigureShipment: ({ onLoad, onShipmentUpdated, salesOrder, warehouseId, }: UseConfigureShipmentProps) => {
+export declare const useConfigureShipment: ({ onLoad, onShipmentUpdated, salesOrder, warehouseId, printLabelLayout, }: UseConfigureShipmentProps) => {
     errors: SE.CodedError[] | undefined;
     isLoading: boolean;
     onShipmentUpdated: (shipment: SE.SalesOrderShipment) => Promise<void>;

package/elements/components/purchase-label/hooks/use-load-shipment.d.ts

@@ -0,0 +1,9 @@
+export type UseLoadShipmentProps = {
+    shipmentId: string;
+};
+export declare const useLoadShipment: ({ shipmentId }: UseLoadShipmentProps) => {
+    errors: import("@shipengine/api").CodedError[] | undefined;
+    isLoading: boolean;
+    refetchShipment: <TPageData>(options?: (import("react-query").RefetchOptions & import("react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("react-query").QueryObserverResult<import("@shipengine/api").SalesOrderShipment, import("@shipengine/api").CodedError[]>>;
+    shipment: import("@shipengine/api").SalesOrderShipment | undefined;
+};

package/elements/components/purchase-label/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./purchase-label-by-sales-order";
+export * from "./purchase-label";
+export * from "./purchase-label-by-shipment";

package/elements/components/{sales-order/sales-order.d.ts → purchase-label/purchase-label-by-sales-order.d.ts}

@@ -23,4 +23,4 @@ export type SalesOrderProps = {
     shippingPresets?: UseShippingPresetsOptionsProps;
     warehouseId?: UseConfigureShipmentProps["warehouseId"];
 };
-export declare const SalesOrder: ({ features, externalOrderId, externalOrderNumber, onLoad, onShipmentUpdated, orderSourceCode, salesOrderId, warehouseId, printLabelLayout, ...props }: SalesOrderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PurchaseLabelBySalesOrder: ({ features, externalOrderId, externalOrderNumber, onLoad, onShipmentUpdated, orderSourceCode, salesOrderId, warehouseId, printLabelLayout, ...props }: SalesOrderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/elements/components/purchase-label/purchase-label-by-shipment.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { SalesOrderProps } from "./purchase-label-by-sales-order";
+type ShipmentOrderProps = {
+    children?: ReactNode;
+    shipmentId: string;
+};
+type PurchaseLabelByShipmentProps = Partial<SalesOrderProps> & ShipmentOrderProps;
+export declare const PurchaseLabelByShipment: ({ shipmentId, onLoad, onShipmentUpdated, features, ...props }: PurchaseLabelByShipmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/elements/components/purchase-label/purchase-label.d.ts

@@ -0,0 +1,6 @@
+import { SalesOrderProps } from "./purchase-label-by-sales-order";
+type PurchaseLabelProps = SalesOrderProps & {
+    shipmentId?: string;
+};
+export declare const PurchaseLabel: ({ shipmentId, ...props }: PurchaseLabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/elements/index.d.ts

@@ -1,5 +1,4 @@
 export { Element as ListCarriers } from "./list-carriers";
-export { Element as ManageFunding } from "./manage-funding";
 export { Element as ManageWarehouses } from "./manage-warehouses";
 export { Element as PurchaseLabel } from "./purchase-label";
 export { Element as Onboarding } from "./onboarding";

package/elements/purchase-label.d.ts

@@ -1 +1,3 @@
-export declare const Element: (props: import("./components/sales-order").SalesOrderProps & Record<string, unknown>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Element: (props: import("./components").SalesOrderProps & {
+    shipmentId?: string | undefined;
+} & Record<string, unknown>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/hooks/use-elements.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ShipEngineProviderProps } from "@shipengine/react";
 export type ElementsEnvironment = `dde:${string}` | "development" | "staging" | "production";
 export type ElementsErrorHandler = (err: Error, context: {
     componentStack: string;
@@ -18,7 +19,7 @@ export interface ElementsProviderProps {
     brandName?: string;
     children: JSX.Element;
     environment?: ElementsEnvironment;
-    getToken: () => string;
+    getToken: ShipEngineProviderProps["getToken"];
     onError?: ElementsErrorHandler;
     proxyTarget?: string;
 }

package/hooks/use-nested-form.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export type NestedFormProps<T, U> = {
     formId: string;
     onCancel?: () => void;
-    onSubmit: (payload: U) => Promise<void>;
+    onSubmit: (payload: U) => Promise<void> | void;
 } & T;
 /**
  * Returns a nested form element that can be rendered within another form
@@ -16,7 +16,7 @@ export type NestedFormProps<T, U> = {
 export declare const useNestedForm: <T, U>(form: React.FC<NestedFormProps<T, U>>, props: {
     formId: string;
     onCancel?: (() => void) | undefined;
-    onSubmit: (payload: U) => Promise<void>;
+    onSubmit: (payload: U) => Promise<void> | void;
 } & T & {
     portalRef?: undefined;
 }) => readonly [import("@emotion/react/jsx-runtime").JSX.Element, boolean, React.DispatchWithoutAction];