ui.shipaid.com 0.0.0

package/dist/style.css

@@ -0,0 +1 @@
+.shipaid-prompt{--shipaid-primary: #002bd6;--shipaid-secondary: #0076ff;--shipaid-text: #000000;--shipaid-text-muted: #cccccc;--shipaid-text-grey: #aaaaaa;--shipaid-light-grey: #ebecf0;--shipaid-font: "Lato", sans-serif;--shipaid-font-sm: 14px;--shipaid-font-base: 16px;--shipaid-font-lg: 18px;--shipaid-font-regular: 400;--shipaid-font-heavy: 700;width:400px;font-family:var(--shipaid-font);font-size:var(--shipaid-font-base);color:var(--shipaid-text);display:flex;flex-direction:column;gap:1rem;margin:2rem 0 2rem auto}.shipaid-prompt p,.shipaid-prompt a{margin:0;line-height:1}.shipaid-prompt .prompt-title{text-align:center;font-size:var(--shipaid-font-lg);font-weight:var(--shipaid-font-heavy)}.shipaid-prompt .prompt-product{display:flex;flex-direction:row;gap:2rem;height:55px;margin-top:1rem}.shipaid-prompt .prompt-product .prompt-product-details .prompt-product-details-title{font-size:var(--shipaid-font-base);font-weight:var(--shipaid-font-heavy)}.shipaid-prompt .prompt-product .prompt-product-details .prompt-product-details-description{font-size:var(--shipaid-font-sm);margin-top:1rem}.shipaid-prompt .prompt-product .prompt-product-actions{margin-left:auto;display:flex;flex-direction:column;justify-content:space-between;text-align:right}.shipaid-prompt .prompt-product .prompt-product-actions .prompt-product-actions-price{color:var(--shipaid-text-muted);font-size:var(--shipaid-font-base)}.shipaid-prompt .prompt-product .prompt-product-actions .prompt-product-actions-button{background-color:transparent;border:none;color:var(--shipaid-primary);text-transform:uppercase;font-weight:var(--shipaid-font-heavy);cursor:pointer}.shipaid-prompt .prompt-footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:1rem}.shipaid-prompt .prompt-footer .prompt-footer-about{color:var(--shipaid-text-grey);cursor:pointer;text-decoration:underline;font-size:var(--shipaid-font-sm)}.shipaid-prompt .prompt-footer .prompt-footer-badge{background-color:var(--shipaid-light-grey);color:var(--shipaid-text);padding:.5rem 1.5rem;border-radius:30px;cursor:pointer;text-decoration:none;font-size:var(--shipaid-font-sm)}.shipaid-prompt .prompt-footer .prompt-footer-badge .ship{text-transform:uppercase;color:var(--shipaid-secondary);font-weight:var(--shipaid-font-heavy)}.shipaid-prompt .prompt-footer .prompt-footer-badge .aid{text-transform:uppercase;color:var(--shipaid-text-grey);font-weight:var(--shipaid-font-heavy)}

package/dist/ui.shipaid.com.es.js

@@ -0,0 +1,257 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { state, customElement } from "lit/decorators.js";
+import { LitElement, html } from "lit";
+import { useOnce, useEffect } from "lit-element-effect/effect";
+import { when } from "lit/directives/when.js";
+var styles = '.shipaid-prompt {\n  --shipaid-primary: #002bd6;\n  --shipaid-secondary: #0076ff;\n  --shipaid-text: #000000;\n  --shipaid-text-muted: #cccccc;\n  --shipaid-text-grey: #aaaaaa;\n  --shipaid-light-grey: #ebecf0;\n  --shipaid-font: "Lato", sans-serif;\n  --shipaid-font-sm: 14px;\n  --shipaid-font-base: 16px;\n  --shipaid-font-lg: 18px;\n  --shipaid-font-regular: 400;\n  --shipaid-font-heavy: 700;\n  width: 400px;\n  font-family: var(--shipaid-font);\n  font-size: var(--shipaid-font-base);\n  color: var(--shipaid-text);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 2rem 0 2rem auto;\n}\n.shipaid-prompt p, .shipaid-prompt a {\n  margin: 0;\n  line-height: 1;\n}\n.shipaid-prompt .prompt-title {\n  text-align: center;\n  font-size: var(--shipaid-font-lg);\n  font-weight: var(--shipaid-font-heavy);\n}\n.shipaid-prompt .prompt-product {\n  display: flex;\n  flex-direction: row;\n  gap: 2rem;\n  height: 55px;\n  margin-top: 1rem;\n}\n.shipaid-prompt .prompt-product .prompt-product-details .prompt-product-details-title {\n  font-size: var(--shipaid-font-base);\n  font-weight: var(--shipaid-font-heavy);\n}\n.shipaid-prompt .prompt-product .prompt-product-details .prompt-product-details-description {\n  font-size: var(--shipaid-font-sm);\n  margin-top: 1rem;\n}\n.shipaid-prompt .prompt-product .prompt-product-actions {\n  margin-left: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  text-align: right;\n}\n.shipaid-prompt .prompt-product .prompt-product-actions .prompt-product-actions-price {\n  color: var(--shipaid-text-muted);\n  font-size: var(--shipaid-font-base);\n}\n.shipaid-prompt .prompt-product .prompt-product-actions .prompt-product-actions-button {\n  background-color: transparent;\n  border: none;\n  color: var(--shipaid-primary);\n  text-transform: uppercase;\n  font-weight: var(--shipaid-font-heavy);\n  cursor: pointer;\n}\n.shipaid-prompt .prompt-footer {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 1rem;\n}\n.shipaid-prompt .prompt-footer .prompt-footer-about {\n  color: var(--shipaid-text-grey);\n  cursor: pointer;\n  text-decoration: underline;\n  font-size: var(--shipaid-font-sm);\n}\n.shipaid-prompt .prompt-footer .prompt-footer-badge {\n  background-color: var(--shipaid-light-grey);\n  color: var(--shipaid-text);\n  padding: 0.5rem 1.5rem;\n  border-radius: 30px;\n  cursor: pointer;\n  text-decoration: none;\n  font-size: var(--shipaid-font-sm);\n}\n.shipaid-prompt .prompt-footer .prompt-footer-badge .ship {\n  text-transform: uppercase;\n  color: var(--shipaid-secondary);\n  font-weight: var(--shipaid-font-heavy);\n}\n.shipaid-prompt .prompt-footer .prompt-footer-badge .aid {\n  text-transform: uppercase;\n  color: var(--shipaid-text-grey);\n  font-weight: var(--shipaid-font-heavy);\n}';
+var __defProp2 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp2(target, key, result);
+  return result;
+};
+const currencyFormat = (value) => {
+  var _a, _b, _c, _d, _e;
+  return new Intl.NumberFormat((_b = (_a = window.Shopify) == null ? void 0 : _a.locale) != null ? _b : void 0, {
+    currency: (_e = (_d = (_c = window.Shopify) == null ? void 0 : _c.currency) == null ? void 0 : _d.active) != null ? _e : "USD",
+    style: "currency"
+  }).format(value);
+};
+const runRequest = async (input, init) => {
+  try {
+    const response = await fetch(input, init);
+    if (!response.ok)
+      throw new Error(await response.text());
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error(error);
+    throw new Error("Failed to complete fetch request.");
+  }
+};
+let ShipAidWidget = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    var _a;
+    this._storeDomain = (_a = window.Shopify) == null ? void 0 : _a.shop;
+    this._hasFinishedSetup = false;
+    this._hasProtectionInCart = false;
+    this._state = {
+      loading: false,
+      success: null,
+      error: false
+    };
+    this._fetch = {
+      get: (url) => runRequest(url),
+      post: (url, body) => runRequest(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      })
+    };
+  }
+  render() {
+    var _a, _b;
+    useOnce(this, async () => {
+      var _a2, _b2;
+      const [apiData, cartData] = await Promise.all([this._fetchShipAidData(), this._fetchCart()]);
+      this._store = apiData;
+      this._cart = cartData;
+      const isProductInCart = (_b2 = (_a2 = cartData.items) == null ? void 0 : _a2.some((item) => item.variant_id === apiData.productVariantNumericId)) != null ? _b2 : false;
+      this._hasProtectionInCart = isProductInCart;
+      this._hasFinishedSetup = true;
+      this._dispatchEvent("shipaid-loaded", apiData);
+    });
+    useEffect(this, () => {
+      var _a2, _b2, _c, _d;
+      if (!((_a2 = this._cart) == null ? void 0 : _a2.items))
+        return;
+      const protectionProductIndex = (_c = (_b2 = this._cart) == null ? void 0 : _b2.items) == null ? void 0 : _c.findIndex((item) => {
+        var _a3;
+        return item.variant_id === ((_a3 = this._store) == null ? void 0 : _a3.productVariantNumericId);
+      });
+      const protectionProduct = (_d = this._cart) == null ? void 0 : _d.items[protectionProductIndex];
+      this._hasProtectionInCart = !!protectionProduct;
+      if (protectionProduct) {
+        this._protectionProduct = __spreadProps(__spreadValues({}, protectionProduct), { index: protectionProductIndex, position: protectionProductIndex + 1 });
+      }
+    }, [this._store, this._cart]);
+    const promptTemplate = html`
+      <div class="shipaid-prompt">
+        <p class="prompt-title">${this._hasProtectionInCart ? "Active" : "Inactive"}</p>
+        <div class="prompt-product">
+     <!-- <div class="prompt-product-image">
+            <img src="" alt="ShipAid logo" />
+          </div> -->
+          <div class="prompt-product-details">
+            <p class="prompt-product-details-title">Instant Package Protection</p>
+            <p class="prompt-product-details-description">Resolve shipping issues care-free</p>
+          </div>
+          <div class="prompt-product-actions">
+            <p class="prompt-product-actions-price">${currencyFormat((_b = (_a = this._store) == null ? void 0 : _a.productPrice) != null ? _b : 0)}</p>
+            <button class="prompt-product-actions-button" @click=${this._updateProtection} ?disabled=${this._state.loading}>
+              ${this._state.loading ? "Loading..." : this._hasProtectionInCart ? "Remove" : "+ Add"}
+            </button>
+          </div>
+        </div>
+        <div class="prompt-footer">
+          <b class="prompt-footer-about" href="/">Learn More</b>
+          <a class="prompt-footer-badge" href="/">
+            <span>Powered by</span>
+            <span class="ship">Ship</span>
+            <span class="aid">Aid</span>
+          </a>
+        </div>
+      </div>
+    `;
+    return html`
+      ${when(this._hasFinishedSetup && this._store, () => promptTemplate, () => html`<p>Loading...</p>`)}
+    `;
+  }
+  _dispatchEvent(event, detail = {}) {
+    this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true, detail }));
+  }
+  _setState(state2, message) {
+    this._state = {
+      loading: state2 === "loading",
+      success: state2 === "success",
+      error: state2 === "error" ? message || true : false
+    };
+  }
+  async _updateProtection() {
+    return this._hasProtectionInCart ? this.removeProtection() : this.addProtection();
+  }
+  async _fetchShipAidData() {
+    try {
+      if (!this._storeDomain)
+        throw new Error("Missing store domain - cannot continue.");
+      const variables = { store: this._storeDomain };
+      const query = `query StoreByDomain($store: String!) {
+        store(store: $store) {
+          store
+          productId
+          productVariantId
+          productVariantNumericId
+          productPrice
+        }
+      }`;
+      const { data } = await this._fetch.post("http://localhost:1337/v1/graphql", { query, variables });
+      if (!data.store)
+        throw new Error(`Could not find a store for ${this._storeDomain}`);
+      if (!data.store.productVariantNumericId)
+        throw new Error("Missing variant ID for ShipAid product.");
+      return data.store;
+    } catch (error) {
+      console.error(error);
+      throw new Error(`Could not find a store for ${this._storeDomain}`);
+    }
+  }
+  async _fetchCart() {
+    try {
+      const cart = await this._fetch.get("/cart.js");
+      return cart;
+    } catch (error) {
+      console.error(error);
+      throw new Error("Could not fetch cart for current domain.");
+    }
+  }
+  hasProtection() {
+    return this._hasProtectionInCart;
+  }
+  async addProtection() {
+    var _a, _b;
+    try {
+      if (!((_a = this._store) == null ? void 0 : _a.productVariantNumericId))
+        throw new Error("Store has not been loaded.");
+      if (!((_b = this._cart) == null ? void 0 : _b.items))
+        throw new Error("Cart has not been loaded.");
+      this._setState("loading");
+      const payload = {
+        id: this._store.productVariantNumericId,
+        quantity: 1
+      };
+      const cartItem = await this._fetch.post("/cart/add.js", payload);
+      const updatedCart = __spreadProps(__spreadValues({}, this._cart), {
+        items: [cartItem, ...this._cart.items]
+      });
+      this._cart = updatedCart;
+      this._setState("success");
+      this._dispatchEvent("shipaid-protection-status", { protection: true, cart: updatedCart, lineItem: cartItem });
+    } catch (err) {
+      const error = err;
+      console.error(error);
+      this._setState("error", "Failed to add protection to cart - please try again, or contact us for help.");
+    }
+  }
+  async removeProtection() {
+    var _a;
+    try {
+      if (!((_a = this._store) == null ? void 0 : _a.productVariantNumericId))
+        throw new Error("Store has not been loaded.");
+      if (!this._protectionProduct)
+        throw new Error("Protection product not found.");
+      this._setState("loading");
+      const payload = {
+        id: this._protectionProduct.key,
+        quantity: 0
+      };
+      const cart = await this._fetch.post("/cart/change.js", payload);
+      this._dispatchEvent("shipaid-protection-status", { protection: false, cart, lineItem: this._protectionProduct });
+      this._cart = cart;
+      this._setState("success");
+    } catch (err) {
+      const error = err;
+      console.error(error);
+      this._setState("error", "Failed to add protection to cart - please try again, or contact us for help.");
+    }
+  }
+};
+ShipAidWidget.styles = styles;
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_storeDomain", 2);
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_store", 2);
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_cart", 2);
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_hasFinishedSetup", 2);
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_hasProtectionInCart", 2);
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_protectionProduct", 2);
+__decorateClass([
+  state()
+], ShipAidWidget.prototype, "_state", 2);
+ShipAidWidget = __decorateClass([
+  customElement("shipaid-widget")
+], ShipAidWidget);
+export { ShipAidWidget };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "ui.shipaid.com",
+  "private": false,
+  "version": "0.0.0",
+  "main": "dist/ui.shipaid.com.es.js",
+  "exports": {
+    ".": "./dist/ui.shipaid.com.es.js"
+  },
+  "types": "dist-types/src/shipaid-widget.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "dependencies": {
+    "@lit-labs/task": "^1.1.1",
+    "lit": "^2.2.0",
+    "lit-element-effect": "^1.0.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-lit": "^1.6.1",
+    "eslint-plugin-lit-a11y": "^2.2.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "rollup-plugin-postcss-lit": "^2.0.0",
+    "sass": "^1.49.9",
+    "typescript": "^4.6.2",
+    "vite": "^2.8.6"
+  },
+  "scripts": {
+    "develop": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext=ts --fix"
+  }
+}

