Added framework for CSI questions & viewing. Schema changes to allow anon viewing of survey BOD-98

client/src/pages/csi/csi.container.page.jsx

@@ -0,0 +1,128 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Form, Layout, Typography, Button } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import AlertComponent from "../../components/alert/alert.component";
+import ConfigFormComponents from "../../components/config-form-components/config-form-components.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { QUERY_SURVEY } from "../../graphql/csi.queries";
+
+export default function CsiContainerPage() {
+  const { surveyId } = useParams();
+  const [form] = Form.useForm();
+  const { loading, error, data } = useQuery(QUERY_SURVEY, {
+    variables: { surveyId },
+  });
+  const { t } = useTranslation();
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  const handleFinish = (values) => {
+    console.log("values", values);
+  };
+
+  //const { relateddata } = data.csi_by_pk;
+  const { bodyshop, job, csiquestion } = relateddata;
+  return (
+    <Layout
+      style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          {bodyshop.logo_img_path ? (
+            <img src={bodyshop.logo_img_path} alt='Logo' />
+          ) : null}
+          <div>
+            <strong>{bodyshop.shopname || ""}</strong>
+            <div>{`${bodyshop.address1 || ""}`}</div>
+            <div>{`${bodyshop.address2 || ""}`}</div>
+            <div>{`${bodyshop.city || ""} ${bodyshop.state || ""} ${
+              bodyshop.zip_post || ""
+            }`}</div>
+          </div>
+        </div>
+        <Typography.Title>{t("csi.labels.title")}</Typography.Title>
+        <strong>{`Hi ${job.ownr_fn || ""}!`}</strong>
+        <Typography.Paragraph>
+          At {bodyshop.shopname || ""}, we value our customer's feedback. We
+          would love to hear what you have to say. Please fill out the form
+          below.
+        </Typography.Paragraph>
+      </div>
+
+      <Layout.Content
+        style={{ backgroundColor: "#fff", margin: "2em 4em", padding: "2em" }}>
+        <Form form={form} onFinish={handleFinish}>
+          <ConfigFormComponents componentList={csiquestion} />
+          <Button type='primary' htmlType='submit'>
+            {t("general.actions.submit")}
+          </Button>
+        </Form>
+      </Layout.Content>
+      <Layout.Footer>
+        Copyright ImEX.Online. Survey ID: {surveyId}
+      </Layout.Footer>
+    </Layout>
+  );
+}
+
+const relateddata = {
+  bodyshop: {
+    logo_img_path: "https://via.placeholder.com/150",
+    shopname: "Kavia Test Autobody",
+    address1: "123 Fake St",
+    address2: "Unit #100",
+    city: "Vancouver",
+    state: "BC",
+    zip_post: "V6B 1M9",
+    country: "Canada",
+    email: "snaptsoft@gmail.com",
+  },
+  job: {
+    id: "1234",
+    ro_number: "RO102384",
+    ownr_fn: "Patrick",
+    v_make_desc: "Toyota",
+    v_model_desc: "Camry",
+    v_model_yr: "2019",
+  },
+  csiquestion: [
+    {
+      name: "item1",
+      type: "checkbox",
+      label: "Checklist Item 1",
+      required: true,
+    },
+    {
+      name: "item2",
+      type: "slider",
+      label: "Checklist Item 2",
+      min: 0,
+      max: 5,
+      required: true,
+    },
+    {
+      name: "item3",
+      type: "textarea",
+      label: "Checklist Item 3",
+      required: true,
+    },
+    {
+      name: "item4",
+      type: "text",
+      label: "Checklist Item 4",
+      required: true,
+    },
+    {
+      name: "item5",
+      type: "rate",
+      label: "Checklist Item 4",
+      required: true,
+    },
+  ],
+};

client/src/pages/landing/landing.page.jsx

@@ -11,8 +11,8 @@ export default function LandingPage() {
         <HeaderContainer landingHeader />
       </Header>
 
-      <Content className="content-container" style={{ padding: "0em 4em 4em" }}>
-        <Typography.Title>Welcome to bodyshop.app.</Typography.Title>
+      <Content className='content-container' style={{ padding: "0em 4em 4em" }}>
+        <Typography.Title>ImEX.Online</Typography.Title>
       </Content>
     </Layout>
   );