ui.shipaid.com 0.2.11 → 0.2.12

package/README.md

@@ -33,14 +33,53 @@ Then add the widget element where needed:
 
 <!-- With customised text -->
 <shipaid-widget>
-  <p>Loading ShipAid Protection</p>
+  <p slot="loading">Loading ShipAid Protection</p>
+</shipaid-widget>
+```
+
+#### Test Mode
+
+Sometimes, a store won't have activated their subscription before you install the widget - in this case, the widget does not display (you will notice a message in the console reflecting this). So to force the widget to show while you are installing and testing it, you can add this query param to the page URL: `shipaid-test`. 
+For example: `https://some-store.myshopify.com/cart?shipaid-text`
+
+### Slots
+
+Slots, with the syntax `slot="<slot name>"`, can be used to customise the widgets content - for example, a merchant may want to add a custom subtitle, which can be done like so:
+```html
+<shipaid-widget>
+  <p slot="subtitle">Shipping protection is required to be able to return or refunds items.</p>
 </shipaid-widget>
 ```
 
+The default content will be replaced by any slot content. You can also add inline styles to the slots, if you need to change the text color for example:
+```html
+<span slot="title" style="color: white; font-weight: 500;">Package Protection</span>
+```
+
+| Name | Description |
+|--------|-------------|
+| `loading` | Replaces the text that is shown whilst the widget is loading - I.e. fetching content from the Shopify or ShipAid API's. |
+| `title` | Replaces the default title. |
+| `subtitle` | Replaces the default subtitle. |
+
+### Props
+
+This is a list of props that can be used to configure the widget:
+
+| Prop | Description | Value/Type |
+|--------|-------------|---------|
+| `disablePolling` | Sets whether the cart should disable polling (enabled by default) - should be disabled if integrating manually with an ajax cart. | `boolean` |
+| `pollingInterval` | If polling is enabled, it sets the interval (in ms) between API updates. | `number` in milliseconds |
+| `disableRefresh ` | Sets whether the store cart should be updated when the protection item is added/removed. Add if you want to initially hide the protection product from the cart, even if it has just been added. | `boolean` |
 
 ### Events
 
-This is a list of the events emitted by the widget:
+This is a list of the events emitted by the widget. You can listen to these events like so:
+```js
+document.addEventListener('shipaid-protection-status', ({ detail }) => {
+  console.log(detail.cart) // ShopifyCart
+})
+```
 
 | Event | Description | Payload |
 |-------|-------------|---------|
@@ -49,7 +88,12 @@ This is a list of the events emitted by the widget:
 
 ### Methods
 
-This is a list of public methods that can be used to change protection settings:
+This is a list of public methods available on the widget HTMLElement that can be used to change protection settings. These can be used by querying the element:
+
+```js
+const shipAidEl = document.querySelector('shipaid-widget')
+if (shipAidEl) await shipAidEl.updateCart()
+```
 
 | Method | Description | Payload |
 |--------|-------------|---------|
@@ -58,15 +102,6 @@ This is a list of public methods that can be used to change protection settings:
 | `addProtection` | Adds the relevant protection item to cart. | |
 | `removeProtection` | Removes the protection item from the cart. | |
 
-### Props
-
-This is a list of props that can be used to configure the widget:
-
-| Prop | Description | Value/Type |
-|--------|-------------|---------|
-| `disablePolling` | Sets whether the cart should disable polling (enabled by default) - should be disabled if integrating manually with an ajax cart. | `boolean` |
-| `pollingInterval` | If polling is enabled, it sets the interval (in ms) between API updates. | `number` in milliseconds |
-| `disableRefresh ` | Sets whether the store cart should be updated when the protection item is added/removed. Add if you want to initially hide the protection product from the cart, even if it has just been added. | `boolean` |
 
 ## Contributing
 

package/dist/widget.es.js

@@ -1551,10 +1551,11 @@ let ShipAidWidget = class extends s {
           <p class="popup-disclaimer">
             By purchasing this protection, you are agreeing to our Terms Of
             Service and Privacy Policy. You are not obligated to purchase this
-            protection. This protection is NOT insurance. Purchasing this
-            protection does not guarantee you will be reimbursed for any product
-            or shipping costs. The claim process and decision for compensation
-            is strictly decided by the brand you a purchasing from.
+            protection. This protection is NOT insurance. The claim process and
+            decision for compensation are strictly decided by the brand you are
+            purchasing from in this transaction. Each claim will be reviewed by
+            their customer service team, and you'll get a response accepting
+            or denying the claim within 2-3 business days.
           </p>
           <div class="popup-footer">
             <div class="footer-links">

package/dist/widget.iife.js

@@ -474,10 +474,11 @@ function pt(t,e,i){return t?e():null==i?void 0:i()}const lt=((t,...e)=>{const i=
           <p class="popup-disclaimer">
             By purchasing this protection, you are agreeing to our Terms Of
             Service and Privacy Policy. You are not obligated to purchase this
-            protection. This protection is NOT insurance. Purchasing this
-            protection does not guarantee you will be reimbursed for any product
-            or shipping costs. The claim process and decision for compensation
-            is strictly decided by the brand you a purchasing from.
+            protection. This protection is NOT insurance. The claim process and
+            decision for compensation are strictly decided by the brand you are
+            purchasing from in this transaction. Each claim will be reviewed by
+            their customer service team, and you'll get a response accepting
+            or denying the claim within 2-3 business days.
           </p>
           <div class="popup-footer">
             <div class="footer-links">

package/dist/widget.umd.js

@@ -474,10 +474,11 @@ function pt(t,e,i){return t?e():null==i?void 0:i()}const lt=((t,...e)=>{const i=
           <p class="popup-disclaimer">
             By purchasing this protection, you are agreeing to our Terms Of
             Service and Privacy Policy. You are not obligated to purchase this
-            protection. This protection is NOT insurance. Purchasing this
-            protection does not guarantee you will be reimbursed for any product
-            or shipping costs. The claim process and decision for compensation
-            is strictly decided by the brand you a purchasing from.
+            protection. This protection is NOT insurance. The claim process and
+            decision for compensation are strictly decided by the brand you are
+            purchasing from in this transaction. Each claim will be reviewed by
+            their customer service team, and you'll get a response accepting
+            or denying the claim within 2-3 business days.
           </p>
           <div class="popup-footer">
             <div class="footer-links">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui.shipaid.com",
   "private": false,
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
   "main": "dist/widget.umd.js",
   "unpkg": "dist/widget.iife.js",