@artaio/arta-browser - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0

dist/components/DrawerFooter/index.js

@@ -17,4 +17,4 @@ "use strict";
 var DrawerFooter = function () {
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__wrapper" }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ class: "artajs__tracking__footer__content" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__powered__by__text" }, { children: "Powered by" })), (0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__powered__by__logo" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__powered__by__logo" }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "50", height: "16", viewBox: "0 0 50 16", fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.47431 10.2038C9.3445 10.2073 9.2089 10.2084 9.06867 10.2107C7.86333 10.2256 6.68118 10.3312 5.51641 10.6571C4.51157 10.9383 3.66668 11.4087 3.03388 12.2476C2.98173 12.3187 2.92957 12.3945 2.87974 12.4714C2.85424 12.5104 2.8299 12.5482 2.80556 12.5861C2.48453 13.0968 2.22491 13.643 2.22491 13.643C1.96994 14.2512 1.50171 14.973 0.918749 15.3987C0.769241 15.5066 0.846892 15.7384 1.03117 15.7384H3.51601C3.68522 15.7384 3.77562 15.533 3.65277 15.4182C3.35492 15.1394 3.24945 14.81 3.16948 14.3349C3.05126 13.6361 3.43604 12.9005 3.87993 12.3841C4.39799 11.7805 5.07831 11.4638 5.83976 11.2642C5.88496 11.2527 5.93016 11.2412 5.97536 11.2297C6.99642 10.9796 8.02791 10.8981 9.07562 10.8866C9.21818 10.8843 9.35609 10.8832 9.48938 10.8797C9.67829 10.8751 9.82664 10.7202 9.822 10.5332C9.81737 10.3461 9.66206 10.1992 9.47199 10.2038H9.47431Z", fill: "#5BB988" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.0679 15.7384H11.3322C11.1618 15.7384 11.0749 15.533 11.1977 15.4171C11.4886 15.1485 11.6428 14.7308 11.6428 14.2317C11.6428 13.7325 11.484 13.0187 11.1421 12.1202L10.6889 10.905L10.4166 10.2084H10.4154C10.3864 10.112 9.42913 7.0619 8.36635 4.33651C7.71037 2.6462 6.92111 0.662124 6.49113 0.39934C6.44708 0.3718 6.41 0.340816 6.38102 0.307538C6.27324 0.187047 6.36248 0 6.52474 0H10.8025C10.901 0 10.9845 0.0757369 10.9903 0.175572C11.0239 0.728681 11.2116 1.42064 11.6196 2.49588L12.3474 4.33537L15.3445 11.9137C16.0492 13.7176 16.558 14.8639 17.1873 15.4033C17.3218 15.5192 17.2441 15.7361 17.0668 15.7361L17.0679 15.7384Z", fill: "#5BB988" }), (0, jsx_runtime_1.jsx)("path", { d: "M26.1566 4.79778C24.862 4.79778 24.038 5.36351 23.5767 5.83285C23.4562 5.95449 23.5895 6.15186 23.7506 6.09219C23.9708 6.00957 24.2269 5.95564 24.483 5.99121C25.2271 6.09449 25.139 6.63842 25.3175 7.18579C25.5296 7.83299 26.0326 8.30233 26.8671 8.30233C27.7757 8.30233 28.5128 7.58283 28.5128 6.67284C28.5128 5.86154 27.8696 4.79663 26.1578 4.79663L26.1566 4.79778Z", fill: "#5BB988" }), (0, jsx_runtime_1.jsx)("path", { d: "M24.1203 15.3838C23.8711 15.2254 23.1746 14.6229 23.1746 12.8489V6.82777C23.1746 5.78352 22.3193 4.93665 21.2646 4.93665H19.6351H18.7855C18.6847 4.93665 18.6024 5.01812 18.6024 5.11795V5.12943C18.6024 5.19254 18.636 5.24992 18.6893 5.28435C18.9385 5.44271 19.6351 6.04516 19.6351 7.81924V12.85C19.6351 14.6229 18.9374 15.2254 18.6893 15.3849C18.636 15.4193 18.6024 15.4767 18.6024 15.5398V15.5513C18.6024 15.6511 18.6847 15.7326 18.7855 15.7326H19.6351H23.1746H24.0241C24.1249 15.7326 24.2072 15.6511 24.2072 15.5513V15.5398C24.2072 15.4767 24.1736 15.4193 24.1203 15.3849V15.3838Z", fill: "#5BB988" }), (0, jsx_runtime_1.jsx)("path", { d: "M36.5723 4.93205H34.223V4.80008V1.73618C34.223 1.56979 34.0051 1.50438 33.9124 1.64323C33.2646 2.60945 31.6849 4.68418 29.9476 4.91254C29.7691 4.93549 29.6393 5.09156 29.6393 5.27057C29.6393 5.47024 29.8027 5.63319 30.0055 5.63319H30.6835C30.6835 7.40498 30.6835 11.4638 30.6835 12.9579C30.6835 14.8938 31.8587 16 33.5786 16C34.9022 16 35.8259 15.238 36.3011 14.7205C36.4147 14.5965 36.3092 14.398 36.1423 14.4221C35.2962 14.5495 34.223 14.1169 34.223 12.6721V5.6309H36.5978C36.7855 5.6309 36.9385 5.47942 36.9385 5.29352C36.9385 5.09385 36.7751 4.9309 36.5723 4.9309V4.93205Z", fill: "#5BB988" }), (0, jsx_runtime_1.jsx)("path", { d: "M43.9341 9.52567C44.1022 9.39256 43.9515 9.13092 43.751 9.20551C41.797 9.93534 38.2853 11.5453 38.2853 13.6832C38.2853 15.5433 39.9229 15.9977 40.9567 15.9977C42.869 15.9977 43.8113 15.0005 44.1659 14.4945C44.2447 14.382 44.1624 14.2305 44.0257 14.234C43.3952 14.2546 42.0369 14.1055 42.0369 12.4312C42.0369 11.2688 43.0811 10.2016 43.9341 9.52453V9.52567Z", fill: "#5BB988" }), (0, jsx_runtime_1.jsx)("path", { d: "M49.0741 15.3677C48.825 15.2093 48.1284 14.6069 48.1284 12.8328V8.46643C48.1284 6.49612 46.3923 4.76794 43.474 4.76794C39.8846 4.76794 38.7848 6.26662 38.4069 6.94137C37.569 8.43889 38.2087 9.49462 38.9227 9.89052C39.6366 10.2864 40.7191 10.042 41.1595 9.25479C41.5536 8.5502 41.3635 7.68382 40.7492 7.19612C40.7492 7.19612 40.7492 7.19382 40.7469 7.19267C40.5823 7.063 39.9739 6.50186 40.3077 6.00154C40.5974 5.56777 41.1977 5.31073 42.0936 5.31073C43.9712 5.31073 44.5878 7.45546 44.5878 9.0138V13.822C44.5878 14.8662 45.4431 15.7131 46.4977 15.7131H48.1273H48.9768C49.0776 15.7131 49.1599 15.6316 49.1599 15.5318V15.5203C49.1599 15.4572 49.1263 15.3998 49.073 15.3654L49.0741 15.3677Z", fill: "#5BB988" })] })) })) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__wrapper" }, { children: (0, jsx_runtime_1.jsx)("a", __assign({ href: "https://arta.io/" }, { children: (0, jsx_runtime_1.jsxs)("button", __assign({ class: "artajs__tracking__footer__content" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__powered__by__text" }, { children: "Powered by" })), (0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__powered__by__logo" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__footer__powered__by__logo" }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "50", height: "16", viewBox: "0 0 50 16", fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.47431 10.2038C9.3445 10.2073 9.2089 10.2084 9.06867 10.2107C7.86333 10.2256 6.68118 10.3312 5.51641 10.6571C4.51157 10.9383 3.66668 11.4087 3.03388 12.2476C2.98173 12.3187 2.92957 12.3945 2.87974 12.4714C2.85424 12.5104 2.8299 12.5482 2.80556 12.5861C2.48453 13.0968 2.22491 13.643 2.22491 13.643C1.96994 14.2512 1.50171 14.973 0.918749 15.3987C0.769241 15.5066 0.846892 15.7384 1.03117 15.7384H3.51601C3.68522 15.7384 3.77562 15.533 3.65277 15.4182C3.35492 15.1394 3.24945 14.81 3.16948 14.3349C3.05126 13.6361 3.43604 12.9005 3.87993 12.3841C4.39799 11.7805 5.07831 11.4638 5.83976 11.2642C5.88496 11.2527 5.93016 11.2412 5.97536 11.2297C6.99642 10.9796 8.02791 10.8981 9.07562 10.8866C9.21818 10.8843 9.35609 10.8832 9.48938 10.8797C9.67829 10.8751 9.82664 10.7202 9.822 10.5332C9.81737 10.3461 9.66206 10.1992 9.47199 10.2038H9.47431Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.0679 15.7384H11.3322C11.1618 15.7384 11.0749 15.533 11.1977 15.4171C11.4886 15.1485 11.6428 14.7308 11.6428 14.2317C11.6428 13.7325 11.484 13.0187 11.1421 12.1202L10.6889 10.905L10.4166 10.2084H10.4154C10.3864 10.112 9.42913 7.0619 8.36635 4.33651C7.71037 2.6462 6.92111 0.662124 6.49113 0.39934C6.44708 0.3718 6.41 0.340816 6.38102 0.307538C6.27324 0.187047 6.36248 0 6.52474 0H10.8025C10.901 0 10.9845 0.0757369 10.9903 0.175572C11.0239 0.728681 11.2116 1.42064 11.6196 2.49588L12.3474 4.33537L15.3445 11.9137C16.0492 13.7176 16.558 14.8639 17.1873 15.4033C17.3218 15.5192 17.2441 15.7361 17.0668 15.7361L17.0679 15.7384Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M26.1566 4.79778C24.862 4.79778 24.038 5.36351 23.5767 5.83285C23.4562 5.95449 23.5895 6.15186 23.7506 6.09219C23.9708 6.00957 24.2269 5.95564 24.483 5.99121C25.2271 6.09449 25.139 6.63842 25.3175 7.18579C25.5296 7.83299 26.0326 8.30233 26.8671 8.30233C27.7757 8.30233 28.5128 7.58283 28.5128 6.67284C28.5128 5.86154 27.8696 4.79663 26.1578 4.79663L26.1566 4.79778Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M24.1203 15.3838C23.8711 15.2254 23.1746 14.6229 23.1746 12.8489V6.82777C23.1746 5.78352 22.3193 4.93665 21.2646 4.93665H19.6351H18.7855C18.6847 4.93665 18.6024 5.01812 18.6024 5.11795V5.12943C18.6024 5.19254 18.636 5.24992 18.6893 5.28435C18.9385 5.44271 19.6351 6.04516 19.6351 7.81924V12.85C19.6351 14.6229 18.9374 15.2254 18.6893 15.3849C18.636 15.4193 18.6024 15.4767 18.6024 15.5398V15.5513C18.6024 15.6511 18.6847 15.7326 18.7855 15.7326H19.6351H23.1746H24.0241C24.1249 15.7326 24.2072 15.6511 24.2072 15.5513V15.5398C24.2072 15.4767 24.1736 15.4193 24.1203 15.3849V15.3838Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M36.5723 4.93205H34.223V4.80008V1.73618C34.223 1.56979 34.0051 1.50438 33.9124 1.64323C33.2646 2.60945 31.6849 4.68418 29.9476 4.91254C29.7691 4.93549 29.6393 5.09156 29.6393 5.27057C29.6393 5.47024 29.8027 5.63319 30.0055 5.63319H30.6835C30.6835 7.40498 30.6835 11.4638 30.6835 12.9579C30.6835 14.8938 31.8587 16 33.5786 16C34.9022 16 35.8259 15.238 36.3011 14.7205C36.4147 14.5965 36.3092 14.398 36.1423 14.4221C35.2962 14.5495 34.223 14.1169 34.223 12.6721V5.6309H36.5978C36.7855 5.6309 36.9385 5.47942 36.9385 5.29352C36.9385 5.09385 36.7751 4.9309 36.5723 4.9309V4.93205Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M43.9341 9.52567C44.1022 9.39256 43.9515 9.13092 43.751 9.20551C41.797 9.93534 38.2853 11.5453 38.2853 13.6832C38.2853 15.5433 39.9229 15.9977 40.9567 15.9977C42.869 15.9977 43.8113 15.0005 44.1659 14.4945C44.2447 14.382 44.1624 14.2305 44.0257 14.234C43.3952 14.2546 42.0369 14.1055 42.0369 12.4312C42.0369 11.2688 43.0811 10.2016 43.9341 9.52453V9.52567Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M49.0741 15.3677C48.825 15.2093 48.1284 14.6069 48.1284 12.8328V8.46643C48.1284 6.49612 46.3923 4.76794 43.474 4.76794C39.8846 4.76794 38.7848 6.26662 38.4069 6.94137C37.569 8.43889 38.2087 9.49462 38.9227 9.89052C39.6366 10.2864 40.7191 10.042 41.1595 9.25479C41.5536 8.5502 41.3635 7.68382 40.7492 7.19612C40.7492 7.19612 40.7492 7.19382 40.7469 7.19267C40.5823 7.063 39.9739 6.50186 40.3077 6.00154C40.5974 5.56777 41.1977 5.31073 42.0936 5.31073C43.9712 5.31073 44.5878 7.45546 44.5878 9.0138V13.822C44.5878 14.8662 45.4431 15.7131 46.4977 15.7131H48.1273H48.9768C49.0776 15.7131 49.1599 15.6316 49.1599 15.5318V15.5203C49.1599 15.4572 49.1263 15.3998 49.073 15.3654L49.0741 15.3677Z", fill: "currentColor" })] })) })) }))] })) })) })));
 };
 exports.DrawerFooter = DrawerFooter;

