@colabcommerce/elements 0.0.1

package/dist/Container-BPKk2w_q.js

@@ -0,0 +1,22 @@
+import { j as n, k as m } from "./globals-D3YPIcjZ.js";
+import * as p from "react";
+import { jsx as c } from "react/jsx-runtime";
+const x = /* @__PURE__ */ p.forwardRef(({
+  bsPrefix: a,
+  fluid: s = !1,
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  as: o = "div",
+  className: e,
+  ...t
+}, f) => {
+  const r = n(a, "container"), i = typeof s == "string" ? `-${s}` : "-fluid";
+  return /* @__PURE__ */ c(o, {
+    ref: f,
+    ...t,
+    className: m(e, s ? `${r}${i}` : r)
+  });
+});
+x.displayName = "Container";
+export {
+  x as C
+};

package/dist/ProductForm.js

@@ -0,0 +1,327 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useEffect as P, useState as R, Suspense as D } from "react";
+import { u as B, L as H, g as E, d as z, S as O, b as U, k as Q, f as J, A as K, w as V, c as G, e as X } from "./index-BComOHrk.js";
+import { L as Y, F as Z, a as ee, b as te, Q as ae } from "./addressComponentsToAddress-CHYXse0U.js";
+import { a as W, c as w, G as ne, J as N, K as oe, B as j, L as d, R as se, C as _, N as b, i as A, I as re, h as ie } from "./globals-D3YPIcjZ.js";
+import { S as le } from "./index-Dv5Y39GK.js";
+const ce = () => {
+  const { locationName: u, setLocationName: l, setSearchCenter: h, setMapCenter: t, setLoadingGeo: p, getPosition: s } = B();
+  return /* @__PURE__ */ e(
+    H,
+    {
+      locationName: u,
+      setLocationName: l,
+      setSearchCenter: h,
+      setMapCenter: t,
+      handleLocate: () => {
+        p(!0), s();
+      }
+    }
+  );
+}, de = "_5BvSp", me = "NnCF-", ue = "OxA-3", he = "fIWeh", y = {
+  loading: de,
+  itemWrapper: me,
+  selected: ue,
+  wrapper: he
+}, pe = () => {
+  const { t: u } = W(), { locations: l, isLoading: h, focusedLocationId: t } = B();
+  function p(s, m) {
+    if (!s || !m) return;
+    const v = s.getBoundingClientRect(), a = m.getBoundingClientRect().top - v.top + s.scrollTop;
+    s.scrollTo({
+      top: a,
+      behavior: "smooth"
+    });
+  }
+  return P(() => {
+    const s = document.getElementById(`location-${t}`);
+    if (s) {
+      const m = document.getElementById("llw");
+      p(m, s);
+    }
+  }, [t]), h ? /* @__PURE__ */ e("div", { className: w(y.loading), children: /* @__PURE__ */ e("img", { src: "https://images.sofasandsectionals.com/cc/pal-loader.svg", width: "50", height: "50", alt: u("store_locator.loading") }) }) : /* @__PURE__ */ e("div", { className: w(y.wrapper), id: "llw", children: l.map((s) => /* @__PURE__ */ e("div", { className: t === s.id ? w(y.itemWrapper, y.selected) : w(y.itemWrapper), id: `location-${s.id}`, children: /* @__PURE__ */ e(Y, { id: s.id, location: s }) }, s.id)) });
+}, fe = "NQ6-h", _e = "_4wmyC", ge = "_9dVCP", F = {
+  wrapper: fe,
+  name: _e,
+  address: ge
+}, ve = () => {
+  var C, I, S, L, n, x, c;
+  const { cc_company_retailer_location_id: u } = E(), { distanceUnit: l, searchCenter: h, selectedLocation: t, setSelectedLocationId: p, selectedLocationId: s, setMessageModalOpen: m, setShowMap: v, setShowDetails: i } = B(), a = z({ lat: (C = t == null ? void 0 : t.address) == null ? void 0 : C.latitude, lng: (I = t == null ? void 0 : t.address) == null ? void 0 : I.longitude }, h), g = l === "km" ? a : Q(a), q = Math.round(g * 10) / 10, k = (S = t == null ? void 0 : t.store_type) != null && S.includes("Studio") ? "studio" : "retailer";
+  return !t || t.location_id === u ? null : /* @__PURE__ */ e("div", { children: /* @__PURE__ */ o("div", { className: F.wrapper, children: [
+    /* @__PURE__ */ o("div", { className: "d-flex align-items-center justify-content-between", children: [
+      /* @__PURE__ */ e("h3", { className: F.name, children: t == null ? void 0 : t.retailer_name }),
+      /* @__PURE__ */ e("div", { className: "text-end", children: /* @__PURE__ */ e(O, { type: k }) })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "text-muted fs-6 fw-normal mt-1", children: [
+      q,
+      " ",
+      l
+    ] }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(U, { hours: t == null ? void 0 : t.retailer_location_hours }) }),
+    /* @__PURE__ */ o("address", { className: F.address, children: [
+      /* @__PURE__ */ e("div", { children: (L = t == null ? void 0 : t.address) == null ? void 0 : L.street_line_one }),
+      /* @__PURE__ */ o("div", { children: [
+        (n = t == null ? void 0 : t.address) == null ? void 0 : n.city,
+        ", ",
+        (x = t == null ? void 0 : t.address) == null ? void 0 : x.province,
+        " ",
+        (c = t == null ? void 0 : t.address) == null ? void 0 : c.postal_code
+      ] })
+    ] })
+  ] }) });
+}, Ne = "pdHgU", be = "FLRF-", ye = "KsfpB", qe = "t-v-7", Ce = "UFm9T", Ie = "c3v8k", f = {
+  storeDisclaimer: Ne,
+  inquiryTitle: be,
+  changeLocationBtn: ye,
+  submitButton: qe,
+  successContainer: Ce,
+  successBtn: Ie
+}, Se = ({ id: u, product: l = null, onSuccess: h, onCancel: t, onClose: p }) => {
+  l || console.warn("ProductForm: No product provided");
+  const { cc_company_retailer_location_id: s } = E(), { selectedLocationId: m, setSelectedLocationId: v, searchCenter: i } = B(), { t: a } = W("default"), [g, q] = R(!1), [k, C] = R(!1), I = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    notes: ""
+  }, S = ne().shape({
+    firstName: N().required(a("quote_form.first_name_required")),
+    lastName: N().required(a("quote_form.last_name_required")),
+    email: N().email(a("quote_form.invalid_email")).required(a("quote_form.email_required")),
+    phone: N().required(a("quote_form.phone_required")),
+    notes: N()
+  }), n = oe({
+    initialValues: I,
+    validationSchema: S,
+    onSubmit: async (c) => {
+      V("AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M");
+      const $ = await K(i == null ? void 0 : i.lat, i == null ? void 0 : i.lng), r = ee($.results[0].address_components), T = await fetch("https://api.colabcommerce.com/widget_api/leads", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          id: u,
+          lead: {
+            name: `${c.firstName} ${c.lastName}`,
+            emails_attributes: [{ email: c.email }],
+            phone_numbers_attributes: [{ phone_number: c.phone, country_code: "US" }],
+            message: c.message,
+            opt_in: c.optIn,
+            location_attributes: {
+              street_line_one: r == null ? void 0 : r.addressLine1,
+              street_line_two: r == null ? void 0 : r.addressLine2,
+              city: r == null ? void 0 : r.city,
+              province: r == null ? void 0 : r.province,
+              postal_code: r == null ? void 0 : r.postalCode,
+              country: r == null ? void 0 : r.country,
+              latitude: (i == null ? void 0 : i.lat) || null,
+              longitude: (i == null ? void 0 : i.lng) || null
+            },
+            assignee_id: m || null,
+            assignee_type: "CompanyRetailerLocation",
+            lead_activities_attributes: [{
+              type: "LeadActivity::QuoteRequest",
+              products: [l],
+              notes: c.notes,
+              source_type: "Company",
+              source_id: u
+            }]
+          }
+        })
+      });
+      if (!T.ok) {
+        C(!0);
+        return;
+      }
+      const M = await T.json();
+      q(!0), h && h(M);
+    }
+  });
+  P(() => {
+    const c = document.getElementById("cc-accordion-anchor");
+    c && c.scrollIntoView({ behavior: "instant" });
+  }, [m]);
+  const x = () => {
+    q(!1), v(null), p && p();
+  };
+  return /* @__PURE__ */ o("div", { className: "cc", children: [
+    g && /* @__PURE__ */ e("div", { className: f.successContainer, children: /* @__PURE__ */ o("div", { className: "text-center", children: [
+      /* @__PURE__ */ e("h2", { className: "fw-bold fs-2", style: { marginBottom: "3.2rem" }, children: a("cart_form.success_title") }),
+      /* @__PURE__ */ e("div", { className: "fs-6", style: { fontWeight: 600, marginBottom: "3.2rem" }, children: a("cart_form.success_message") }),
+      /* @__PURE__ */ e(j, { variant: "dark", className: f.successBtn, onClick: x, children: a("cart_form.success_button") })
+    ] }) }),
+    !g && /* @__PURE__ */ o("div", { id: "cc-accordion-anchor", children: [
+      !m && /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ e("div", { className: "mb-3", children: /* @__PURE__ */ e(ce, {}) }),
+        /* @__PURE__ */ o("div", { className: "position-relative", children: [
+          /* @__PURE__ */ e(J, {}),
+          /* @__PURE__ */ e(le, {})
+        ] }),
+        /* @__PURE__ */ e(Z, {}),
+        /* @__PURE__ */ e(pe, {})
+      ] }),
+      m && /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ e("div", { className: f.inquiryTitle, children: a("quote.inquiryTitle") }),
+        /* @__PURE__ */ e("p", { className: f.storeDisclaimer, children: a("product_availability.disclaimer") }),
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ o("div", { className: "d-flex align-items-center justify-content-between px-3 mb-2 fs-6", children: [
+            /* @__PURE__ */ e("span", { className: "fw-bold", children: s === m ? "" : a("quote.selected_location") }),
+            /* @__PURE__ */ e("button", { onClick: () => v(null), className: f.changeLocationBtn, children: a("quote.change_location") })
+          ] }),
+          /* @__PURE__ */ e("div", { className: f.selectedLocation, children: /* @__PURE__ */ e(ve, {}) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ e(d, { onSubmit: n.handleSubmit, className: f.form, children: /* @__PURE__ */ o(se, { children: [
+          /* @__PURE__ */ e(_, { xs: 12, md: 6, children: /* @__PURE__ */ o(
+            b,
+            {
+              controlId: "floatingInput",
+              label: a("quote_form.first_name"),
+              className: "mb-3",
+              children: [
+                /* @__PURE__ */ e(
+                  d.Control,
+                  {
+                    type: "text",
+                    name: "firstName",
+                    placeholder: a("quote_form.first_name_placeholder"),
+                    onChange: n.handleChange,
+                    value: n.values.firstName,
+                    className: "rounded-0",
+                    isInvalid: !!n.errors.firstName
+                  }
+                ),
+                /* @__PURE__ */ e(d.Control.Feedback, { type: "invalid", children: n.errors.firstName })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(_, { xs: 12, md: 6, children: /* @__PURE__ */ o(
+            b,
+            {
+              controlId: "floatingInput",
+              label: a("quote_form.last_name"),
+              className: "mb-3",
+              children: [
+                /* @__PURE__ */ e(
+                  d.Control,
+                  {
+                    type: "text",
+                    name: "lastName",
+                    className: "rounded-0",
+                    placeholder: a("quote_form.last_name_placeholder"),
+                    onChange: n.handleChange,
+                    value: n.values.lastName,
+                    isInvalid: !!n.errors.lastName
+                  }
+                ),
+                /* @__PURE__ */ e(d.Control.Feedback, { type: "invalid", children: n.errors.lastName })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(_, { xs: 12, md: 6, children: /* @__PURE__ */ o(
+            b,
+            {
+              controlId: "floatingInput",
+              label: a("quote_form.email"),
+              className: "mb-3",
+              children: [
+                /* @__PURE__ */ e(
+                  d.Control,
+                  {
+                    type: "email",
+                    name: "email",
+                    className: "rounded-0",
+                    placeholder: a("quote_form.email_placeholder"),
+                    onChange: n.handleChange,
+                    value: n.values.email,
+                    isInvalid: !!n.errors.email
+                  }
+                ),
+                /* @__PURE__ */ e(d.Control.Feedback, { type: "invalid", children: n.errors.email })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(_, { xs: 12, md: 6, children: /* @__PURE__ */ o(
+            b,
+            {
+              controlId: "floatingInput",
+              label: a("quote_form.phone"),
+              className: "mb-3",
+              children: [
+                /* @__PURE__ */ e(
+                  d.Control,
+                  {
+                    type: "text",
+                    name: "phone",
+                    className: "rounded-0",
+                    placeholder: a("quote_form.phone_placeholder"),
+                    onChange: n.handleChange,
+                    value: n.values.phone,
+                    isInvalid: !!n.errors.phone
+                  }
+                ),
+                /* @__PURE__ */ e(d.Control.Feedback, { type: "invalid", children: n.errors.phone })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(_, { xs: 12, children: /* @__PURE__ */ o(
+            b,
+            {
+              controlId: "floatingTextarea",
+              label: a("quote_form.notes"),
+              className: ["mb-3", f.textarea].join(" "),
+              children: [
+                /* @__PURE__ */ e(
+                  d.Control,
+                  {
+                    as: "textarea",
+                    name: "notes",
+                    className: "rounded-0",
+                    placeholder: a("quote_form.notes_placeholder"),
+                    onChange: n.handleChange,
+                    value: n.values.notes,
+                    isInvalid: !!n.errors.notes,
+                    style: { height: "100px" }
+                  }
+                ),
+                /* @__PURE__ */ e(d.Control.Feedback, { type: "invalid", children: n.errors.notes })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ o(_, { xs: 12, children: [
+            /* @__PURE__ */ e(
+              d.Check,
+              {
+                name: "optIn",
+                type: "checkbox",
+                label: a("quote_form.optIn"),
+                className: "mb-3 fs-6",
+                onChange: n.handleChange,
+                isInvalid: !!n.errors.optIn
+              }
+            ),
+            /* @__PURE__ */ e(d.Control.Feedback, { type: "invalid", children: n.errors.optIn })
+          ] }),
+          /* @__PURE__ */ o(_, { xs: 12, className: "text-start d-flex align-items-center", children: [
+            /* @__PURE__ */ e(j, { type: "submit", variant: "dark", className: f.submitButton, disabled: g, children: n.isSubmitting ? a("quote.submitting") : a("quote_form.submit") }),
+            k && /* @__PURE__ */ e("div", { className: "text-danger ms-2", children: a("quote_form.error") }),
+            g && /* @__PURE__ */ e("div", { className: "text-success ms-2", children: a("quote_form.success") })
+          ] })
+        ] }) }) })
+      ] })
+    ] })
+  ] });
+}, Pe = ({ id: u, locale: l, product: h, onCancel: t, onClose: p, onSuccess: s }) => (P(() => {
+  A.changeLanguage(l);
+}, [l]), /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(re, { i18n: A, children: /* @__PURE__ */ e(ie, { apiKey: "AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M", libraries: ["places"], children: /* @__PURE__ */ e(G, { id: u, children: /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(
+  X,
+  {
+    locale: l,
+    autoLocate: !1,
+    products: [h],
+    children: /* @__PURE__ */ e(ae, { children: /* @__PURE__ */ e(Se, { id: u, product: h, onSuccess: s, onCancel: t, onClose: p }) })
+  }
+) }) }) }) }) }));
+export {
+  Pe as default
+};