@sikka/hawa 0.0.47 → 0.0.49

package/src/blocks/Payment/Confirmation.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { HawaTable } from "../../elements";
-import Button from "@mui/material/Button";
+import { HawaButton, HawaTable } from "../../elements";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
@@ -69,15 +68,15 @@ export const ConfirmationPage = (props) => {
             <Divider variant="middle" />
           </>
         )}
-        <Button onClick={props.handlePrint} variant="contained">
+        <HawaButton fullWidth onClick={props.handlePrint}>
           {props.texts.print}
-        </Button>
-        <Button onClick={props.handleHistory} variant="last">
+        </HawaButton>
+        <HawaButton fullWidth onClick={props.handleHistory}>
           {props.texts.history}
-        </Button>
-        <Button onClick={props.handleHome} variant="last">
+        </HawaButton>
+        <HawaButton fullWidth onClick={props.handleHome}>
           {props.texts.homePage}
-        </Button>
+        </HawaButton>
         <Typography align="center" variant="body2" style={{ marginTop: 10 }}>
           {props.texts.fasterPaymentNote}
         </Typography>

package/src/blocks/Payment/CreditCardForm.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { HawaTextField } from "../../elements";
+import { HawaButton, HawaTextField } from "../../elements";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 
 export const CreditCardForm = (props) => {
@@ -79,14 +78,13 @@ export const CreditCardForm = (props) => {
           )}
         />
 
-        <Button
+        <HawaButton
           type="submit"
           fullWidth
-          variant="last"
           onClick={props.handlePayWithCreditCard}
         >
           {"Pay with Credit Card"}
-        </Button>
+        </HawaButton>
       </form>
     </Container>
   );

package/src/blocks/Payment/Form/CForm.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useRef } from "react";
 import sha256 from "crypto-js/sha256";
-import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import useTranslation from "next-translate/useTranslation";
 import axios from "axios";
+import { HawaButton } from "../../../elements";
 
 const currentYear = new Date().getFullYear();
 const monthsArr = Array.from({ length: 12 }, (x, i) => {
@@ -305,9 +305,8 @@ export default function CForm({
                 />
               )}
           </form>
-          <Button
-            variant="contained"
-            color="primary"
+          <HawaButton
+            // color="primary"
             fullWidth
             onClick={handlePayfortForm}
           >
@@ -320,7 +319,7 @@ export default function CForm({
             ) : (
               <span className="pay-new-btn-txt">{t("pay-now")}</span>
             )}
-          </Button>
+          </HawaButton>
         </div>
       </div>
     </div>

package/src/blocks/Payment/Form/PaymentMethod.js

@@ -1,5 +1,4 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import PropTypes from "prop-types";
 
@@ -68,7 +67,7 @@ export const PaymentMethod = (props) => {
 
 const PaymentMethodButton = (props) => {
   return (
-    <Button
+    <button
       disabled={props?.chip ? true : false}
       fullWidth
       variant="contained"
@@ -116,7 +115,7 @@ const PaymentMethodButton = (props) => {
           />
         ) : null}
       </div>
-    </Button>
+    </button>
   );
 };
 

package/src/blocks/Payment/Gateway/Wallet.js

@@ -1,5 +1,4 @@
 import useTranslation from "next-translate/useTranslation";
-import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -120,7 +119,7 @@ const Wallet = (props) => {
             </Grid>
             {!props.leftAmount && (
               <Grid item xs={12}>
-                <Button
+                <button
                   variant="contained"
                   color="primary"
                   fullWidth
@@ -136,7 +135,7 @@ const Wallet = (props) => {
                   ) : (
                     t("pay-now")
                   )}
-                </Button>
+                </button>
               </Grid>
             )}
           </Grid>

package/src/blocks/Payment/PayWithWallet.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
+import { HawaButton } from "../../elements";
 
 export const PayWithWallet = (props) => {
   return (
@@ -11,14 +11,13 @@ export const PayWithWallet = (props) => {
         {props.walletBalance || "0"}
         <Typography>{props.currency || "SAR"}</Typography>
       </Typography>
-      <Button
+      <HawaButton
         type="submit"
         fullWidth
-        variant="last"
         onClick={props.handlePayWithWallet}
       >
         {"Pay Now"}
-      </Button>
+      </HawaButton>
     </Container>
   );
 };

package/src/elements/HawaButton.js

@@ -1,11 +1,14 @@
 import React from "react";
 
 export const HawaButton = (props) => {
+  let styles =
+    "text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  if (props.fullWidth) {
+    styles =
+      "mt-2 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
   return (
-    <button
-      type="button"
-      class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-    >
+    <button type="button" className={styles} {...props}>
       {props.icon ? <div class="mr-2 -ml-1 w-5 h-5">{props.icon}</div> : null}
 
       {props.children}

package/src/elements/HawaLogoButton.js

@@ -1,9 +1,7 @@
 import React from "react";
-import Button from "@mui/material/Button";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 
 export const HawaLogoButton = (props) => {
@@ -29,7 +27,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-          height={20}
+          // height={20}
+          className="h-6"
         />
       );
       break;
@@ -37,7 +36,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-          height={20}
+          // height={20}
+          className="h-6"
         />
       );
       break;
@@ -45,7 +45,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-          height={30}
+          // height={30}
+          className="h-6"
         />
       );
       break;
@@ -53,7 +54,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-          height={25}
+          // height={25}
+          className="h-6"
         />
       );
       break;
@@ -61,7 +63,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-          height={20}
+          // height={20}
+          className="h-6"
         />
       );
       break;
@@ -69,7 +72,8 @@ export const HawaLogoButton = (props) => {
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-          height={40}
+          // height={40}
+          className="h-11"
         />
       );
       break;
@@ -81,26 +85,20 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <Button
+    <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       {...props}
-      variant="withLogo"
+      // variant="withLogo"
+      className="bg-white rounded-xl my-2 h-11 flex flex-row justify-center align-middle"
     >
-      {logoElement}
+      <div className="h-full w-1/2 flex flex-row justify-end items-center">
+        {logoElement}
+      </div>
       <div style={{ width: 10 }} />
-      <Typography
-        style={{
-          color: "black",
-          fontSize: 14,
-          textAlign: "center",
-          letterSpacing: 0.4,
-          fontFamily: "Roboto",
-          fontWeight: 500
-        }}
-      >
+      <div className="h-full w-1/2 flex flex-col justify-center items-start">
         {props.buttonText}
-      </Typography>
-    </Button>
+      </div>
+    </button>
   );
 };
 

