gistfile1.txt

var __INHOUSE_BASE_URL = "https://core-stage.inhouse.app";
var __INHOUSE_LOAD_INTERVAL = 2000;
var axiosScript = document.createElement("script");

const openModal = (pickupPointWidgetUrl) => {
  document.getElementById("main-header").innerHTML = `
    <div id="sympl_modal_pickup_point" style="position: fixed; overflow: hidden; top: 0; left: 0; z-index: 2147483647; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
      <iframe
        id="pickupPointIframe"
        title="Pickup Point"
        style="height: 80%; width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
        src=${pickupPointWidgetUrl}>
      </iframe>
    </div>
  `;
};

var __INHOUSE_LOAD_INTERVAL = setInterval(function () {
  if (__INHOUSE_BASE_URL) {
    clearInterval(__INHOUSE_LOAD_INTERVAL);
    launchEverything();
  }
}, 100);

function launchEverything() {
  axiosScript.setAttribute("src", "https://unpkg.com/axios/dist/axios.min.js");
  document.head.appendChild(axiosScript);
  axiosScript.addEventListener("load", function () {
    var http = axios.create({
      baseURL: __INHOUSE_BASE_URL,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    });

    if (
      /.\/orders\/.*$/.test(location.pathname) ||
      (Shopify.Checkout && Shopify.Checkout.step === "thank_you")
    ) {
      http
        .get("/api/company-point-of-sales/pickup-point-widget-url", {
          params: {
            connectorParameters: ["https://" + Shopify.Checkout.apiHost],
            shippingOfferName: Shopify.checkout.shipping_rate.title,
            address1: Shopify.checkout.shipping_address.address1,
            postcode: Shopify.checkout.shipping_address.zip,
            city: Shopify.checkout.shipping_address.city,
            parentProtocol: "https",
            parentHostname: window.location.hostname,
            weight:
              Shopify.checkout.line_items.reduce((a, b) => +a + +b.grams, 0) /
              1000,
          },
        })
        .then((res) => {
          const pickupPointWidgetUrl = res.data.pickupPointWidgetUrl;
          if (pickupPointWidgetUrl) {
            http
              .get("/api/company-point-of-sales/command-pickup-point", {
                params: {
                  connectorParameters: ["https://" + Shopify.Checkout.apiHost],
                  commandId: Shopify.checkout.order_id,
                },
              })
              .then((res) => {
                const pickupPoint = res.data.pickupPoint;
                let infoBlock = document.createElement("div");
                let button = document.createElement("div");
                if (pickupPoint === null) {
                  openModal(pickupPointWidgetUrl);
                  infoBlock.innerHTML = `
                    <div style="margin-top: 24px;">
                      <p style="padding-bottom: 8px; font-size: 17px;">Aucun point relais n’est sélectionné.</p>
                    </div>
                  `;
                  button.innerHTML = `
                    <div style="margin-top: 24px;">
                      <button style="background-color: #09ab5d; padding: 16px; border-radius: 8px; color: #fff;">
                        Sélectionner mon point relais
                      </button>
                    </div>
                  `;
                } else {
                  infoBlock.innerHTML = `
                    <div style="margin-top: 24px;">
                      <p style="padding-bottom: 8px; font-size: 17px;">${pickupPoint.name}</p>
                      <p style="padding-bottom: 8px; font-size: 17px;">${pickupPoint.address.street}, ${pickupPoint.address.postalCode}</p>
                      <p style="padding-bottom: 8px; font-size: 17px;">${pickupPoint.address.country}</p>
                    </div>
                  `;
                  button.innerHTML = `
                    <div style="margin-top: 24px;">
                      <button style="background-color: #09ab5d; padding: 16px; border-radius: 8px; color: #fff;">
                        Modifier mon point relais
                      </button>
                    </div>
                  `;
                }
                document.getElementsByClassName("section")[0].after(button);
                document.getElementsByClassName("section")[0].after(infoBlock);
                button.onclick = function () {
                  openModal(pickupPointWidgetUrl);
                };
                window.addEventListener("message", postMessage, false);
                function postMessage(event) {
                  if (event.data.selectedPickupPoint) {
                    var data = {
                      orderId: Shopify.checkout.order_id,
                      pickupPoint: event.data.selectedPickupPoint.id,
                      shop: Shopify.shop,
                    };
                    http
                      .post(
                        "/api/company-point-of-sales/attach-command-pickup-point",
                        {
                          connectorParameters: [
                            {
                              url: "https://" + Shopify.Checkout.apiHost,
                            },
                          ],
                          commandId: data.orderId.toString(),
                          pickupPointId: data.pickupPoint,
                        }
                      )
                      .then((res) => {
                        document
                          .getElementById("sympl_modal_pickup_point")
                          .remove();
                        const pickupPoint = res.data.pickupPoint;
                        infoBlock.innerHTML = `
                            <div style="margin-top: 24px;">
                              <p style="padding-bottom: 8px; font-size: 17px;">${pickupPoint.name}</p>
                              <p style="padding-bottom: 8px; font-size: 17px;">${pickupPoint.address.street}, ${pickupPoint.address.postalCode}</p>
                              <p style="padding-bottom: 8px; font-size: 17px;">${pickupPoint.address.country}</p>
                            </div>
                          `;
                      })
                      .catch(() => {
                        infoBlock.innerHTML = `
                          <div style="margin-top: 24px;">
                            <p style="padding-bottom: 8px; font-size: 17px;">Un problème est survenu lors de la sélection du point relais.</p>
                          </div>
                        `;
                      });
                  }
                }
              })
              .catch((e) => {
                console.log("error", e);
              });
          }
        });
    }
  });
}