Merge pull request #11 from RadarTech/master

Release v1.1.0

README.md

@@ -52,7 +52,7 @@ redshift.setOptions(options: WidgetOptions)
 
 ### Modal
 
-This mode is likely preferable for most websites because it does not disrupt the existing UI in any way. Simply slap `onclick="redshift.open()"` on a button and you're in business.
+This mode is likely preferable for most websites because it does not disrupt the existing UI in any way. Simply slap `onclick="redshift.open()"` on a button and you're in business. You can optionally pre-populate the widget's invoice field by passing it into the open or toggle methods.
 
 #### [View Live Demo](https://codepen.io/cavan-radar/details/pooJxvj?preview_height=650)
 
@@ -66,6 +66,11 @@ This mode is likely preferable for most websites because it does not disrupt the
  */
 redshift.open()
 
+/**
+ * Open the widget with invoice pre-populated
+ */
+redshift.open(invoice)
+
 /**
  * Close the widget
  */
@@ -75,6 +80,11 @@ redshift.close()
  * Toggle the widget
  */
 redshift.toggle()
+
+/**
+ * Toggle the widget with invoice pre-populated
+ */
+redshift.toggle(invoice)
 ```
 
 #### How To

src/api/modal-api.ts

@@ -7,7 +7,7 @@ export class ModalApi extends OptionsApi {
   private _isOpen: boolean;
   private _attach: () => void;
   private _remove: () => void;
-  private _initMessaging: () => void;
+  private _initMessaging: (invoice?: string) => void;
 
   /**
    * Whether or not the trade widget is open
@@ -30,10 +30,11 @@ export class ModalApi extends OptionsApi {
 
   /**
    * Open the widget
+   * @param invoice An optional invoice to pass to the widget (for pre-populating invoice input)
    */
-  public open() {
+  public open(invoice?: string) {
     this._attach();
-    this._initMessaging();
+    this._initMessaging(invoice);
     this._isOpen = true;
   }
 
@@ -47,8 +48,9 @@ export class ModalApi extends OptionsApi {
 
   /**
    * Toggle the widget
+   * @param invoice An optional invoice to pass to the widget (for pre-populating invoice input)
    */
-  public toggle() {
-    this.isOpen ? this.close() : this.open();
+  public toggle(invoice?: string) {
+    this.isOpen ? this.close() : this.open(invoice);
   }
 }

src/mode/modal.ts

@@ -10,7 +10,7 @@ export class Modal extends Shared {
     window.redshift = new ModalApi(
       this.attachToWebpage.bind(this),
       this.removeFromWebpage.bind(this),
-      this.initializeXDomainMessaging.bind(this),
+      this.initializeModalXDomainMessaging.bind(this),
     );
   }
 
@@ -62,13 +62,17 @@ export class Modal extends Shared {
   /**
    * Initialize cross-domain messaging, which includes
    * the close modal method.
+   * @param invoice An optional invoice to pass to the widget (for pre-populating invoice input)
    */
-  public initializeXDomainMessaging() {
+  public initializeModalXDomainMessaging(invoice?: string) {
     super.initializeXDomainMessaging({
       closeModal: () => {
         this.removeFromWebpage();
         return true;
       },
+      getInvoice: () => {
+        return invoice;
+      },
     });
   }
 }

src/types/index.ts

@@ -7,6 +7,7 @@ export interface WidgetOptions {
   brandColor?: string; // Default: #262525
   brandImageUrl?: string; // Default: REDSHIFT Image
   containerId?: string; // The id of the container that the widget will be attached to. Default: body
+  invoice?: string; // an optional invoice to pass to the widget. Used for pre-populating the invoice input.
 }
 
 /**