package/src/elements/HawaPanelTabs.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Button from "@mui/material/Button";
+
 import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
 
@@ -9,7 +9,7 @@ export const HawaPanelTabs = (props) => {
     <Container variant={props.location || "panelTabs"}>
       {props.options.map((singleOption, i) => {
         return (
-          <Button
+          <button
             key={i}
             onClick={() => {
               props.handleChange(singleOption.value);
@@ -23,7 +23,7 @@ export const HawaPanelTabs = (props) => {
             }
           >
             {singleOption.label}
-          </Button>
+          </button>
         );
       })}
     </Container>

package/src/elements/HawaPhoneInput.js

@@ -22,6 +22,17 @@ export default function HawaPhoneInput(props) {
   const theme = useTheme();
   return (
     <div>
+      <label
+        for="first_name"
+        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        {props.label}
+      </label>
+      <input
+        {...props}
+        className="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      />
+
       {label && <InputLabel>{props.label}</InputLabel>}
       <PhoneInput
         country={country ?? null}
@@ -41,6 +52,12 @@ export default function HawaPhoneInput(props) {
           width: "100%",
           borderRadius: theme.allBorderRadius
         }}
+        // inputClass="bg-red-900"
+        // inputClass="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        dropdownClass="bg-blue-900"
+        buttonClass="bg-green-900"
+        // containerClass="bg-orange-900"
+        // containerClass="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
         {...rest}
       />
     </div>

package/src/elements/HawaPricingCard.js

@@ -1,6 +1,5 @@
 import React from "react";
 import Container from "@mui/material/Container";
-import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 import PropTypes from "prop-types";
@@ -139,13 +138,13 @@ export const HawaPricingCard = (props) => {
           );
         })}
       </div>
-      <Button
+      <button
         onClick={props.selectPlan}
         variant={props.selectedPlan ? "outlined" : "contained"}
         style={{ margin: 20 }}
       >
         {props.buttonText}
-      </Button>
+      </button>
     </Container>
   );
 };

package/src/elements/HawaTextField.js