package/types/scss.d.ts

@@ -0,0 +1,5 @@
+declare module '*.scss' {
+  import { CSSResultGroup } from 'lit'
+  const styles: CSSResultGroup
+  export default styles
+}

package/types/shipaid.ts

@@ -0,0 +1,13 @@
+export interface ShipAidStore {
+  store: string;
+  productId: string;
+  productVariantId: string;
+  productPrice: number;
+  productVariantNumericId: number
+}
+
+export interface ShipAidStoreQuery {
+  data: {
+    store: ShipAidStore | null
+  }
+}

package/types/shopify.ts

@@ -0,0 +1,84 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable camelcase */
+export interface ShopifyCart {
+  token: string;
+  note?: null;
+  original_total_price: number;
+  total_price: number;
+  total_discount: number;
+  total_weight: number;
+  item_count: number;
+  items?: ShopifyCartItem[];
+  requires_shipping: boolean;
+  currency: string;
+  items_subtotal_price: number;
+  cart_level_discount_applications?: (null)[] | null;
+}
+
+export interface ShopifyCartItem {
+  id: number;
+  index: number;
+  position: number;
+  properties?: null;
+  quantity: number;
+  variant_id: number;
+  key: string;
+  title: string;
+  price: number;
+  original_price: number;
+  discounted_price: number;
+  line_price: number;
+  original_line_price: number;
+  total_discount: number;
+  discounts?: (null)[] | null;
+  sku: string;
+  grams: number;
+  vendor: string;
+  taxable: boolean;
+  product_id: number;
+  product_has_only_default_variant: boolean;
+  gift_card: boolean;
+  final_price: number;
+  final_line_price: number;
+  url: string;
+  featured_image: FeaturedImage;
+  image: string;
+  handle: string;
+  requires_shipping: boolean;
+  product_type: string;
+  product_title: string;
+  product_description: string;
+  variant_title?: null;
+  variant_options?: (string)[] | null;
+  options_with_values?: (OptionsWithValuesEntity)[] | null;
+  line_level_discount_allocations?: (null)[] | null;
+  line_level_total_discount: number;
+}
+export interface FeaturedImage {
+  aspect_ratio: number;
+  alt: string;
+  height: number;
+  url: string;
+  width: number;
+}
+export interface OptionsWithValuesEntity {
+  name: string;
+  value: string;
+}
+
+export interface ShopifyCartAddPayload {
+  id: number | string
+  quantity?: number
+}
+
+declare global {
+  interface Window {
+    Shopify?: {
+      shop?: string
+      locale?: string
+      currency?: {
+        active?: string
+      }
+    }
+  }
+}

package/types/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_SHIPAID_API: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}