jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Many an update!

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-12-01 15:26:42 +00:00
parent 85195d6c7a
commit d588c49946
35 changed files with 3528 additions and 1142 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/composables/useHelcimPay.js
View file

@ -77,17 +77,25 @@ export const useHelcimPay = () => {
return;
}
// Add custom CSS to fix Helcim overlay styling
// Add CSS to style Helcim overlay - needs to target the actual elements Helcim creates
// Helcim injects a div with inline styles directly into body
if (!document.getElementById("helcim-overlay-fix")) {
const style = document.createElement("style");
style.id = "helcim-overlay-fix";
style.textContent = `
/* Fix Helcim iframe overlay - the second parameter to appendHelcimPayIframe controls this */
/* Target all fixed position divs that might be the overlay */
body > div[style*="position: fixed"][style*="inset: 0"],
body > div[style*="position:fixed"][style*="inset:0"] {
/* Style any fixed position div that Helcim creates */
body > div[style] {
background-color: rgba(0, 0, 0, 0.75) !important;
}
/* Target specifically iframes from Helcim */
body > div[style] > iframe[src*="helcim"],
body > div[style] iframe[src*="secure.helcim.app"] {
background: white !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}
`;
document.head.appendChild(style);
}
@ -186,6 +194,41 @@ export const useHelcimPay = () => {
// Add event listener
window.addEventListener("message", handleHelcimPayEvent);
// Set up a MutationObserver to fix Helcim's overlay styling immediately
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1 && node.tagName === "DIV") {
const computedStyle = window.getComputedStyle(node);
// Check if this is Helcim's overlay (fixed position, full screen)
if (
computedStyle.position === "fixed" &&
computedStyle.inset === "0px"
) {
// Fix the background to show semi-transparent overlay
node.style.setProperty(
"background-color",
"rgba(0, 0, 0, 0.75)",
"important",
);
// Ensure proper centering
node.style.setProperty("display", "flex", "important");
node.style.setProperty("align-items", "center", "important");
node.style.setProperty(
"justify-content",
"center",
"important",
);
observer.disconnect(); // Stop observing once we've found and fixed it
}
}
});
});
});
// Start observing body for child additions
observer.observe(document.body, { childList: true });
// Open the HelcimPay iframe modal
console.log("Calling appendHelcimPayIframe with token:", checkoutToken);
window.appendHelcimPayIframe(checkoutToken, true);
@ -193,6 +236,9 @@ export const useHelcimPay = () => {
"appendHelcimPayIframe called, waiting for window messages...",
);
// Clean up observer after a timeout
setTimeout(() => observer.disconnect(), 5000);
// Add timeout to clean up if no response
setTimeout(() => {
console.log("60 seconds passed, cleaning up event listener...");