Begin work on BOD-6

client/src/components/shop-info/shop-info.component.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Form, Input, Button } from "antd";
+import { useTranslation } from "react-i18next";
+
+export default function ShopInfoComponent() {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Button type="primary" htmlType="submit">
+        {t("general.actions.save")}
+      </Button>
+      <Form.Item label={t("bodyshop.fields.shopname")} name="shopname">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.address1")} name="address1">
+        <Input />
+      </Form.Item>
+
+      <Form.Item label={t("bodyshop.fields.address2")} name="address2">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.city")} name="city">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.state")} name="state">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.country")} name="country">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.email")} name="email">
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.federal_tax_id")}
+        name="federal_tax_id"
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.insurance_vendor_id")}
+        name="insurance_vendor_id"
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.logo_img_path")}
+        name="logo_img_path"
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
+        <Input />
+      </Form.Item>
+    </div>
+  );
+}

client/src/components/shop-info/shop-info.container.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import ShopInfoComponent from "./shop-info.component";
+import { Form } from "antd";
+import { useQuery } from "react-apollo";
+import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default function ShopInfoContainer() {
+  const [form] = Form.useForm();
+  const handleFinish = values => {
+    console.log("values", values);
+  };
+
+  const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
+    fetchPolicy: "network-only"
+  });
+
+  useEffect(() => {
+    if (data) form.resetFields();
+  }, [form, data]);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (loading) return <LoadingSpinner />;
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={data ? data.bodyshops[0] : null}
+    >
+      <ShopInfoComponent />
+    </Form>
+  );
+}