@dropins/storefront-purchase-order 0.0.3-alpha1 → 0.0.4-alpha1

package/mocks/index.d.ts

@@ -2829,4 +2829,128 @@ export declare const mockGetPurchaseOrdersFullDataSnakeCase: {
         };
     };
 };
+export declare const mockGetPurchaseOrderApprovalRulesSuccessSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+                items: {
+                    uid: string;
+                    name: string;
+                    description: string;
+                    status: string;
+                    created_at: string;
+                    updated_at: string;
+                    created_by: string;
+                    applies_to_roles: {
+                        id: string;
+                        name: string;
+                        users_count: number;
+                        permissions: {
+                            id: string;
+                            sort_order: number;
+                            text: string;
+                            children: never[];
+                        }[];
+                    }[];
+                    approver_roles: {
+                        id: string;
+                        name: string;
+                        users_count: number;
+                        permissions: {
+                            id: string;
+                            sort_order: number;
+                            text: string;
+                            children: never[];
+                        }[];
+                    }[];
+                    condition: {
+                        attribute: string;
+                        operator: string;
+                    };
+                }[];
+            };
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesErrorSnakeCase: {
+    errors: {
+        message: string;
+        extensions: {
+            category: string;
+        };
+    }[];
+};
+export declare const mockGetPurchaseOrderApprovalRulesEmptyDataSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+                items: never[];
+            };
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesIncompleteDataSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+                items: {
+                    uid: string;
+                    name: string;
+                    description: null;
+                    status: string;
+                    created_at: string;
+                    updated_at: string;
+                    created_by: null;
+                    applies_to_roles: never[];
+                    approver_roles: never[];
+                    condition: null;
+                }[];
+            };
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesNullDataSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: null;
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesMissingRulesSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+            };
+        };
+    };
+};
 //# sourceMappingURL=index.d.ts.map

package/mocks/storybook/index.d.ts

@@ -26,4 +26,5 @@
  * realistic mock responses for different scenarios.
  */
 export * from './purchase-orders';
+export * from './approval-rules';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-purchase-order", "version": "0.0.3-alpha1", "@dropins/tools": "1.5.1", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-purchase-order", "version": "0.0.4-alpha1", "@dropins/tools": "^1.6.0-alpha2", "license": "SEE LICENSE IN LICENSE.md"}

package/render.js

