@final-commerce/command-frame 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +58 -344
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -14,7 +14,8 @@ This package is available on the public NPM registry.
14
14
 
15
15
  - [API Overview](#api-overview)
16
16
  - [Quick Start](#quick-start)
17
- - [Actions Documentation](#actions-documentation)
17
+ - [Commands Documentation](#commands-documentation)
18
+ - [Pub/Sub System](#pubsub-system)
18
19
  - [Examples](#examples)
19
20
  - [Debugging](#debugging)
20
21
  - [Type Safety](#type-safety)
@@ -22,9 +23,9 @@ This package is available on the public NPM registry.
22
23
 
23
24
  ## API Overview
24
25
 
25
- The library provides a `command` namespace object containing all available actions. Each action is a typed function that communicates with the parent window via postMessage.
26
+ The library provides a `command` namespace object containing all available commands. Each command is a typed function that communicates with the parent window via postMessage.
26
27
 
27
- ### Available Actions
28
+ ### Available Commands
28
29
 
29
30
  #### Data Retrieval
30
31
  - **[getCustomers](https://github.com/Final-Commerce/command-frame/blob/main/src/actions/get-customers/README.md)** - Retrieve a list of customers from the parent application
@@ -94,7 +95,7 @@ The library provides a `command` namespace object containing all available actio
94
95
  #### Reference
95
96
  - **[exampleFunction](https://github.com/Final-Commerce/command-frame/blob/main/src/actions/example-function/README.md)** - Example/template function (for reference only)
96
97
 
97
- For detailed documentation on each action, including parameter descriptions, response structures, and usage examples, see the [Actions Documentation](#actions-documentation) section below.
98
+ For detailed documentation on each command, including parameter descriptions, response structures, and usage examples, see the [Commands Documentation](#commands-documentation) section below.
98
99
 
99
100
  ## Quick Start
100
101
 
@@ -144,347 +145,12 @@ console.log('Current company:', context.companyName);
144
145
  console.log('Current build:', context.buildName);
145
146
  ```
146
147
 
147
- For complete usage examples and detailed parameter descriptions, see the documentation for each action in the [Actions Documentation](#actions-documentation) section.
148
+ For complete usage examples and detailed parameter descriptions, see the documentation for each command in the [Commands Documentation](#commands-documentation) section.
148
149
 
149
- ## Pub/Sub System
150
-
151
- The library includes a pub/sub system that allows iframe apps to subscribe to topics and receive events published by the host application (Render).
152
-
153
- ### Quick Start - Pub/Sub
154
-
155
- ```typescript
156
- import { topics } from '@final-commerce/command-frame';
157
-
158
- // Get available topics
159
- const availableTopics = await topics.getTopics();
160
- console.log('Available topics:', availableTopics);
161
-
162
- // Subscribe to a topic with a callback
163
- const subscriptionId = topics.subscribe('customers', (event) => {
164
- if (event.type === 'customer-created') {
165
- console.log('New customer created:', event.data);
166
- // Handle the event
167
- }
168
- });
169
-
170
- // Later, unsubscribe when done
171
- topics.unsubscribe('customers', subscriptionId);
172
- ```
173
-
174
- ### Pub/Sub API
175
-
176
- #### `topics.getTopics()`
177
150
 
178
- Retrieves the list of available topics from the host application.
151
+ ## Commands Documentation
179
152
 
180
- **Returns:** `Promise<TopicDefinition[]>`
181
-
182
- **Example:**
183
- ```typescript
184
- const topics = await topics.getTopics();
185
- topics.forEach(topic => {
186
- console.log(`Topic: ${topic.name} (${topic.id})`);
187
- console.log(`Event types: ${topic.eventTypes.map(et => et.id).join(', ')}`);
188
- });
189
- ```
190
-
191
- #### `topics.subscribe(topic, callback)`
192
-
193
- Subscribes to a topic and receives events via the callback function.
194
-
195
- **Parameters:**
196
- - `topic: string` - The topic ID to subscribe to
197
- - `callback: (event: TopicEvent) => void` - Function called when an event is received
198
-
199
- **Returns:** `string` - Subscription ID (use this to unsubscribe)
200
-
201
- **Example:**
202
- ```typescript
203
- const subscriptionId = topics.subscribe('customers', (event) => {
204
- console.log('Received event:', event.type);
205
- console.log('Event data:', event.data);
206
- console.log('Timestamp:', event.timestamp);
207
- });
208
- ```
209
-
210
- #### `topics.unsubscribe(topic, subscriptionId)`
211
-
212
- Unsubscribes from a topic using the subscription ID returned from `subscribe()`.
213
-
214
- **Parameters:**
215
- - `topic: string` - The topic ID
216
- - `subscriptionId: string` - The subscription ID returned from `subscribe()`
217
-
218
- **Returns:** `boolean` - `true` if successfully unsubscribed
219
-
220
- **Example:**
221
- ```typescript
222
- const success = topics.unsubscribe('customers', subscriptionId);
223
- ```
224
-
225
- #### `topics.unsubscribeAll(topic)`
226
-
227
- Unsubscribes all callbacks for a specific topic.
228
-
229
- **Parameters:**
230
- - `topic: string` - The topic ID
231
-
232
- **Returns:** `number` - Number of subscriptions removed
233
-
234
- **Example:**
235
- ```typescript
236
- const removed = topics.unsubscribeAll('customers');
237
- console.log(`Removed ${removed} subscriptions`);
238
- ```
239
-
240
- ### Topic and Event Types
241
-
242
- ```typescript
243
- interface TopicDefinition {
244
- id: string;
245
- name: string;
246
- description?: string;
247
- eventTypes: TopicEventType[];
248
- }
249
-
250
- interface TopicEvent<T = any> {
251
- topic: string;
252
- type: string;
253
- data: T;
254
- timestamp: string;
255
- }
256
- ```
257
-
258
- ### Example: React Component with Pub/Sub
259
-
260
- ```typescript
261
- import { useEffect, useState } from 'react';
262
- import { topics, type TopicEvent } from '@final-commerce/command-frame';
263
-
264
- function CustomerEvents() {
265
- const [events, setEvents] = useState<TopicEvent[]>([]);
266
-
267
- useEffect(() => {
268
- // Subscribe on mount
269
- const subscriptionId = topics.subscribe('customers', (event) => {
270
- if (event.type === 'customer-created') {
271
- setEvents(prev => [event, ...prev]);
272
- }
273
- });
274
-
275
- // Unsubscribe on unmount
276
- return () => {
277
- topics.unsubscribe('customers', subscriptionId);
278
- };
279
- }, []);
280
-
281
- return (
282
- <div>
283
- <h2>Customer Events ({events.length})</h2>
284
- {events.map((event, index) => (
285
- <div key={index}>
286
- <p>Type: {event.type}</p>
287
- <pre>{JSON.stringify(event.data, null, 2)}</pre>
288
- </div>
289
- ))}
290
- </div>
291
- );
292
- }
293
- ```
294
-
295
- ### Available Topics
296
-
297
- #### Customers Topic (`customers`)
298
-
299
- The customers topic provides events related to customer lifecycle and cart assignment.
300
-
301
- **Event Types:**
302
-
303
- 1. **`customer-created`** - Fired when a new customer is created
304
- - **Event Data:**
305
- ```typescript
306
- {
307
- customer: {
308
- _id: string;
309
- companyId: string;
310
- email: string;
311
- firstName: string;
312
- lastName: string;
313
- phone?: string;
314
- tags?: string[];
315
- metadata?: Record<string, string>[];
316
- notes?: CustomerNote[];
317
- billing: Address | null;
318
- shipping: Address | null;
319
- createdAt: string;
320
- updatedAt: string;
321
- // ... other customer fields
322
- }
323
- }
324
- ```
325
-
326
- 2. **`customer-updated`** - Fired when a customer's information is updated
327
- - **Event Data:**
328
- ```typescript
329
- {
330
- customer: {
331
- // Updated customer object with all fields
332
- }
333
- }
334
- ```
335
-
336
- 3. **`customer-note-added`** - Fired when a note is added to a customer
337
- - **Event Data:**
338
- ```typescript
339
- {
340
- customer: {
341
- // Customer object with updated notes array
342
- },
343
- note: {
344
- createdAt: string;
345
- message: string;
346
- }
347
- }
348
- ```
349
-
350
- 4. **`customer-note-deleted`** - Fired when a note is deleted from a customer
351
- - **Event Data:**
352
- ```typescript
353
- {
354
- customer: {
355
- // Customer object with updated notes array
356
- },
357
- note: {
358
- createdAt: string;
359
- message: string;
360
- }
361
- }
362
- ```
363
-
364
- 5. **`customer-assigned`** - Fired when a customer is assigned to the cart
365
- - **Event Data:**
366
- ```typescript
367
- {
368
- customer: {
369
- // Full customer object
370
- }
371
- }
372
- ```
373
-
374
- 6. **`customer-unassigned`** - Fired when a customer is unassigned from the cart
375
- - **Event Data:**
376
- ```typescript
377
- {
378
- customer: {
379
- // Full customer object (before removal)
380
- }
381
- }
382
- ```
383
-
384
- **Example: Subscribing to Customer Events**
385
-
386
- ```typescript
387
- import { topics, type TopicEvent } from '@final-commerce/command-frame';
388
-
389
- // Subscribe to all customer events
390
- const subscriptionId = topics.subscribe('customers', (event: TopicEvent) => {
391
- switch (event.type) {
392
- case 'customer-created':
393
- console.log('New customer created:', event.data.customer);
394
- // Update your customer list, show notification, etc.
395
- break;
396
-
397
- case 'customer-updated':
398
- console.log('Customer updated:', event.data.customer);
399
- // Refresh customer details in your UI
400
- break;
401
-
402
- case 'customer-note-added':
403
- console.log('Note added to customer:', event.data.customer._id);
404
- console.log('Note:', event.data.note);
405
- // Update customer notes display
406
- break;
407
-
408
- case 'customer-note-deleted':
409
- console.log('Note deleted from customer:', event.data.customer._id);
410
- // Update customer notes display
411
- break;
412
-
413
- case 'customer-assigned':
414
- console.log('Customer assigned to cart:', event.data.customer);
415
- // Update cart UI to show customer info
416
- break;
417
-
418
- case 'customer-unassigned':
419
- console.log('Customer unassigned from cart:', event.data.customer);
420
- // Clear customer info from cart UI
421
- break;
422
- }
423
- });
424
-
425
- // Later, unsubscribe
426
- topics.unsubscribe('customers', subscriptionId);
427
- ```
428
-
429
- **Example: Filtering Specific Event Types**
430
-
431
- ```typescript
432
- import { topics, type TopicEvent } from '@final-commerce/command-frame';
433
-
434
- // Only listen for customer assignment/unassignment
435
- const subscriptionId = topics.subscribe('customers', (event: TopicEvent) => {
436
- if (event.type === 'customer-assigned' || event.type === 'customer-unassigned') {
437
- console.log(`Customer ${event.type}:`, event.data.customer);
438
- // Update your cart UI accordingly
439
- }
440
- });
441
- ```
442
-
443
- ### Host Application (Render) - Publishing Events
444
-
445
- In the Render application, use the `topicPublisher` to publish events:
446
-
447
- ```typescript
448
- import { topicPublisher } from '@render/command-frame';
449
-
450
- // When a customer is created
451
- topicPublisher.publish('customers', 'customer-created', {
452
- customer: newCustomer
453
- });
454
-
455
- // When a customer is updated
456
- topicPublisher.publish('customers', 'customer-updated', {
457
- customer: updatedCustomer
458
- });
459
-
460
- // When a note is added to a customer
461
- topicPublisher.publish('customers', 'customer-note-added', {
462
- customer: updatedCustomer,
463
- note: newNote
464
- });
465
-
466
- // When a note is deleted from a customer
467
- topicPublisher.publish('customers', 'customer-note-deleted', {
468
- customer: updatedCustomer,
469
- note: deletedNote
470
- });
471
-
472
- // When a customer is assigned to the cart
473
- topicPublisher.publish('customers', 'customer-assigned', {
474
- customer: customer
475
- });
476
-
477
- // When a customer is unassigned from the cart
478
- topicPublisher.publish('customers', 'customer-unassigned', {
479
- customer: customer
480
- });
481
- ```
482
-
483
- The host application must register topics before they can be used. Topics are registered automatically when the `TopicPublisher` is initialized. See the Render application's pub/sub implementation for details on topic registration.
484
-
485
- ## Actions Documentation
486
-
487
- Each action has detailed documentation with complete parameter descriptions, response structures, and multiple usage examples:
153
+ Each command has detailed documentation with complete parameter descriptions, response structures, and multiple usage examples:
488
154
 
489
155
  ### [getCustomers](https://github.com/Final-Commerce/command-frame/blob/main/src/actions/get-customers/README.md)
490
156
 
@@ -702,7 +368,55 @@ Triggers a Zapier webhook with the current context data (cart, customer, order,
702
368
 
703
369
  ### [exampleFunction](https://github.com/Final-Commerce/command-frame/blob/main/src/actions/example-function/README.md)
704
370
 
705
- An example/template function for reference. See the documentation for the structure to follow when creating new actions.
371
+ An example/template function for reference. See the documentation for the structure to follow when creating new commands.
372
+
373
+ ## Pub/Sub System
374
+
375
+ The library includes a pub/sub system that allows iframe apps to subscribe to topics and receive events published by the host application (Render).
376
+
377
+ ### Available Topics
378
+
379
+ #### Customer Events
380
+ - **[customers](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/topics/customers/README.md)** - Customer lifecycle events
381
+ - `customer-created` - Fired when a new customer is created
382
+ - `customer-updated` - Fired when a customer's information is updated
383
+ - `customer-note-added` - Fired when a note is added to a customer
384
+ - `customer-note-deleted` - Fired when a note is deleted from a customer
385
+ - `customer-assigned` - Fired when a customer is assigned to the cart
386
+ - `customer-unassigned` - Fired when a customer is unassigned from the cart
387
+
388
+ #### Order Events
389
+ - **[orders](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/topics/orders/README.md)** - Order lifecycle events
390
+ - `order-created` - Fired when a new order is created
391
+ - `order-updated` - Fired when an order is updated
392
+
393
+ #### Refund Events
394
+ - **[refunds](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/topics/refunds/README.md)** - Refund lifecycle events
395
+ - `refund-created` - Fired when a refund is created
396
+ - `refund-updated` - Fired when a refund is updated
397
+
398
+ #### Product Events
399
+ - **[products](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/topics/products/README.md)** - Product sync events
400
+ - `product-created` - Fired when a product is created
401
+ - `product-updated` - Fired when a product is updated
402
+
403
+ #### Cart Events
404
+ - **[cart](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/topics/cart/README.md)** - Cart operation events
405
+ - `cart-created` - Fired when a cart is created
406
+ - `customer-assigned` - Fired when a customer is assigned to the cart
407
+ - `product-added` - Fired when a product is added to the cart
408
+ - `product-deleted` - Fired when a product is removed from the cart
409
+ - `cart-discount-added` - Fired when a discount is added to the cart
410
+ - `cart-discount-removed` - Fired when a discount is removed from the cart
411
+ - `cart-fee-added` - Fired when a fee is added to the cart
412
+ - `cart-fee-removed` - Fired when a fee is removed from the cart
413
+
414
+ #### Payment Events
415
+ - **[payments](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/topics/payments/README.md)** - Payment processing events
416
+ - `payment-done` - Fired when a payment is successfully completed
417
+ - `payment-err` - Fired when a payment fails
418
+
419
+ For detailed documentation on each topic and its events, including payload structures and usage examples, see the [Pub/Sub Documentation](https://github.com/Final-Commerce/command-frame/blob/main/src/pubsub/README.md).
706
420
 
707
421
  ## Examples
708
422
 
@@ -733,7 +447,7 @@ This will log all postMessage communication to the console, including:
733
447
 
734
448
  ## Type Safety
735
449
 
736
- All actions are fully typed with TypeScript. Import types for use in your code:
450
+ All commands are fully typed with TypeScript. Import types for use in your code:
737
451
 
738
452
  ```typescript
739
453
  import type {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@final-commerce/command-frame",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "Commands Frame library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",