@@ -5,17 +5,17 @@ export const HawaTextField = (props) => {
     <div>
       <label
         for="first_name"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
       >
         {props.label}
       </label>
       <input
         {...props}
-        class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        className="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       />
 
       {props.helperText && (
-        <p class="mt-2 text-sm text-red-600 dark:text-red-500">
+        <p className="mt-2 text-sm text-red-600 dark:text-red-500">
           {/* <span class="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>

package/src/elements/ResponsiveButton.js

@@ -1,24 +1,23 @@
 import React from "react";
-import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
 
 export const ResponsiveButton = (props) => {
   if (props.showText) {
     return (
-      <Button variant="adaptive-dark" onClick={props.onClick}>
+      <button variant="adaptive-dark" onClick={props.onClick}>
         {props.icon}
         <div style={{ width: 10 }} />
         {props.buttonText}
-      </Button>
+      </button>
     );
   } else {
     //icon only
     return (
       <Tooltip title={props.buttonText} placement="top">
-        <Button variant="adaptive-dark" onClick={props.onClick}>
+        <button variant="adaptive-dark" onClick={props.onClick}>
           {props.icon}
-        </Button>
+        </button>
       </Tooltip>
     );
   }

package/src/layout/HawaLayout.js

@@ -29,6 +29,70 @@ const MenuButton = () => {
     </button>
   );
 };
+const ProfileDropdown = (props) => {
+  return (
+    <div
+      id="userDropdown"
+      class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+      data-popper-reference-hidden=""
+      data-popper-escaped=""
+      data-popper-placement="bottom-start"
+      // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
+    >
+      <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
+        <div>{props.username}</div>
+        <div class="font-medium truncate">{props.userEmail}</div>
+      </div>
+      <ul
+        class="py-1 text-sm text-gray-700 dark:text-gray-200"
+        aria-labelledby="avatarButton"
+      >
+        {props.profileItems.map((it) => {
+          return <ProfileItem text={it.text} link={it.slug} />;
+        })}
+      </ul>
+      <div class="py-1">
+        <a
+          href="#"
+          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+        >
+          Sign out
+        </a>
+      </div>
+    </div>
+  );
+};
+const DrawerContent = (props) => {
+  return (
+    <div
+      id="drawer-navigation"
+      class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
+      tabindex="-1"
+      aria-labelledby="drawer-navigation-label"
+    >
+      <div href={props.logoHref} class="flex items-center">
+        <img
+          src={
+            "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+          }
+          // src={props.logoLink}
+          class="h-9"
+          alt="Flowbite Logo"
+        />
+      </div>
+      <CloseButton />
+      <div class="py-4 overflow-y-auto">
+        <ul class="space-y-2">
+          {props.drawerItems.map((item, i) => {
+            return (
+              <HawaDrawerItem action={item.action} key={i} text={item.text} />
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
 
 const ProfileItem = (props) => {
   return (
@@ -72,31 +136,42 @@ export const HawaLayout = (props) => {
       <div>
         <nav class="border-gray-200 rounded dark:bg-gray-900">
           <div class="flex p-3 flex-row-reverse items-center justify-between w-full">
-            <div href={props.logoHref} class="flex items-center">
+            {/* <div href={props.logoHref} class="flex items-center">
               <img src={props.logoLink} class="h-9" alt="Flowbite Logo" />
+            </div> */}
+            <div
+              data-dropdown-toggle="userDropdown"
+              data-dropdown-placement="bottom-start"
+              class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
+            >
+              <svg
+                class="absolute -left-1 w-12 h-12 text-gray-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
             </div>
+
+            {/* <div href={props.logoHref} class="flex items-center">
+              <img
+                src={
+                  // "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+                  "https://qawaim-images.s3-ap-southeast-1.amazonaws.com/614580f79706137eab618399"
+                }
+                // src={props.logoLink}
+                class="h-12"
+                alt="Flowbite Logo"
+              />
+            </div> */}
+            <div>{props.pageTitle ?? "Home"}</div>
             <div className="flex flex-row-reverse">
               <MenuButton />
-
-              <div
-                data-dropdown-toggle="userDropdown"
-                data-dropdown-placement="bottom-start"
-                class="overflow-hidden mr-2 relative w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600"
-              >
-                <svg
-                  class="absolute -left-1 w-12 h-12 text-gray-400"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                    clip-rule="evenodd"
-                  ></path>
-                </svg>
-              </div>
-
               {/* <img
                 id="avatarButton"
                 type="button"
@@ -110,59 +185,12 @@ export const HawaLayout = (props) => {
           </div>
         </nav>
       </div>
-      <div
-        id="userDropdown"
-        class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
-        data-popper-reference-hidden=""
-        data-popper-escaped=""
-        data-popper-placement="bottom-start"
-        // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
-      >
-        <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
-          <div>{props.username}</div>
-          <div class="font-medium truncate">{props.userEmail}</div>
-        </div>
-        <ul
-          class="py-1 text-sm text-gray-700 dark:text-gray-200"
-          aria-labelledby="avatarButton"
-        >
-          {props.profileItems.map((it) => {
-            return <ProfileItem text={it.text} link={it.slug} />;
-          })}
-        </ul>
-        <div class="py-1">
-          <a
-            href="#"
-            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-          >
-            Sign out
-          </a>
-        </div>
-      </div>
-
-      <div
-        id="drawer-navigation"
-        class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
-        tabindex="-1"
-        aria-labelledby="drawer-navigation-label"
-      >
-        <h5
-          id="drawer-navigation-label"
-          class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"
-        >
-          {props.appTitle}
-        </h5>
-        <CloseButton />
-        <div class="py-4 overflow-y-auto">
-          <ul class="space-y-2">
-            {props.drawerItems.map((item, i) => {
-              return (
-                <HawaDrawerItem action={item.action} key={i} text={item.text} />
-              );
-            })}
-          </ul>
-        </div>
-      </div>
+      <ProfileDropdown profileItems={props.profileItems} />
+      <DrawerContent
+        logoHref={props.logoHref}
+        appTitle={props.appTitle}
+        drawerItems={props.drawerItems}
+      />
       <div className="p-3">{props.children}</div>
     </div>
   );

package/src/layout/index.js

@@ -1,7 +1,6 @@
 export * from "./Box";
 export * from "./HawaAppLayout";
 export * from "./HawaDialog";
-export * from "./HawaAppBar";
 export * from "./HawaPageControls";
 export * from "./HawaBottomAppBar";
 export * from "./HawaDrawer";

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.bff3812a.iframe.bundle.js"></script><script src="main.07f6e990.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.ceb9a32a.iframe.bundle.js"></script><script src="main.8bf9785a.iframe.bundle.js"></script></body></html>