@dropins/storefront-purchase-order 0.0.4-alpha3 → 0.0.5-alpha10

package/data/models/purchase-order-model.d.ts

@@ -52,24 +52,238 @@ export interface PurchaseOrderModel {
         message: string;
         uid: string;
     }>;
+    quote: QuoteProps | null;
     order: {
         orderNumber: string;
         id: string;
     };
-    quote: {
-        id: string;
-        prices: {
-            grandTotal: {
-                value: number;
-                currency: string;
-            };
-        };
-        itemsV2: {
-            items?: Array<{
-                uid: string;
-                quantity: number;
-            }>;
+}
+type MoneyProps = {
+    value: number;
+    currency: string;
+};
+type OrderAddressProps = {
+    firstName: string;
+    lastName: string;
+    middleName: string;
+    city: string;
+    company: string;
+    country: string;
+    countryCode: string;
+    fax: string;
+    postCode: string;
+    prefix: string;
+    region: string;
+    regionId: string;
+    street: string[];
+    suffix: string;
+    telephone: string;
+    vatId: string;
+    customAttributes: any[];
+};
+type OrderItemProductProps = {
+    __typename: string;
+    uid: string;
+    onlyXLeftInStock: number;
+    stockStatus: string;
+    priceRange: {
+        maximumPrice: {
+            regularPrice: MoneyProps;
         };
+    };
+    canonicalUrl: string;
+    urlKey: string;
+    id: string;
+    name: string;
+    sku: string;
+    image: string;
+    imageAlt: string;
+    productType: string;
+    thumbnail: {
+        label: string;
+        url: string;
+    };
+};
+type GiftMessageProps = {
+    senderName: string;
+    recipientName: string;
+    message: string;
+};
+type GiftWrappingProps = {
+    design: string;
+    uid: string;
+    selected: boolean;
+    image: {
+        url: string;
+        label: string;
+    };
+    price: MoneyProps;
+};
+type TaxCalculationsProps = {
+    includeAndExcludeTax: {
+        originalPrice: MoneyProps;
+        baseOriginalPrice: MoneyProps;
+        baseDiscountedPrice: MoneyProps;
+        baseExcludingTax: MoneyProps;
+    };
+    excludeTax: {
+        originalPrice: MoneyProps;
+        baseOriginalPrice: MoneyProps;
+        baseDiscountedPrice: MoneyProps;
+        baseExcludingTax: MoneyProps;
+    };
+    includeTax: {
+        singleItemPrice: MoneyProps;
+        baseOriginalPrice: MoneyProps;
+        baseDiscountedPrice: MoneyProps;
+    };
+};
+type ItemPricesProps = {
+    price: MoneyProps;
+    priceIncludingTax: MoneyProps;
+    originalPrice: MoneyProps;
+    originalPriceIncludingTax: MoneyProps;
+    discounts: any[];
+};
+type OrderItemProps = {
+    giftMessage: GiftMessageProps;
+    giftWrappingPrice: MoneyProps;
+    productGiftWrapping: GiftWrappingProps[];
+    taxCalculations: TaxCalculationsProps;
+    productSalePrice: MoneyProps;
+    status: string;
+    currentReturnOrderQuantity: number;
+    eligibleForReturn: boolean;
+    productSku: string;
+    type: string;
+    discounted: boolean;
+    id: string;
+    productName: string;
+    productUrlKey: string;
+    regularPrice: MoneyProps;
+    price: MoneyProps;
+    product: OrderItemProductProps;
+    selectedOptions: any[];
+    thumbnail: {
+        label: string;
+        url: string;
+    };
+    downloadableLinks: {
+        count: number;
+        result: string;
     } | null;
-}
+    prices: ItemPricesProps;
+    itemPrices: ItemPricesProps;
+    bundleOptions: Record<string, any> | null;
+    totalInclTax: MoneyProps;
+    priceInclTax: MoneyProps;
+    total: MoneyProps;
+    configurableOptions: Record<string, string> | undefined;
+    giftCard?: {
+        senderName: string;
+        senderEmail: string;
+        recipientEmail: string;
+        recipientName: string;
+        message: string;
+    };
+    quantityCanceled: number;
+    quantityInvoiced: number;
+    quantityOrdered: number;
+    quantityRefunded: number;
+    quantityReturned: number;
+    quantityShipped: number;
+    requestQuantity: number;
+    totalQuantity: number;
+    returnableQuantity: number;
+    quantityReturnRequested: number;
+};
+type PaymentMethodProps = {
+    code: string;
+    name: string;
+};
+type ShippingProps = {
+    code: string;
+    amount: number;
+    currency: string;
+};
+type TaxProps = {
+    amount: MoneyProps;
+    rate: number;
+    title: string;
+};
+type AppliedGiftCardProps = {
+    code: string;
+    appliedBalance: MoneyProps;
+};
+type GiftOptionsProps = {
+    giftWrappingForItems: MoneyProps;
+    giftWrappingForItemsInclTax: MoneyProps;
+    giftWrappingForOrder: MoneyProps;
+    giftWrappingForOrderInclTax: MoneyProps;
+    printedCard: MoneyProps;
+    printedCardInclTax: MoneyProps;
+};
+type ShipmentItemProps = {
+    id: string;
+    productName: string;
+    productSku: string;
+    quantityShipped: number;
+    orderItem: OrderItemProps;
+};
+type ShipmentTrackingProps = {
+    carrier: string;
+    number: string;
+    title: string;
+};
+type ShipmentProps = {
+    id: string;
+    number: string;
+    tracking: ShipmentTrackingProps[];
+    comments: {
+        message: string;
+        timestamp: string;
+    }[];
+    items: ShipmentItemProps[];
+};
+type QuoteProps = {
+    giftReceiptIncluded: boolean;
+    printedCardIncluded: boolean;
+    giftWrappingOrder: {
+        price: MoneyProps;
+        uid: string;
+    };
+    placeholderImage: string;
+    returnNumber: string | undefined;
+    id: string;
+    orderStatusChangeDate: string | undefined;
+    number: string;
+    email: string;
+    token: string | undefined;
+    status: string;
+    isVirtual: boolean;
+    totalQuantity: number;
+    shippingMethod: string;
+    carrier: string;
+    orderDate: string;
+    returns: any[];
+    discounts: any[];
+    coupons: any[];
+    payments: PaymentMethodProps[];
+    shipping: ShippingProps;
+    shipments: ShipmentProps[];
+    items: OrderItemProps[];
+    totalGiftCard: MoneyProps;
+    grandTotal: MoneyProps;
+    totalShipping: MoneyProps;
+    subtotalExclTax: MoneyProps;
+    subtotalInclTax: MoneyProps;
+    totalTax: MoneyProps;
+    shippingAddress: OrderAddressProps | null;
+    totalGiftOptions: GiftOptionsProps;
+    billingAddress: OrderAddressProps | null;
+    availableActions: string[];
+    taxes: TaxProps[];
+    appliedGiftCards: AppliedGiftCardProps[];
+};
+export {};
 //# sourceMappingURL=purchase-order-model.d.ts.map

