Skip to content

Instantly share code, notes, and snippets.

@destpat
Created October 17, 2022 21:55
Show Gist options
  • Save destpat/b742720828d2a8d8b0fa8a725c7df17d to your computer and use it in GitHub Desktop.
Save destpat/b742720828d2a8d8b0fa8a725c7df17d to your computer and use it in GitHub Desktop.
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);
});
}
});
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment