@emergy/components-contact NPM

components-navigation

Introduction

Create a basic and customizable contact form

Install

yarn add @emergy/components-contact

Usage

import * as React from "react";
import ContactForm from "../../components/ContactForm";
import { useTranslation } from "@emergy/components-translations";


const QUERY_CONTACT = gql`
  mutation SendEmail($name: String!, $email: String!, $message: String!) {
    sendEmail(name: $name, email: $email, message: $message)
  }
`;

const Contact: React.FC = props => {
  const { t } = useTranslation();
  const [sendEmail] = useMutation(QUERY_CONTACT);

  return (
    <div>
      <ContactForm t={t} sendEmail={sendEmail} />
    </div>
  );
};

export default Layout;

// Mutation GraphQL

async sendEmail(_root: any, params: any) {
        if (
          !/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/is.test(
            params.email
          )
        ) {
          return false
        }

        // Check if name is informed
        if (!params.name) {
          return false
        }

        // Check if message is informed
        if (!params.message || params.message.length < 30) {
          return false
        }

        // Send the email using sending
        console.log("Sending...")
        const message = `
        <b>Name</b>: ${params.name}<br/>
        <b>Email</b>: ${params.email}<br/><br/>

        <b>Message</b>: ${params.message}
        `
        return await sendEmail({
          to: 'email',
          from: 'email',
          subject: `[${conf.website.name}] - New message from contact form`,
          text: message,
          html: message,
        })
      },

Server side ()

import { sendEmail } from "@emergy/components-contact";

const sendOne = async (_root: any, params: any) => {
  if (
    !/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/is.test(
      params.email
    )
  ) {
    return false;
  }

  // Check if name is informed
  if (!params.name) {
    return false;
  }

  // Check if message is informed
  if (!params.message || params.message.length < 30) {
    return false;
  }

  // Send the email using sending
  const message = `
        <b>Name</b>: ${params.name}<br/>
        <b>Email</b>: ${params.email}<br/><br/>

        <b>Message</b>: ${params.message}
        `;
  return await sendEmail(
    {
      to: "to@email",
      from: "from@email",
      subject: `[${conf.website.name}] - New message from contact form`,
      text: message,
      html: message
    },
    params.token,
    sgMail
  );
};

Using module CSS

Scss:

// styles.scss
@import "../node_modules/@emergy/components-contact/dist/index.es.css";

Using PurgeCSS

const CpntNav = require("next-optimized-images");
const purgeCssWhiteList = [].concat(CpntNav.purgeCss); // To activate mobile headers

// next.config.js
const purgeCssPaths = [
  "pages/**/*",
  "components/**/*",
  "node_modules/@emergy/components-contact/dist/**/*",
];

withPurgeCss({
  purgeCssPaths,
  purgeCss: {
    whitelist: () => purgeCssWhiteList,
  },
  ...
});

Test

Basic test are created and executed for each build.
The test with enzyme doesn't work properly yet.

More details

In order to make it work properly, I had to link the project who's using the components-translations to the components-navigation:

# In the root folder of my project
cd node_modules/@emergy/components-translation
yarn link

cd <components-navigation-root-path>
yarn link "@emergy/components-translations"