@stackshift-ui/webriq-form 1.0.0 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/webriq-form",
   "description": "",
-  "version": "1.0.0",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,12 +29,12 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "2.0.0",
-    "@stackshift-ui/eslint-config": "1.0.0"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
-    "@stackshift-ui/scripts": "1.0.0",
-    "@stackshift-ui/system": "2.0.0"
+    "@stackshift-ui/scripts": "6.0.2",
+    "@stackshift-ui/system": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./webriq-form";

package/src/webriq-form.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { WebriQForm } from "./webriq-form";
+
+describe.concurrent("webriq-form", () => {
+  afterEach(cleanup);
+
+  test("Common: WebriQ Form - test if renders without errors", ({ expect }) => {
+    const clx = "webriqform-class";
+    render(<WebriQForm className={clx} />);
+    expect(screen.getByTestId("webriq-form").classList).toContain(clx);
+  });
+});

package/src/webriq-form.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+
+declare global {
+  interface Window {
+    isWebriQFormLoaded?: boolean;
+    webriqFormRefresh?: () => void;
+  }
+}
+
+interface WebriQFormProps {
+  id?: string;
+  name?: string;
+  className?: string;
+  formId?: string;
+  redirectUrl?: string;
+  scriptSrc?: string;
+  unmountScript?: boolean;
+  children?: React.ReactNode;
+  [key: string]: any;
+  webriq?: string;
+}
+
+class WebriQForm extends React.Component<WebriQFormProps> {
+  constructor(props: WebriQFormProps) {
+    super(props);
+    this.loadWebriQFormScript = this.loadWebriQFormScript.bind(this);
+  }
+
+  componentDidMount() {
+    if (window && !window.isWebriQFormLoaded) {
+      this.loadWebriQFormScript();
+    }
+
+    if (window && window.isWebriQFormLoaded) {
+      window.webriqFormRefresh?.();
+    }
+  }
+
+  loadWebriQFormScript() {
+    const webriqFormScript = document.getElementById("webriqform");
+
+    if (!webriqFormScript) {
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.id = "webriqform";
+      script.defer = true;
+      script.src = this.props.scriptSrc || "https://pagebuilderforms.webriq.com/js/initReactForms";
+      document.body.appendChild(script);
+      const headScript = document.getElementsByTagName("script")[0];
+      headScript.parentNode?.insertBefore(script, headScript);
+    }
+  }
+
+  componentWillUnmount() {
+    const { unmountScript } = this.props;
+
+    const webriqFormScript = document.getElementById("webriqform");
+    if (webriqFormScript && unmountScript) {
+      webriqFormScript.parentNode?.removeChild(webriqFormScript);
+    }
+
+    if (window && unmountScript) {
+      window.isWebriQFormLoaded = false;
+    }
+
+    const webriqFormRecaptcha = document.getElementById("webriqFormRecaptcha");
+    if (webriqFormRecaptcha && unmountScript) {
+      webriqFormRecaptcha.parentNode?.removeChild(webriqFormRecaptcha);
+    }
+  }
+
+  render() {
+    const { id, name, className, ...rest } = this.props;
+    const formId = this.props.formId || this.props["data-form-id"];
+    let redirectURL = this.props.redirectUrl || this.props["data-thankyou-url"] || "/thank-you";
+
+    return (
+      <form
+        name={name}
+        id={id}
+        className={className}
+        method="POST"
+        data-form-id={formId}
+        data-testid="webriq-form"
+        data-thankyou-url={redirectURL}
+        // eslint-disable-next-line react/no-unknown-property
+        webriq="true"
+        {...rest}>
+        {this.props.children}
+      </form>
+    );
+  }
+}
+
+export { WebriQForm };