inject container to the root of a page

lib/index.js

@@ -12,27 +12,11 @@ TODO:
 - readme how to use and debug
 */
 
-const createPricesContainer = () => {
-	const pricingActionContainers = document.querySelectorAll(".pricing-details");
-
-	l("all pricing containers", pricingActionContainers);
-
-	let visible;
-	for (const node of pricingActionContainers) {
-		if (node.checkVisibility()) {
-			l("found visible pricing container", node);
-			visible = node;
-			break;
-		}
-	}
-
-	return visible.parentNode.insertBefore(
-		document.createElement("div"),
-		visible,
-	);
-};
-
-const isInLibrary = () => document.querySelectorAll(".read-now").length;
+const isInLibrary = () =>
+  // Old layout
+  document.querySelectorAll(".read-now").length > 0 ||
+  // New layout
+  document.querySelectorAll('[data-testid="buypad-readnow"]').length > 0;
 
 const formatPrice = (countryPrice, convertedPrice, isSelected) => {
   if (!isSelected) return "SKIP";
@@ -99,9 +83,7 @@ const InLibrary = () =>
     "div",
     {
       style: {
-				display: "flex",
-				flexDirection: "column",
-				border: "1px solid black",
+        padding: "10px",
         textAlign: "center",
       },
     },
@@ -155,7 +137,7 @@ const Header = (state, percentChecked) => {
   return h(
     "h2",
     { style: { textAlign: "center" } },
-		'Select countries or leave as is and press "load"',
+    'Select countries or leave as is and press "Load prices"',
   );
 };
 
@@ -175,22 +157,79 @@ const Load = (state, load) => {
 const App = () => {
   const { isSelected, toggleCountry, selected } = useSelectedCountries();
   const { prices, percentChecked, state, load } = usePrices(selected);
+  const [expanded, setExpanded] = useState(false);
 
   l(selected);
-	const style = {
-		display: "flex",
-		flexDirection: "column",
-		border: "1px solid black",
-	};
+
+  const toggle = useCallback(() => setExpanded((v) => !v));
 
   if (isInLibrary()) {
-		return InLibrary();
+    return h(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: "10px",
+          left: "10px",
+          zIndex: 99999,
+          background: "white",
+          border: "1px solid black",
+          fontFamily: "sans-serif",
+          fontSize: "14px",
+        },
+      },
+      InLibrary(),
+    );
   }
 
+  const panelStyle = {
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    zIndex: 99999,
+    background: "white",
+    border: "1px solid black",
+    fontFamily: "sans-serif",
+    fontSize: "14px",
+    maxHeight: expanded ? "100vh" : "auto",
+    overflowY: expanded ? "auto" : "hidden",
+    minWidth: "100%",
+  };
+
+  const buttonStyle = {
+    height: "2.25rem",
+    background: "white",
+    border: "1px solid black",
+    // padding: "6px 12px",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: "bold",
+    width: "100%",
+  };
+
+  if (!expanded) {
+    return h(
+      "div",
+      { style: panelStyle },
+      h("button", { style: buttonStyle, onClick: toggle }, "PRICES"),
+    );
+  }
+
+  const listStyle = {
+    display: "flex",
+    flexDirection: "column",
+  };
+
   return h(
     "div",
-		{ style },
+    { style: panelStyle },
+    h("button", { style: buttonStyle, onClick: toggle }, "CLOSE"),
+    h(
+      "div",
+      { style: listStyle },
+      ...[
         Header(state, percentChecked),
+        Load(state, load),
         ...prices.map((price) =>
           h(Price, {
             price,
@@ -199,10 +238,14 @@ const App = () => {
             isLoading: state,
           }),
         ),
-		Load(state, load),
+      ],
+    ),
   );
 };
 
 l("starting...");
 initCache();
-render(createElement(App), createPricesContainer());
+
+const container = document.createElement("div");
+document.body.appendChild(container);
+render(createElement(App), container);