IO-948 Vendor add to phonebook

client/src/components/phonebook-form/phonebook-form.container.jsx

@@ -77,7 +77,7 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
 
       if (!result.errors) {
         notification["success"]({
-          message: t("Phonebook.successes.saved"),
+          message: t("phonebook.successes.saved"),
         });
 
         if (refetch) await refetch();
@@ -87,7 +87,9 @@ function PhonebookFormContainer({ refetch, bodyshop }) {
         setFormLoading(false);
       } else {
         notification["error"]({
-          message: t("Phonebook.errors.saving"),
+          message: t("phonebook.errors.saving", {
+            error: JSON.stringify(result.errors),
+          }),
         });
 
         setFormLoading(false);

client/src/components/vendors-form/vendors-form.component.jsx

@@ -20,6 +20,7 @@ import PhoneFormItem, {
   PhoneItemFormatterValidation,
 } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import VendorsPhonebookAdd from "../vendors-phonebook-add/vendors-phonebook-add.component";
 export default function VendorsFormComponent({
   form,
   formLoading,
@@ -53,6 +54,11 @@ export default function VendorsFormComponent({
             <Button type="danger" onClick={handleDelete} loading={formLoading}>
               {t("general.actions.delete")}
             </Button>
+
+            <VendorsPhonebookAdd
+              form={form}
+              disabled={form.isFieldsTouched()}
+            />
           </Space>
         }
       />

client/src/components/vendors-phonebook-add/vendors-phonebook-add.component.jsx

@@ -0,0 +1,83 @@
+import { Button, notification } from "antd";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@apollo/client";
+import { INSERT_NEW_PHONEBOOK } from "../../graphql/phonebook.queries";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(VendorsPhonebookAdd);
+
+export function VendorsPhonebookAdd({ form, bodyshop, disabled }) {
+  const [loading, setLoading] = useState(false);
+  const [insertPhonebook] = useMutation(INSERT_NEW_PHONEBOOK);
+  const { t } = useTranslation();
+
+  const handleAdd = async () => {
+    setLoading(true);
+
+    const VendorValues = form.getFieldsValue([
+      "name",
+      "email",
+      "phone",
+      "street1",
+      "street2",
+      "city",
+      "state",
+      "zip",
+      "country",
+    ]);
+    console.log(`VendorValues`, VendorValues);
+    const result = await insertPhonebook({
+      variables: {
+        phonebook_entry: [
+          {
+            //The phonebook obj,
+            bodyshopid: bodyshop.id,
+            company: VendorValues.name,
+            category: t("phonebook.labels.vendorcategory"),
+            address1: VendorValues.street1,
+            address2: VendorValues.street2,
+            city: VendorValues.city,
+            state: VendorValues.state,
+            zip: VendorValues.zip,
+            country: VendorValues.country,
+            phone1: VendorValues.phone,
+            email: VendorValues.email,
+          },
+        ],
+      },
+    });
+
+    if (result.errors) {
+      notification.open({
+        type: "error",
+        message: t("phonebook.errors.adding", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification.open({
+        type: "success",
+        message: t("phonebook.successes.added"),
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Button onClick={handleAdd} loading={loading} disabled={disabled}>
+      {t("vendors.actions.addtophonebook")}
+    </Button>
+  );
+}