package/hooks/index.d.ts

@@ -19,4 +19,5 @@ export * from './useCustomerRolePermissions';
 export * from './useApprovalRuleForm';
 export * from './useApprovalRuleDetails';
 export * from './useApprovalRulesList';
+export * from './usePurchaseOrderStatus';
 //# sourceMappingURL=index.d.ts.map

package/hooks/usePurchaseOrderStatus.d.ts

@@ -0,0 +1,4 @@
+import { UsePurchaseOrderStatusReturn } from '../types/hooks';
+
+export declare const usePurchaseOrderStatus: () => UsePurchaseOrderStatusReturn;
+//# sourceMappingURL=usePurchaseOrderStatus.d.ts.map

package/i18n/en_US.json.d.ts

@@ -94,20 +94,80 @@ declare const _default: {
       "messagePrefix": "Your Purchase Order request number is",
       "messageSuffix": "A copy of this Purchase Order will be emailed to you shortly."
     },
+    "purchaseOrderStatus": {
+      "status": {
+        "pending": {
+          "title": "Pending Approval",
+          "message": "Purchase order is awaiting approval."
+        },
+        "approval_required": {
+          "title": "Approval Required",
+          "message": "Purchase order requires approval before it can be processed."
+        },
+        "approved": {
+          "title": "Approved",
+          "message": "Purchase order has been approved."
+        },
+        "order_in_progress": {
+          "title": "Processing in Progress",
+          "message": "Purchase order is currently being processed."
+        },
+        "order_placed": {
+          "title": "Placed",
+          "message": "Purchase order has been placed successfully."
+        },
+        "order_failed": {
+          "title": "Failed",
+          "message": "Purchase order processing has failed."
+        },
+        "rejected": {
+          "title": "Rejected",
+          "message": "Purchase order has been rejected."
+        },
+        "canceled": {
+          "title": "Canceled",
+          "message": "Purchase order has been canceled."
+        },
+        "approved_pending_payment": {
+          "title": "Approved - Pending Payment",
+          "message": "Purchase order has been approved and is awaiting payment."
+        }
+      },
+      "alertMessages": {
+        "success": {
+          "approval": "The purchase order was approved successfully.",
+          "reject": "The purchase order was rejected successfully.",
+          "cancel": "The purchase order was canceled successfully.",
+          "placeOrder": "The sales order was placed successfully."
+        },
+        "errors": {
+          "approval": "An error occurred while approving the purchase order. Please try again.",
+          "reject": "An error occurred while rejecting the purchase order. Please try again.",
+          "cancel": "An error occurred while canceling the purchase order. Please try again.",
+          "placeOrder": "An error occurred while placing the sales order. Please try again."
+        }
+      },
+      "buttons": {
+        "approve": "Approve",
+        "reject": "Reject",
+        "cancel": "Cancel",
+        "placeOrder": "Place Order"
+      }
+    },
     "approvalRuleForm": {
       "headerText": "Purchase Order Approval Rule",
-      "titleAppliesTo": "Applies to",
+      "titleAppliesTo": "Applies To",
       "titleRuleType": "Rule Type",
       "titleRequiresApprovalRole": "Requires Approval From",
       "fields": {
-        "enabled": "Enabled",
-        "disabled": "Disabled",
+        "enabled": "Rule Enabled",
+        "disabled": "Rule Disabled",
         "inputRuleName": {
           "floatingLabel": "Rule Name",
           "placeholder": "Rule Name"
         },
         "textAreaDescription": {
-          "label": "Description"
+          "label": "Rule Description"
         },
         "appliesTo": {
           "allUsers": "All Users",

package/mocks/storybook/events-data.d.ts

@@ -1,12 +1,8 @@
 export declare const mockPermissions: {
+    [x: string]: boolean;
     all: boolean;
     'Magento_Company::index': boolean;
     'Magento_Sales::all': boolean;
-    'Magento_PurchaseOrder::all': boolean;
-    'Magento_PurchaseOrder::view_purchase_orders': boolean;
-    'Magento_PurchaseOrderRule::super_approve_purchase_order': boolean;
     'Magento_Company::user_management': boolean;
-    'Magento_PurchaseOrderRule::view_approval_rules': boolean;
-    'Magento_PurchaseOrderRule::manage_approval_rules': boolean;
 };
 //# sourceMappingURL=events-data.d.ts.map

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-purchase-order", "version": "0.0.4-alpha3", "@dropins/tools": "^1.6.0-alpha2", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-purchase-order", "version": "0.0.5-alpha10", "@dropins/tools": "1.6.0-beta2", "license": "SEE LICENSE IN LICENSE.md"}

package/render.js

@@ -1,6 +1,6 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
 (function(t,a){try{if(typeof document<"u"){const e=document.createElement("style"),i=a.styleId;for(const r in a.attributes)e.setAttribute(r,a.attributes[r]);e.setAttribute("data-dropin",i),e.appendChild(document.createTextNode(t));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(e);else{const r=document.querySelector('link[rel="stylesheet"], style');r?r.before(e):document.head.append(e)}}}catch(e){console.error("dropin-styles (injectCodeFunction)",e)}})(`.dropin-skeleton{--row-gap-spacing: var(--spacing-medium);display:grid;grid-template-columns:1fr 1fr;gap:var(--row-gap-spacing)}.dropin-skeleton .dropin-skeleton--row__content{background:var(--color-neutral-300) linear-gradient(to right,var(--color-neutral-300) 0%,var(--color-neutral-100) 20%,var(--color-neutral-300) 40%,var(--color-neutral-300) 100%) no-repeat;animation:skeletonShimmer infinite 1.2s linear;border-radius:var(--shape-border-radius-2)}.dropin-skeleton__empty{background:none}.dropin-skeleton-row--multiline{--multiline-gap-spacing: var(--spacing-medium);display:grid;grid-auto-rows:max-content;gap:var(--multiline-gap-spacing)}.dropin-skeleton-row--full{grid-column:1 / -1}.dropin-skeleton-row svg{fill:var(--color-neutral-400);fill-opacity:.5;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear}.dropin-skeleton-row__row-xsmall{height:32px}.dropin-skeleton-row__row-small{height:40px}.dropin-skeleton-row__row-medium{height:48px}.dropin-skeleton-row__row-large{height:56px}.dropin-skeleton-row__row-xlarge{height:72px}.dropin-skeleton-row__heading-xsmall{height:20px}.dropin-skeleton-row__heading-small{height:24px}.dropin-skeleton-row__heading-medium{height:32px}.dropin-skeleton-row__heading-large{height:40px}.dropin-skeleton-row__heading-xlarge{height:48px}@keyframes skeletonShimmer{0%{background-position:-600px 0}to{background-position:600px 0}}@keyframes placeholderShimmer{0%{fill-opacity:.5}50%{fill-opacity:1}to{fill-opacity:.5}}@media only screen and (max-width: 600px){.dropin-skeleton{grid-template-columns:1fr}}
-.b2b-purchase-order-purchase-orders-table{display:flex;flex-direction:column;gap:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table a{cursor:pointer}.b2b-purchase-order-purchase-orders-table .purchase-orders-table__item--skeleton{max-width:200px}.purchase-orders-table__empty-state{text-align:center;color:var(--color-neutral-600);font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-table__pagination-wrapper{display:flex;justify-content:space-between;align-items:center}.purchase-orders-table__pagination-page-size{display:flex;align-items:center;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter,.purchase-orders-table__pagination-page-size{color:var(--color-neutral-800);font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}@media (max-width: 783px){.purchase-orders-table__pagination-wrapper{display:grid;grid-template-areas:"counter page-size" "pagination pagination";grid-template-columns:auto auto;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination;justify-self:center}}@media (max-width: 600px){.purchase-orders-table__pagination-wrapper{grid-template-areas:"counter" "page-size" "pagination";grid-template-columns:1fr;justify-items:center}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination}}.purchase-orders-header{margin-bottom:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table-actions{display:flex;justify-content:space-between;align-items:center}.b2b-purchase-order-purchase-orders-table-actions__buttons{display:flex;gap:10px;justify-content:space-between}.b2b-purchase-order-approval-rule-form form{display:flex;flex-direction:column;gap:var(--spacing-small)}.b2b-purchase-order-approval-rule-form__rule-condition,.b2b-purchase-order-approval-rule-form__approval-role,.b2b-purchase-order-approval-rule-form__rule-type,.b2b-purchase-order-approval-rule-form__applies-to,.b2b-purchase-order-approval-rule-form__rule-condition-container,.b2b-purchase-order-approval-rule-form__buttons{display:flex;flex-direction:column;gap:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-form form>label.dropin-checkbox{align-items:center}.b2b-purchase-order-approval-rule-form__rule-type select,.b2b-purchase-order-approval-rule-form__rule-condition-container select{min-height:56px}.b2b-purchase-order-approval-rule-form__rule-condition-container{flex-direction:row;position:relative;margin-bottom:var( --spacing-medium )}.b2b-purchase-order-approval-rule-form__rule-condition-container>div{position:relative}.b2b-purchase-order-approval-rule-form__rule-condition-container .error-message{position:absolute;top:100%;left:0;right:0;z-index:10}.b2b-purchase-order-approval-rule-form__buttons{justify-content:flex-start;flex-direction:row}@media (max-width: 600px){.b2b-purchase-order-approval-rule-form__rule-condition-container{flex-direction:column;margin-bottom:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-form__rule-condition-container .error-message{position:static}.b2b-purchase-order-approval-rule-form form .dropin-multi-select{min-width:100%}}.error-message{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);padding-top:var(--spacing-xsmall);text-align:left;color:var(--color-alert-800)}.b2b-purchase-order-approval-rule-form .dropin-skeleton{width:100%;display:flex;flex-direction:column;gap:8px}.approval-rule-form-loader__section{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.approval-rule-form-loader__buttons{display:flex;gap:16px}.purchase-orders-confirmation-content__title{color:var(--color-neutral-800);font:var(--type-headline-1-font);letter-spacing:var(--type-headline-1-letter-spacing)}.purchase-orders-confirmation-content__message{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-confirmation-content__link{color:var(--color-brand-500);font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing)}.b2b-purchase-order-approval-rule-details-content__item{margin-bottom:var(--spacing-medium);display:grid;grid-template-columns:1fr;gap:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-details-content__label{font:var(--type-body-1-emphasized-font);letter-spacing:var(--type-body-1-emphasized-letter-spacing)}.b2b-purchase-order-approval-rule-details-content__value{display:block}.b2b-purchase-order-approval-rule-details-content__value ul{margin:0;padding-left:var(--spacing-medium)}.b2b-purchase-order-approval-rule-details-content__value>div{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:var(--spacing-small);gap:var(--spacing-xsmall)}.b2b-purchase-order-form-loader .dropin-skeleton{width:100%;display:flex;flex-direction:column;gap:8px}.b2b-purchase-order-form-loader .approval-rule-form-loader__section{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.b2b-purchase-order-form-loader .approval-rule-form-loader__buttons{display:flex;gap:16px}`,{styleId:"b2b-purchase-order"});
-import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{Render as l}from"@dropins/tools/lib.js";import{useState as n,useEffect as p}from"@dropins/tools/preact-hooks.js";import{UIProvider as u}from"@dropins/tools/components.js";import{events as i}from"@dropins/tools/event-bus.js";const d={customerPurchaseOrders:{containerTitle:"My purchase orders",noPurchaseOrders:"No purchase orders found."},companyPurchaseOrders:{containerTitle:"Company purchase orders",noPurchaseOrders:"No company purchase orders found."},requireApprovalPurchaseOrders:{containerTitle:"Requires my approval",noPurchaseOrders:"No purchase orders requiring my approval found."},approvalRulesList:{containerTitle:"Approval rules",emptyTitle:"No approval rules found",ariaLabel:{editRule:"Edit approval rule {{ruleName}}",deleteRule:"Delete approval rule {{ruleName}}",viewRule:"View approval rule {{ruleName}}"},buttons:{newRule:"Add New Rule"}},alertMessages:{header:{approve:"Approve Purchase Orders",reject:"Reject Purchase Orders",error:"Error"},description:{approve:"The selected purchase orders were approved successfully.",reject:"The selected purchase orders were rejected successfully.",error:"An error occurred while processing your request."}},purchaseOrdersTable:{noPurchaseOrders:{default:"No purchase orders found."},pagination:{status:"Items {{from}} to {{to}} of {{total}} total",pageSizeLabel:{start:"Show",end:"per page"}},loading:"Loading purchase orders...",actionView:"View",actionEdit:"Edit",actionDelete:"Delete",rulesStatus:{enabled:"Enabled",disabled:"Disabled"},ruleTypes:{grand_total:"Grand Total",number_of_skus:"Number of SKUs",any_item:"Any Item",all_items:"All Items"},appliesToAll:"All",statusOrder:{order_placed:"Order placed",order_failed:"Order failed",pending:"Pending",approved:"Approved",rejected:"Rejected",canceled:"Canceled",order_in_progress:"Order in progress",approval_required:"Approval required",approved_pending_payment:"Approved pending Payment"},tableColumns:{poNumber:"PO #",orderNumber:"Order #",createdDate:"Created",updatedDate:"Updated",createdBy:"Created By",status:"Status",total:"Total",action:"Action",ruleName:"Rule Name",ruleType:"Rule Type",appliesTo:"Applies To",approver:"Approver",selectAllAriaLabel:"Select all not approved purchase orders"}},purchaseOrderConfirmation:{title:"Your Purchase Order has been submitted for approval.",messagePrefix:"Your Purchase Order request number is",messageSuffix:"A copy of this Purchase Order will be emailed to you shortly."},approvalRuleForm:{headerText:"Purchase Order Approval Rule",titleAppliesTo:"Applies to",titleRuleType:"Rule Type",titleRequiresApprovalRole:"Requires Approval From",fields:{enabled:"Enabled",disabled:"Disabled",inputRuleName:{floatingLabel:"Rule Name",placeholder:"Rule Name"},textAreaDescription:{label:"Description"},appliesTo:{allUsers:"All Users",specificRoles:"Specific Roles"},ruleTypeOptions:{grandTotal:"Grand Total",shippingInclTax:"Shipping Cost",numberOfSkus:"Number of SKUs"},conditionOperators:{moreThan:"is more than",lessThan:"is less than",moreThanOrEqualTo:"is more than or equal to",lessThanOrEqualTo:"is less than or equal to"},inputQuantity:{floatingLabel:"Enter Amount",placeholder:"Enter Amount"},inputAmount:{floatingLabel:"Enter Amount",placeholder:"Enter Amount"},buttons:{cancel:"Cancel",save:"Save"}},errorsMessages:{required:"This field is required.",quantity:"Quantity must be greater than 0.",amount:"Amount must be greater than 0.",approvers:"Please select at least one approver."}},approvalRuleDetails:{containerTitle:"View Approval Rule",buttons:{back:"Back to Rules List"},fields:{ruleName:"Rule Name:",status:"Status:",description:"Description:",appliesTo:"Applies To:",requiresApprovalFrom:"Requires Approval From:",ruleType:"Rule Type:",amount:{label:" amount "},statusView:{enabled:"Enabled",disabled:"Disabled"},condition:{attribute:{grand_total:"Grand Total",shipping_incl_tax:"Shipping Cost",number_of_skus:"Number of SKUs"},operator:{more_than:"Is more than",less_than:"Is less than",more_than_or_equal_to:"Is more than or equal to",less_than_or_equal_to:"Is less than or equal to"}}}}},c={PurchaseOrders:d},m={default:c},h=({children:a})=>{const[o,t]=n("en_US");return p(()=>{const e=i.on("locale",s=>{t(s)},{eager:!0});return()=>{e==null||e.off()}},[]),r(u,{lang:o,langDefinitions:m,children:a})},g=new l(r(h,{}));export{g as render};
+.b2b-purchase-order-purchase-orders-table{display:flex;flex-direction:column;gap:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table--empty-state{gap:0}.b2b-purchase-order-purchase-orders-table a{cursor:pointer}.b2b-purchase-order-purchase-orders-table .purchase-orders-table__item--skeleton{max-width:200px}.purchase-orders-table__empty-state{text-align:center;color:var(--color-neutral-600);font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing);border:var(--shape-border-width-1) solid var(--color-neutral-400);border-top:none}.purchase-orders-table__empty-state:not(:last-child){margin-bottom:var(--spacing-medium)}.purchase-orders-table__pagination-wrapper{display:flex;justify-content:space-between;align-items:center}.purchase-orders-table__pagination-page-size{display:flex;align-items:center;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter,.purchase-orders-table__pagination-page-size{color:var(--color-neutral-800);font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}@media (max-width: 783px){.purchase-orders-table__pagination-wrapper{display:grid;grid-template-areas:"counter page-size" "pagination pagination";grid-template-columns:auto auto;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination;justify-self:center}}@media (max-width: 600px){.purchase-orders-table__pagination-wrapper{grid-template-areas:"counter" "page-size" "pagination";grid-template-columns:1fr;justify-items:center}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination}}.purchase-orders-header{margin-bottom:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table-actions{display:flex;justify-content:space-between;align-items:center}.b2b-purchase-order-purchase-orders-table-actions__buttons{display:flex;gap:10px;justify-content:space-between}.b2b-purchase-order-approval-rule-form form{display:flex;flex-direction:column;gap:var(--spacing-small)}.b2b-purchase-order-approval-rule-form__rule-condition,.b2b-purchase-order-approval-rule-form__approval-role,.b2b-purchase-order-approval-rule-form__rule-type,.b2b-purchase-order-approval-rule-form__applies-to,.b2b-purchase-order-approval-rule-form__rule-condition-container,.b2b-purchase-order-approval-rule-form__buttons{display:flex;flex-direction:column;gap:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-form form>label.dropin-checkbox{align-items:center}.b2b-purchase-order-approval-rule-form__rule-type select,.b2b-purchase-order-approval-rule-form__rule-condition-container select{min-height:56px}.b2b-purchase-order-approval-rule-form__rule-condition-container{flex-direction:row;position:relative}.b2b-purchase-order-approval-rule-form__rule-condition-container--error{margin-bottom:var( --spacing-xsmall )}.b2b-purchase-order-approval-rule-form__rule-condition-container>div{position:relative}.b2b-purchase-order-approval-rule-form__rule-condition-container .error-message{position:absolute;top:100%;left:0;right:0;z-index:10}.b2b-purchase-order-approval-rule-form__buttons{justify-content:flex-start;flex-direction:row}@media (max-width: 600px){.b2b-purchase-order-approval-rule-form__rule-condition-container{flex-direction:column;margin-bottom:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-form__rule-condition-container .error-message{position:static}.b2b-purchase-order-approval-rule-form form .dropin-multi-select{min-width:100%}}.error-message{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);padding-top:var(--spacing-xsmall);text-align:left;color:var(--color-alert-800)}.b2b-purchase-order-approval-rule-form .dropin-skeleton{width:100%;display:flex;flex-direction:column;gap:var(--spacing-xsmall)}.approval-rule-form-loader__section{display:flex;flex-direction:column;gap:var(--spacing-xsmall);margin-bottom:var(--spacing-medium)}.approval-rule-form-loader__buttons{display:flex;gap:var(--spacing-small)}.purchase-orders-confirmation-content__title{color:var(--color-neutral-800);font:var(--type-headline-1-font);letter-spacing:var(--type-headline-1-letter-spacing)}.purchase-orders-confirmation-content__message{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-confirmation-content__link{color:var(--color-brand-500);font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing)}.b2b-purchase-order-status-content__message{padding:0;margin:0;box-sizing:border-box;font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing);margin-bottom:var(--spacing-small)}.b2b-purchase-order-status-content__actions>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-xsmall)}.purchase-order-status .dropin-card__content{gap:0}.b2b-purchase-order-approval-rule-details-content__item{margin-bottom:var(--spacing-medium);display:grid;grid-template-columns:1fr;gap:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-details-content__label{font:var(--type-body-1-emphasized-font);letter-spacing:var(--type-body-1-emphasized-letter-spacing)}.b2b-purchase-order-approval-rule-details-content__value{display:block}.b2b-purchase-order-approval-rule-details-content__value ul{margin:0;padding-left:var(--spacing-medium)}.b2b-purchase-order-approval-rule-details-content__value>div{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:var(--spacing-small);gap:var(--spacing-xsmall)}.approval-rule-details__button{max-width:max-content}.b2b-purchase-order-form-loader .dropin-skeleton{width:100%;display:flex;flex-direction:column;gap:var(--spacing-xsmall)}.b2b-purchase-order-form-loader .approval-rule-form-loader__section{display:flex;flex-direction:column;gap:var(--spacing-xsmall);margin-bottom:var(--spacing-medium)}.b2b-purchase-order-form-loader .approval-rule-form-loader__buttons{display:flex;gap:var(--spacing-small)}`,{styleId:"b2b-purchase-order"});
+import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{Render as l}from"@dropins/tools/lib.js";import{useState as p,useEffect as n}from"@dropins/tools/preact-hooks.js";import{UIProvider as u}from"@dropins/tools/components.js";import{events as i}from"@dropins/tools/event-bus.js";const d={customerPurchaseOrders:{containerTitle:"My purchase orders",noPurchaseOrders:"No purchase orders found."},companyPurchaseOrders:{containerTitle:"Company purchase orders",noPurchaseOrders:"No company purchase orders found."},requireApprovalPurchaseOrders:{containerTitle:"Requires my approval",noPurchaseOrders:"No purchase orders requiring my approval found."},approvalRulesList:{containerTitle:"Approval rules",emptyTitle:"No approval rules found",ariaLabel:{editRule:"Edit approval rule {{ruleName}}",deleteRule:"Delete approval rule {{ruleName}}",viewRule:"View approval rule {{ruleName}}"},buttons:{newRule:"Add New Rule"}},alertMessages:{header:{approve:"Approve Purchase Orders",reject:"Reject Purchase Orders",error:"Error"},description:{approve:"The selected purchase orders were approved successfully.",reject:"The selected purchase orders were rejected successfully.",error:"An error occurred while processing your request."}},purchaseOrdersTable:{noPurchaseOrders:{default:"No purchase orders found."},pagination:{status:"Items {{from}} to {{to}} of {{total}} total",pageSizeLabel:{start:"Show",end:"per page"}},loading:"Loading purchase orders...",actionView:"View",actionEdit:"Edit",actionDelete:"Delete",rulesStatus:{enabled:"Enabled",disabled:"Disabled"},ruleTypes:{grand_total:"Grand Total",number_of_skus:"Number of SKUs",any_item:"Any Item",all_items:"All Items"},appliesToAll:"All",statusOrder:{order_placed:"Order placed",order_failed:"Order failed",pending:"Pending",approved:"Approved",rejected:"Rejected",canceled:"Canceled",order_in_progress:"Order in progress",approval_required:"Approval required",approved_pending_payment:"Approved pending Payment"},tableColumns:{poNumber:"PO #",orderNumber:"Order #",createdDate:"Created",updatedDate:"Updated",createdBy:"Created By",status:"Status",total:"Total",action:"Action",ruleName:"Rule Name",ruleType:"Rule Type",appliesTo:"Applies To",approver:"Approver",selectAllAriaLabel:"Select all not approved purchase orders"}},purchaseOrderConfirmation:{title:"Your Purchase Order has been submitted for approval.",messagePrefix:"Your Purchase Order request number is",messageSuffix:"A copy of this Purchase Order will be emailed to you shortly."},purchaseOrderStatus:{status:{pending:{title:"Pending Approval",message:"Purchase order is awaiting approval."},approval_required:{title:"Approval Required",message:"Purchase order requires approval before it can be processed."},approved:{title:"Approved",message:"Purchase order has been approved."},order_in_progress:{title:"Processing in Progress",message:"Purchase order is currently being processed."},order_placed:{title:"Placed",message:"Purchase order has been placed successfully."},order_failed:{title:"Failed",message:"Purchase order processing has failed."},rejected:{title:"Rejected",message:"Purchase order has been rejected."},canceled:{title:"Canceled",message:"Purchase order has been canceled."},approved_pending_payment:{title:"Approved - Pending Payment",message:"Purchase order has been approved and is awaiting payment."}},alertMessages:{success:{approval:"The purchase order was approved successfully.",reject:"The purchase order was rejected successfully.",cancel:"The purchase order was canceled successfully.",placeOrder:"The sales order was placed successfully."},errors:{approval:"An error occurred while approving the purchase order. Please try again.",reject:"An error occurred while rejecting the purchase order. Please try again.",cancel:"An error occurred while canceling the purchase order. Please try again.",placeOrder:"An error occurred while placing the sales order. Please try again."}},buttons:{approve:"Approve",reject:"Reject",cancel:"Cancel",placeOrder:"Place Order"}},approvalRuleForm:{headerText:"Purchase Order Approval Rule",titleAppliesTo:"Applies To",titleRuleType:"Rule Type",titleRequiresApprovalRole:"Requires Approval From",fields:{enabled:"Rule Enabled",disabled:"Rule Disabled",inputRuleName:{floatingLabel:"Rule Name",placeholder:"Rule Name"},textAreaDescription:{label:"Rule Description"},appliesTo:{allUsers:"All Users",specificRoles:"Specific Roles"},ruleTypeOptions:{grandTotal:"Grand Total",shippingInclTax:"Shipping Cost",numberOfSkus:"Number of SKUs"},conditionOperators:{moreThan:"is more than",lessThan:"is less than",moreThanOrEqualTo:"is more than or equal to",lessThanOrEqualTo:"is less than or equal to"},inputQuantity:{floatingLabel:"Enter Amount",placeholder:"Enter Amount"},inputAmount:{floatingLabel:"Enter Amount",placeholder:"Enter Amount"},buttons:{cancel:"Cancel",save:"Save"}},errorsMessages:{required:"This field is required.",quantity:"Quantity must be greater than 0.",amount:"Amount must be greater than 0.",approvers:"Please select at least one approver."}},approvalRuleDetails:{containerTitle:"View Approval Rule",buttons:{back:"Back to Rules List"},fields:{ruleName:"Rule Name:",status:"Status:",description:"Description:",appliesTo:"Applies To:",requiresApprovalFrom:"Requires Approval From:",ruleType:"Rule Type:",amount:{label:" amount "},statusView:{enabled:"Enabled",disabled:"Disabled"},condition:{attribute:{grand_total:"Grand Total",shipping_incl_tax:"Shipping Cost",number_of_skus:"Number of SKUs"},operator:{more_than:"Is more than",less_than:"Is less than",more_than_or_equal_to:"Is more than or equal to",less_than_or_equal_to:"Is less than or equal to"}}}}},c={PurchaseOrders:d},h={default:c},m=({children:a})=>{const[s,o]=p("en_US");return n(()=>{const e=i.on("locale",t=>{o(t)},{eager:!0});return()=>{e==null||e.off()}},[]),r(u,{lang:s,langDefinitions:h,children:a})},y=new l(r(m,{}));export{y as render};
 //# sourceMappingURL=render.js.map

package/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sources":["/@dropins/storefront-purchase-order/src/render/Provider.tsx","/@dropins/storefront-purchase-order/src/render/render.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n  children,\n}) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true }\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","import { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"gkIASMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECtCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}
+{"version":3,"file":"render.js","sources":["/@dropins/storefront-purchase-order/src/render/Provider.tsx","/@dropins/storefront-purchase-order/src/render/render.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n  children,\n}) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true }\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","import { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"sjLASMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECtCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}

package/types/components/index.d.ts

@@ -3,5 +3,6 @@ export * from './pagination.types';
 export * from './purchaseOrdersTableActions';
 export * from './approvalRuleForm.types';
 export * from './purchaseOrderConfirmationContent.types';
+export * from './purchaseOrderStatusContent.types';
 export * from './approvalRuleDetailsContentProps.types';
 //# sourceMappingURL=index.d.ts.map

package/types/components/purchaseOrderStatusContent.types.d.ts

@@ -0,0 +1,17 @@
+import { SlotProps } from '@dropins/tools/types/elsie/src/lib';
+import { PurchaseOrderStatusSlotContext } from '../containers';
+import { PURCHASE_ORDER_ACTION } from '../hooks';
+
+export interface PurchaseOrderStatusContentProps {
+    t: Record<string, string>;
+    loading: boolean;
+    availableActions?: PURCHASE_ORDER_ACTION[];
+    handleApprove: () => void;
+    handleReject: () => void;
+    handleCancel: () => void;
+    handlePlaceOrder: () => void;
+    slots?: {
+        PurchaseOrderActions: SlotProps<PurchaseOrderStatusSlotContext>;
+    };
+}
+//# sourceMappingURL=purchaseOrderStatusContent.types.d.ts.map

package/types/containers/index.d.ts

@@ -4,5 +4,6 @@ export * from './requireApprovalPurchaseOrders.types';
 export * from './approvalRuleForm.types';
 export * from './approvalRulesList.types';
 export * from './purchaseOrderConfirmationProps.types';
+export * from './purchaseOrderStatus.types';
 export * from './approvalRuleDetailsProps.types';
 //# sourceMappingURL=index.d.ts.map

package/types/containers/purchaseOrderStatus.types.d.ts

@@ -0,0 +1,18 @@
+import { SlotProps } from '@dropins/tools/types/elsie/src/lib';
+import { PURCHASE_ORDER_ACTION } from '../hooks';
+
+export type PurchaseOrderStatusSlotContext = {
+    loading: boolean;
+    availableActions?: PURCHASE_ORDER_ACTION[];
+    handleApprove: () => void;
+    handleReject: () => void;
+    handleCancel: () => void;
+    handlePlaceOrder: () => void;
+};
+export interface PurchaseOrderStatusProps {
+    className?: string;
+    slots?: {
+        PurchaseOrderActions: SlotProps<PurchaseOrderStatusSlotContext>;
+    };
+}
+//# sourceMappingURL=purchaseOrderStatus.types.d.ts.map

package/types/hooks/index.d.ts

@@ -2,4 +2,5 @@ export * from './useApprovalRuleForm.types';
 export * from './usePurchaseOrders.types';
 export * from './useApprovalRuleDetails.types';
 export * from './useApprovalRulesList.types';
+export * from './usePurchaseOrderStatus.types';
 //# sourceMappingURL=index.d.ts.map

package/types/hooks/usePurchaseOrderStatus.types.d.ts

@@ -0,0 +1,19 @@
+import { InLineAlertProps } from '@dropins/tools/types/elsie/src/components';
+
+export type PURCHASE_ORDER_STATUS = 'PENDING' | 'APPROVAL_REQUIRED' | 'APPROVED' | 'ORDER_IN_PROGRESS' | 'ORDER_PLACED' | 'ORDER_FAILED' | 'REJECTED' | 'CANCELED' | 'APPROVED_PENDING_PAYMENT';
+export type PURCHASE_ORDER_ACTION = 'REJECT' | 'CANCEL' | 'APPROVE' | 'PLACE_ORDER';
+export interface UsePurchaseOrderStatusReturn {
+    alertType: NonNullable<InLineAlertProps['type']>;
+    poId: string | null;
+    status: PURCHASE_ORDER_STATUS;
+    availableActions: PURCHASE_ORDER_ACTION[] | [];
+    loading: boolean;
+    isDismissed: boolean;
+    alertMessage: string;
+    handleOnDismiss: () => void;
+    handleApprove: () => Promise<void>;
+    handleReject: () => Promise<void>;
+    handleCancel: () => Promise<void>;
+    handlePlaceOrder: () => Promise<void>;
+}
+//# sourceMappingURL=usePurchaseOrderStatus.types.d.ts.map