@@ -1,5 +1,5 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-(function(n,t){try{if(typeof document<"u"){const e=document.createElement("style"),o=t.styleId;for(const a in t.attributes)e.setAttribute(a,t.attributes[a]);e.setAttribute("data-dropin",o),e.appendChild(document.createTextNode(n));const r=document.querySelector('style[data-dropin="sdk"]');if(r)r.after(e);else{const a=document.querySelector('link[rel="stylesheet"], style');a?a.before(e):document.head.append(e)}}}catch(e){console.error("dropin-styles (injectCodeFunction)",e)}})('.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}.purchase-orders-confirmation-content__title{color:var(--color-neutral-800);font:var(--type-display-3-font);letter-spacing:var(--type-display-3-letter-spacing)}.purchase-orders-confirmation-content__description,.purchase-orders-confirmation-content__order-link,.purchase-orders-confirmation-content__help-text{font:var(--type-details-caption-1-font);letter-spacing:var(--type-details-caption-1-letter-spacing);margin-bottom:var(--spacing-small)}',{styleId:"b2b-purchase-order"});
-import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{Render as d}from"@dropins/tools/lib.js";import{useState as p,useEffect as n}from"@dropins/tools/preact-hooks.js";import{UIProvider as l}from"@dropins/tools/components.js";import{events as u}from"@dropins/tools/event-bus.js";const c={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",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.",description:"Your Purchase Order request number is ",helpText:"A copy of this Purchase Order will be emailed to you shortly.",button:"Continue Shopping"}},i={PurchaseOrders:c},h={default:i},m=({children:o})=>{const[a,s]=p("en_US");return n(()=>{const e=u.on("locale",t=>{s(t)},{eager:!0});return()=>{e==null||e.off()}},[]),r(l,{lang:a,langDefinitions:h,children:o})},P=new d(r(m,{}));export{P as render};
+(function(n,t){try{if(typeof document<"u"){const e=document.createElement("style"),o=t.styleId;for(const a in t.attributes)e.setAttribute(a,t.attributes[a]);e.setAttribute("data-dropin",o),e.appendChild(document.createTextNode(n));const r=document.querySelector('style[data-dropin="sdk"]');if(r)r.after(e);else{const a=document.querySelector('link[rel="stylesheet"], style');a?a.before(e):document.head.append(e)}}}catch(e){console.error("dropin-styles (injectCodeFunction)",e)}})('.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}.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)}',{styleId:"b2b-purchase-order"});
+import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{Render as d}from"@dropins/tools/lib.js";import{useState as l,useEffect as p}from"@dropins/tools/preact-hooks.js";import{UIProvider as u}from"@dropins/tools/components.js";import{events as n}from"@dropins/tools/event-bus.js";const i={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."}},c={PurchaseOrders:i},m={default:c},h=({children:a})=>{const[o,s]=l("en_US");return p(()=>{const e=n.on("locale",t=>{s(t)},{eager:!0});return()=>{e==null||e.off()}},[]),r(u,{lang:o,langDefinitions:m,children:a})},P=new d(r(h,{}));export{P 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":"m0EASMA,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":"o+EASMA,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/purchaseOrdersTable.types.d.ts

@@ -4,6 +4,11 @@ import { PageSizeListProps, PaginationState } from '.';
 import { AlertMessageConfigType } from '../hooks';
 
 export type Column = {
+    label: string | VNode<HTMLAttributes<HTMLElement>>;
+    key: string;
+    ariaLabel?: string;
+};
+export type TableColumn = {
     label: string;
     key: string;
     ariaLabel?: string;
@@ -32,7 +37,7 @@ export interface PurchaseOrdersTableProps {
     skeletonRowCount?: number | string;
     footer?: VNode | string | null;
     header?: VNode | string | null;
-    alertMessageConfig: AlertMessageConfigType;
+    alertMessageConfig?: AlertMessageConfigType;
     withWrapper?: boolean;
 }
 //# sourceMappingURL=purchaseOrdersTable.types.d.ts.map

package/types/containers/index.d.ts

@@ -1,5 +1,6 @@
 export * from './customerPurchaseOrders.types';
 export * from './companyPurchaseOrders.types';
 export * from './requireApprovalPurchaseOrders.types';
+export * from './purchaseOrderApprovalRulesList.types';
 export * from './purchaseOrderConfirmationProps.types';
 //# sourceMappingURL=index.d.ts.map

package/types/containers/purchaseOrderApprovalRulesList.types.d.ts

@@ -0,0 +1,15 @@
+import { Column, PageSizeListProps, Row } from '../components';
+
+export interface PurchaseOrderApprovalRulesListProps {
+    initialPageSize?: PageSizeListProps[];
+    routeCreateApprovalRule?: (id: string) => string;
+    routeEditApprovalRule?: (id: string) => string;
+    routeApprovalRuleDetails?: (id: string) => string;
+    setColumns?: (defaultColumns: Column[]) => Column[];
+    setRowsData?: (defaultRows: Row[]) => Row[];
+    className?: string;
+    withHeader?: boolean;
+    withWrapper?: boolean;
+    skeletonRowCount?: number;
+}
+//# sourceMappingURL=purchaseOrderApprovalRulesList.types.d.ts.map

package/types/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './usePurchaseOrders.types';
+export * from './useApprovalRulesList.types';
 //# sourceMappingURL=index.d.ts.map

package/types/hooks/useApprovalRulesList.types.d.ts

@@ -0,0 +1,29 @@
+import { CustomerRolePermissionsModel } from '../../data/models';
+import { PageSizeListProps, PaginationState } from '../components/pagination.types';
+import { Column, Row } from '../components/purchaseOrdersTable.types';
+
+export interface UseApprovalRulesList {
+    initialPageSize: PageSizeListProps[];
+    permissions: CustomerRolePermissionsModel;
+    routeCreateApprovalRule?: (id: string) => string;
+    routeEditApprovalRule?: (id: string) => string;
+    routeApprovalRuleDetails?: (id: string) => string;
+    setColumns?: (defaultColumns: Column[]) => Column[];
+    setRowsData?: (defaultRows: Row[]) => Row[];
+    t: Record<string, string>;
+}
+export interface UseApprovalRulesListReturn {
+    loading: boolean;
+    totalCount: number;
+    tableConfig: {
+        columns: Column[];
+        rows: Row[];
+    };
+    paginationConfig: PaginationState;
+    pageSizeConfig: {
+        pageSizeOptionsList: PageSizeListProps[];
+        onChange: (event: Event) => void;
+    };
+    handleCreateUrl: (id: string, type: 'edit' | 'new' | 'view') => string;
+}
+//# sourceMappingURL=useApprovalRulesList.types.d.ts.map