dist/components/Timeline/SecondaryStep.js

@@ -18,4 +18,4 @@ "use strict";
     var config = _a.config;
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__timeline__minimal__secondary__step" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8 4C8 6.20914 6.20914 8 4 8C1.79086 8 0 6.20914 0 4C0 1.79086 1.79086 0 4 0C6.20914 0 8 1.79086 8 4Z", fill: "#D7D6D0" }) })) })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ class: "artajs__tracking__timeline__minimal__secondary__step" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8 4C8 6.20914 6.20914 8 4 8C1.79086 8 0 6.20914 0 4C0 1.79086 1.79086 0 4 0C6.20914 0 8 1.79086 8 4Z", fill: config.style.color.iconSecondary }) })) })));
 };
 exports.SecondaryStep = SecondaryStep;

dist/trackingConfig.js

@@ -14,3 +14,3 @@ "use strict";
             textSecondary: '#6F6C65',
-            border: '#D7D6D0',
+            border: '#E7E7E7',
             iconPrimary: 'black',
@@ -17,0 +17,0 @@ iconSecondary: 'white',

package.json

 {
   "name": "@artaio/arta-browser",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "",
@@ -5,0 +5,0 @@ "source": "lib/index.ts",

README.md

 # 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.
 
@@ -32,37 +33,109 @@ ## Installation
 
-### 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>');
 
-// estimate.open() will render the widget
-esimate.isReady && <Button onClick={() => estimate.open()}>
+// 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>
+);
+
 ```
 
-#### 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.
 
@@ -69,0 +142,0 @@ ### Development

No alert changes

Improved metrics

Total package byte prevSize

448669

increased by0.65%

Lines of code

6141

increased by0.15%

Number of lines in readme file

146

increased by100%

No dependency changes