Initial commit

Author: kasperaamodt

.DS_Store

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitattributes

@@ -0,0 +1 @@
+~

.gitignore

@@ -0,0 +1,56 @@
+# Frontity Gravity Forms
+
+Gravity forms package for [Frontity](https://frontity.org).
+
+# How does it work?
+
+1. You need to create a page in your WordPress site (if you don't already have one) that contains a Gravity Forms shortcode or Gutenberg block.
+1. Install the Frontity Gravity Forms package as shown in the Installation steps below.
+1. Visit that page in Frontity and the package will automatically render all the Gravity Forms forms that are present, including other content on the page.
+1. On successful form submission, the email goes to the recipient set in the form settings in WP (if Gravity Forms email settings are configured on your WordPress site). Errors are shown as well if the fields are invalid.
+
+# Features
+
+1. All the Gravity Forms forms on the page will work.
+1. You can also use it for multiple pages.
+1. Built with React and Frontity, so its fast and performant.
+
+# Installation
+
+1. Do `npm install @aamodtgroup/frontity-gravity-forms` in the root of your project.
+2. Add the package name in `frontity-settings.js`.
+
+```javascript
+"packages": [
+  "@aamodtgroup/frontity-gravity-forms"
+  // other packages ...
+]
+```
+
+3. Add api keys to the state in frontity
+```javascript
+source: {
+  gfAuth: {
+    key: "ck_example",
+    secret: "cs_example",
+  }
+}
+```
+
+4. Run `npx frontity dev` again.
+
+That's it! The package doesn't need any settings. You should be able to see the form in any page or post that contains one.
+
+## Credits
+
+- Build with love :blue_heart:, using [Frontity](https://frontity.org)
+
+## Authors
+
+1. [Kasper Aamodt](https://twitter.com/kasperaamodt) - Owner and developer [@aamodtgroup](https://twitter.com/aamodtgroup)
+
+## License
+
+![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)
+
+- **[GPLv2](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)**

LICENSE

@@ -0,0 +1,32 @@
+{
+  "name": "@aamodtgroup/frontity-gravity-forms",
+  "version": "0.1.4",
+  "description": "Gravity Forms extension for Frontity theme.",
+  "keywords": [
+    "Frontity",
+    "Gravity",
+    "forms",
+    "WordPress",
+    "Reactjs",
+    "react",
+    "frontity-gf"
+  ],
+  "homepage": "https://aamodtgroup.com",
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aamodtgroup/frontity-gravity-forms"
+  },
+  "bugs": {
+    "url": "https://github.com/aamodtgroup/frontity-gravity-forms/issues"
+  },
+  "author": "Aamodt Group",
+  "peerDependencies": {
+    "frontity": "^1.15.0",
+    "@frontity/html2react": "^1.6.2"
+  },
+  "publishConfig": {
+    "cache": "~/.npm",
+    "access": "public"
+  }
+}

README.md

@@ -0,0 +1,50 @@
+import { connect, styled } from "frontity";
+import FormIdContext from "./../context/FormIdContext";
+import Message from "./Message";
+
+/**
+ *
+ * @param {Object} state Frontity State.
+ * @param {Object} actions Actions methods.
+ * @param {int} id Form Id.
+ * @param {Object} children children.
+ * @param {String} className Classname.
+ * @param {Object} method Function.
+ *
+ * @return {*}
+ */
+const Form = ( { state, actions, id, children, className, method } ) => {
+
+	actions.gf.initForm( id );
+
+	/**
+	 * Form onSubmit event handler.
+	 *
+	 * @param {Object} event Event.
+	 */
+	const handleOnSubmit = ( event ) => {
+
+		event.preventDefault();
+
+		// Set the loading to true first to show processing while the request is ongoing.
+		state.gf.forms[ id ].loading = true;
+
+		// Call the action sendform that will get the form data from state using the form id.
+		actions.gf.sendForm( id );
+
+	};
+
+	return (
+		<FormIdContext.Provider value={ id }>
+			<FormElement method={ method } onSubmit={ handleOnSubmit } className={ className } id={ id }>
+				{ children }
+			</FormElement>
+			{ state.gf.forms[ id ].loading ? <Processing>Processing...</Processing> : <Message /> }
+		</FormIdContext.Provider>
+	)
+};
+
+const FormElement = styled.form``;
+const Processing = styled.div``;
+
+export default connect( Form );

package.json

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormIdContext from "../context/FormIdContext";
+import { connect } from "frontity";
+
+/**
+ * HiddenInputs component
+ *
+ * @param {Object} state Frontity state.
+ * @param {Object} actions Actions.
+ * @param {Object} inputProps Input props.
+ *
+ * @return {*}
+ */
+const HiddenInputs = ( { state, actions, inputProps } ) => {
+
+	const id         = React.useContext( FormIdContext );
+	const inputName  = inputProps.name;
+	const inputValue = inputProps.value;
+
+	actions.gf.addHiddenInputs( { id, inputName, value: inputValue } );
+
+	return null;
+
+};
+
+export default connect( HiddenInputs );

src/components/Form.js

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+import FormIdContext from "../context/FormIdContext";
+import { connect } from "frontity";
+
+/**
+ * Input Component.
+ *
+ * @param {Object} state Frontity State.
+ * @param {Object} actions Actions methods.
+ * @param {Object} inputProps Input props.
+ * @return {*}
+ */
+const Input = ( { state, actions, inputProps } ) => {
+
+	// Context is used so that we can pass the form id to different components.
+	const id          = useContext( FormIdContext );
+	const inputName   = inputProps.name;
+	const placeholder = inputProps.placeholder;
+
+	if ( 'undefined' === typeof ( state.gf.forms[ id ].inputVals[ inputName ] ) ) {
+		actions.gf.changeInputValue( { id, inputName, value: inputProps.value } );
+	}
+
+	/**
+	 * OnChange handler for input.
+	 *
+	 * @param {Object} event Event.
+	 *
+	 * @return {void}
+	 */
+	const onChange = ( event ) => {
+
+		actions.gf.changeInputValue( { id, inputName, value: event.target.value } );
+
+	};
+
+	return (
+		<input
+			name={ inputProps.name }
+			className={ inputProps.className }
+			id={ inputProps.id }
+			aria-invalid={ inputProps.ariaInvalid }
+			aria-required={ inputProps.ariaRequired }
+			size={ inputProps.size }
+			type={ inputProps.type }
+			value={ state.gf.forms[ id ].inputVals[ inputName ] }
+			onChange={ onChange }
+			placeholder={ placeholder }
+		/>
+	);
+};
+
+export default connect( Input );

src/components/HiddenInput.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { connect, styled } from "frontity";
+import FormIdContext from "./../context/FormIdContext";
+
+/**
+ * Message component
+ *
+ * Used to display success and error messages.
+ *
+ * @param {Object} state Frontity state.
+ *
+ * @return {*|string}
+ *
+ */
+const Message = ( { state, libraries } ) => {
+
+	const id           = React.useContext( FormIdContext );
+	const responseInfo = state.gf.forms[ id ];
+
+	// Get the html2react component for the message.
+	const Html2React = libraries.html2react.Component;
+
+	/**
+	 * Get the error or success message
+	 *
+	 * @return {string|*}
+	 */
+	const getMessage = () => {
+
+		if ( 'sent' === responseInfo.status && typeof responseInfo.message === 'string' ) {
+			return <SuccessMessage><Html2React html={responseInfo.message} /></SuccessMessage>
+		} else if ( 'failed' === responseInfo.status ) {
+			return <ErrorMessage>{responseInfo.message}</ErrorMessage>
+		} else {
+			return '';
+		}
+
+	};
+
+	return getMessage();
+
+};
+
+const SuccessMessage = styled.div`
+    border: 2px solid #398f14;
+    padding: 0.75rem 1.25rem;
+`;
+
+const ErrorMessage = styled.div`
+    border: 2px solid #ff2c18;
+    padding: 0.75rem 1.25rem;
+`;
+
+export default connect( Message );