@artaio/arta-browser 2.11.0 → 2.12.0-color-fixes1e62d279800a90b258bb6b27be7e06e513e5ca65

package/README.md

@@ -1,8 +1,9 @@
 # arta-browser
 
-arta-browser is a TypeScript SDK providing easy setup for Arta's Estimates widget.
+arta-browser is a TypeScript SDK providing easy setup for Arta's Estimates and Tracking widgets.
 
-[Arta Estimates](https://manual.arta.io/guides/solutions/no-code/estimates/estimates-widget) enables Arta's clients to dynamically generate shipping estimates (non-bookable) for their customers.
+* Use [Arta Estimates](https://manual.arta.io/guides/solutions/no-code/estimates/estimates-widget) to dynamically generate shipping estimates (non-bookable) on your own website.
+* Use [Arta Tracking](https://manual.arta.io/guides/solutions/no-code/post-sale/tracking) to easily present clear and up-to-date tracking information on your own website.
 
 ## Installation
 
@@ -29,41 +30,113 @@ And you can then import `Arta` object for example:
 import Arta from '@artaio/arta-browser';
 ```
 
-### Basic Usage
-```jsx
-import Arta from '@artaio/arta-browser';
+## Basic Usage
 
-// On load
-Arta.init('<YOUR_API_KEY>');
-... // Your code
-```
+### For the Estimates widget
 
-#### For Estimates widget
 ```jsx
-// On widget display
-const estimate = Arta.estimate({origin, objects}, config); // check types for more details
-await esimate.validate(); // mandatory for setting estimate.isReady
+// On page load, initialize the Arta SDK with your publishable API key
+Arta.init('<YOUR_API_KEY>');
+
+// Set up origin and object details, request preferences as well as
+// your widget configuration overrides
+const origin = {
+  city: 'Brooklyn',
+  region: 'NY',
+  country: 'US',
+  postal_code: '11249',
+};
+
+const objects = [
+  {
+    depth: 2,
+    width: 36,
+    height: 24,
+    subtype: 'painting_unframed',
+    unit_of_measurement: 'in',
+    value_currency: 'USD',
+    value: 500.0,
+  },
+];
+
+const requestPreferences = { currency: 'EUR' };
+
+const widgetConfig = {
+  style: {
+    position: 'center',
+    pricingDisplay: 'range',
+  },
+};
+
+// Setup an instance of the estimates widget
+const estimate = Arta.estimate(
+  { origin, objects, requestPreferences },
+  widgetConfig
+);
+
+// Validate the widget before rendering it
+await esimate.validate();
+
+// `estimate.isReady` will be true if validations pass and false if
+// they do not. You can choose to render a button to open the widget
+// when the widget has been validated.
+//
+// `estimate.open()` will render the widget on your page.
+esimate.isReady && (
+  <Button onClick={() => estimate.open()}>Estimate Shipping</Button>
+);
 
-// estimate.open() will render the widget
-esimate.isReady && <Button onClick={() => estimate.open()}>
 ```
 
-#### For Tracking widget
+The Arta Estimates widget has many configuration options to customize the look and feel of the widget. You can view the full list of options in [/lib/estimateConfig.ts](/lib/estimateConfig.ts) and view a live demo at [manual.arta.io/estimates-demo](https://manual.arta.io/estimates-demo/).
+
+For additional examples using different frontend frameworks please check out [artaio/arta-browser-examples on GitHub](https://github.com/artaio/arta-browser-examples).
+
+### For the Tracking widget
+
 ```jsx
-// On widget display
-const shipmentId = '450727fa-9036-4252-8a86-02af6f09caa6'; // arta shipment UUId
-const tracking = Arta.tracking(shipmentId, config); // check types for more details
-await esimate.validate(); // mandatory for setting tracking.isReady
+// On page load, initialize the Arta SDK with your publishable API key
+Arta.init('<YOUR_API_KEY>');
 
-// tracking.open() will render the widget
-esimate.isReady && <Button onClick={() => tracking.open()}>
+// Optionally, build your Tracking widget configuration
+const config = {
+  animation: {
+    in: {
+      type: 'slide',
+      duration: 500,
+      easing: 'ease-in-out',
+    },
+    out: {
+      type: 'slide',
+      duration: 250,
+      easing: 'ease-in-out',
+    },
+  },
+  style: {
+    color: {
+      iconPrimary: 'blue',
+    },
+  },
+};
+
+// Setup an instance of the tracking widget
+const tracking = Arta.tracking('<SHIPMENT_ID>', config);
+
+// Validate the widget before rendering it
+await tracking.validate();
+// `tracking.isReady` will be true if validations pass and false if
+// they do not. You can choose to render a button to open the widget
+// when the widget has been validated.
+//
+// `tracking.open()` will render the widget on your page.
+tracking.isReady && <Button onClick={() => tracking.open()}>Track</Button>;
 ```
 
-For more details and examples using different frontend frameworks please check https://github.com/artaio/arta-browser-examples.
+The Arta Tracking widget has many configuration options to customize the look and feel of the widget. You can view the full list of options in [/lib/trackingConfig.ts](/lib/trackingConfig.ts).
 
 ## Contributing
 
-Please ensure that all the examples available on https://github.com/artaio/arta-browser-examples are still working before opening a PR.
+Please ensure that all the examples available on [github.com/artaio/arta-browser-examples](https://github.com/artaio/arta-browser-examples) are still working before opening a PR.
 
 ### Development