@truedat/dd 6.0.2 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.0.2",
+    "@truedat/test": "6.0.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "6.0.2",
-    "@truedat/core": "6.0.2",
-    "@truedat/df": "6.0.2",
+    "@truedat/auth": "6.0.3",
+    "@truedat/core": "6.0.3",
+    "@truedat/df": "6.0.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "dab67cd6f569ca6de2fd8e0b5de260cb5ee261c3"
+  "gitHead": "c88ddc501214b8c4e2732654ca0052ebbcc802c9"
 }

package/src/components/StructureCrumbs.js

@@ -23,7 +23,7 @@ const filterQueryParams = _.flow(
     propertyPath,
     propertyValue,
   }),
-  (queryParams) => new URLSearchParams(queryParams),
+  (queryParams) => new URLSearchParams(queryParams)
 );
 
 export const SystemCrumb = ({ id, name, navFilter }) => {
@@ -52,7 +52,9 @@ export const SystemCrumb = ({ id, name, navFilter }) => {
           <Breadcrumb.Divider icon="right angle" />
           <Breadcrumb.Section
             as={Link}
-            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter.filter)}`}
+            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(
+              navFilter.filter
+            )}`}
             active={false}
           >
             {propertyValue}

package/src/components/StructureItemRoot.js

@@ -18,11 +18,12 @@ const filterParams = _.flow(
 
 export const StructureItemRoot = ({ navFilter }) => {
   const history = useHistory();
-  const url = navFilter?.view === "BUCKET_VIEW"
-    ? linkTo.BUCKETS_VIEW({
-        propertyPath: filterParams(navFilter.filter)?.propertyPath,
-      })
-    : STRUCTURES;
+  const url =
+    navFilter?.view === "BUCKET_VIEW"
+      ? linkTo.BUCKETS_VIEW({
+          propertyPath: filterParams(navFilter.filter)?.propertyPath,
+        })
+      : STRUCTURES;
   return (
     <List.Item onClick={() => history.push(url)}>
       <List.Icon name="angle double left" verticalAlign="middle" />

package/src/components/StructureNotesEdit.js

@@ -7,9 +7,10 @@ import { useIntl } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
 import { selectTemplate, selectDomains } from "@truedat/df/routines";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
+import { apiJson } from "@truedat/core/services/api";
+import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 import { doStructureNoteAction } from "../routines";
 import { getLatestDfContent } from "../selectors/getSortedStructureNotes";
-import StructureNoteSuggestions from "./StructureNoteSuggestions";
 
 const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
@@ -30,7 +31,9 @@ export const StructureNotesEdit = ({
   latestDfContent,
 }) => {
   const [content, setContent] = useState(latestDfContent);
-  const aiSuggestionsAction = _.prop("_actions.ai_suggestions")(structureNotes);
+  const aiSuggestionsUrl = _.prop("_actions.ai_suggestions.href")(
+    structureNotes
+  );
 
   const isModification = !_.isEmpty(latestDfContent);
 
@@ -75,13 +78,18 @@ export const StructureNotesEdit = ({
     setContent({ ...content, ...suggestions });
   };
 
+  const requestAiSuggestion = (callback) => {
+    const url = `${aiSuggestionsUrl}?language=${locale}`;
+    apiJson(url).then(callback);
+  };
+
   return (
     <Segment attached="bottom">
       <TemplateLoader />
 
-      {aiSuggestionsAction ? (
-        <StructureNoteSuggestions
-          aiSuggestionsAction={aiSuggestionsAction}
+      {aiSuggestionsUrl ? (
+        <SuggestionsWidget
+          requestAiSuggestion={requestAiSuggestion}
           template={template}
           applySuggestions={applySuggestions}
           isModification={isModification}

package/src/components/SystemStructures.js

@@ -38,7 +38,9 @@ export const SystemStructures = ({
         <Grid.Row stretched>
           <Grid.Column width={4}>
             <Segment>
-              {navFilter?.filter?.system_id ? <FilteredNav navFilter={navFilter} /> : null}
+              {navFilter?.filter?.system_id ? (
+                <FilteredNav navFilter={navFilter} />
+              ) : null}
             </Segment>
           </Grid.Column>
           <Grid.Column width={12}>

package/src/components/__tests__/FilteredNav.spec.js

@@ -2,6 +2,7 @@ import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
 import { act } from "react-dom/test-utils";
+import en from "../../messages/en";
 
 import FilteredNavLoader, { FilteredNav } from "../FilteredNav";
 
@@ -64,6 +65,12 @@ const renderOpts = {
   state: {
     navFilter,
   },
+  messages: {
+    en: {
+      ...en,
+      "structures.props.functional_name": "structures.props.functional_name",
+    },
+  },
 };
 
 describe("<FilteredNav />", () => {

package/src/components/__tests__/StructureItems.spec.js

@@ -5,7 +5,7 @@ import { StructureItems } from "../StructureItems";
 describe("<StructureItems />", () => {
   it("matches the latest snapshot", () => {
     const structures = [{ id: 1, name: "some structure" }];
-    const props = { structures, fnHasCatalogViewProp: jest.fn(), };
+    const props = { structures, fnHasCatalogViewProp: jest.fn() };
 
     const { container } = render(<StructureItems {...props} />);
     expect(container).toMatchSnapshot();
@@ -13,7 +13,7 @@ describe("<StructureItems />", () => {
 
   it("matches the latest snapshot with alias", () => {
     const structures = [{ id: 1, name: "some structure", alias: "alias" }];
-    const props = { structures, fnHasCatalogViewProp: jest.fn(), };
+    const props = { structures, fnHasCatalogViewProp: jest.fn() };
 
     const { container } = render(<StructureItems {...props} />);
     expect(container).toMatchSnapshot();

package/src/components/__tests__/StructureNav.spec.js

@@ -17,7 +17,7 @@ const renderOpts = {
 describe("<StructureNav />", () => {
   it("matches the latest snapshot", () => {
     const childStructures = [{ id: 1 }];
-    const props = { childStructures, fnHasCatalogViewProp: jest.fn(),};
+    const props = { childStructures, fnHasCatalogViewProp: jest.fn() };
 
     const { container } = render(<StructureNav {...props} />, renderOpts);
     expect(container).toMatchSnapshot();

package/src/components/__tests__/SystemFilteredNav.spec.js

@@ -26,7 +26,10 @@ const renderOpts = {
 
 describe("<SystemFilteredNav />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<SystemFilteredNav fnHasCatalogViewProp={jest.fn()}/>, renderOpts);
+    const { container } = render(
+      <SystemFilteredNav fnHasCatalogViewProp={jest.fn()} />,
+      renderOpts
+    );
     expect(container).toMatchSnapshot();
   });
 });

package/src/hooks/useBucketStructures.js

@@ -2,7 +2,12 @@ import useSWR from "swr";
 import { apiJsonPost } from "@truedat/core/services/api";
 import { API_BUCKET_STRUCTURES } from "../api";
 
-export const useBucketStructures = ({ navFilter, parentFilter, ids, query }) => {
+export const useBucketStructures = ({
+  navFilter,
+  parentFilter,
+  ids,
+  query,
+}) => {
   const params =
     navFilter?.view === "SYSTEM_STRUCTURES"
       ? { filters: { ...navFilter.filter, ...parentFilter }, query }

package/src/components/StructureNoteSuggestions.js

@@ -1,179 +0,0 @@
-import _ from "lodash/fp";
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import {
-  Button,
-  Checkbox,
-  Container,
-  Divider,
-  Icon,
-  List,
-  Message,
-  Segment,
-} from "semantic-ui-react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { apiJson } from "@truedat/core/services/api";
-
-export default function StructureNoteSuggestions({
-  aiSuggestionsAction,
-  applySuggestions,
-  template,
-  isModification,
-}) {
-  const [loadingSuggestion, setLoadingSuggestion] = useState();
-  const [suggestions, setSuggestions] = useState();
-  const [suggestionsError, setSuggestionsError] = useState();
-  const [selectedSuggestions, setSelectedSuggestions] = useState([]);
-
-  const { locale } = useIntl();
-
-  const suggestionKeys = _.keys(suggestions);
-  const fieldInSuggestions = ({ name }) => _.includes(name)(suggestionKeys);
-  const templateFields = _.flow(
-    _.prop("content"),
-    _.filter(({ fields }) => _.any(fieldInSuggestions)(fields)),
-    _.map(({ name, fields }) => ({
-      name,
-      fields: _.filter(fieldInSuggestions)(fields),
-    }))
-  )(template);
-  const validFields = _.flow(
-    _.prop("content"),
-    _.flatMap(({ fields }) =>
-      _.flow(
-        _.filter(({ editable }) => editable || !isModification),
-        _.map(({ name }) => name)
-      )(fields)
-    )
-  )(template);
-
-  const handleRequestSuggestions = () => {
-    setLoadingSuggestion(true);
-    setSuggestionsError(null);
-    setSelectedSuggestions([]);
-    setSuggestions(null);
-    const url = `${aiSuggestionsAction.href}?language=${locale}`;
-    apiJson(url).then(({ data: { data: suggestions } }) => {
-      if (_.prop("[0]")(suggestions) === "error") {
-        setSuggestionsError(
-          _.prop("[1].error.message")(suggestions) || _.prop("[1]")(suggestions)
-        );
-      } else {
-        setSuggestions(suggestions);
-        const selectedFields = _.flow(
-          _.keys,
-          _.filter(
-            (key) =>
-              _.includes(key)(validFields) && !_.isEmpty(suggestions[key])
-          )
-        )(suggestions);
-        setSelectedSuggestions(selectedFields);
-      }
-      setLoadingSuggestion(false);
-    });
-  };
-  const handleApplySuggestions = () => {
-    applySuggestions(_.pick(selectedSuggestions)(suggestions));
-    setSelectedSuggestions([]);
-    setSuggestions(null);
-  };
-
-  const toggleSelectedSuggestion = (name) => {
-    setSelectedSuggestions(
-      _.includes(name)(selectedSuggestions)
-        ? _.reject((v) => v == name)(selectedSuggestions)
-        : [...selectedSuggestions, name]
-    );
-  };
-
-  return (
-    <Segment loading={loadingSuggestion}>
-      <Container style={{ display: "flex", justifyContent: "space-between" }}>
-        <h4>
-          {suggestions ? (
-            <Icon name="lightbulb outline" />
-          ) : (
-            <Icon name="lightbulb" />
-          )}
-          <FormattedMessage id="structure_note.ai_suggestion.header" />
-        </h4>
-        <Divider hidden />
-        {suggestions ? null : (
-          <Button onClick={handleRequestSuggestions}>
-            <FormattedMessage id="actions.ai_suggestion" />
-          </Button>
-        )}
-      </Container>
-      {suggestionsError ? (
-        <Message negative>
-          <Message.Header>
-            <FormattedMessage id="structure_note.ai_suggestion.error" />
-          </Message.Header>
-          <p>{suggestionsError}</p>
-        </Message>
-      ) : null}
-      {suggestions ? (
-        <>
-          {_.map(({ name: groupName, fields }) => (
-            <Container key={`group-${groupName}`}>
-              <>
-                <h5>{groupName ? groupName : ""}</h5>
-                <List>
-                  {_.map(({ name, label, editable }) => (
-                    <List.Item
-                      key={name}
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "12px",
-                      }}
-                    >
-                      <Checkbox
-                        id={name}
-                        disabled={
-                          (isModification && !editable) ||
-                          _.isEmpty(suggestions[name])
-                        }
-                        checked={_.includes(name)(selectedSuggestions)}
-                        onChange={() => toggleSelectedSuggestion(name)}
-                      />
-                      <label
-                        htmlFor={name}
-                        style={{ cursor: "pointer" }}
-                        disabled
-                      >
-                        <List.Header>{label}</List.Header>
-                        <List.Description>
-                          {_.isEmpty(suggestions[name])
-                            ? "-"
-                            : suggestions[name]}
-                        </List.Description>
-                      </label>
-                    </List.Item>
-                  ))(fields)}
-                </List>
-                <Divider hidden />
-              </>
-            </Container>
-          ))(templateFields)}
-          <Container textAlign="right">
-            <Button
-              primary
-              onClick={handleApplySuggestions}
-              disabled={_.isEmpty(selectedSuggestions)}
-            >
-              <FormattedMessage id="actions.apply_ai_suggestion" />
-            </Button>
-          </Container>
-        </>
-      ) : null}
-    </Segment>
-  );
-}
-
-StructureNoteSuggestions.propTypes = {
-  aiSuggestionsAction: PropTypes.object,
-  applySuggestions: PropTypes.func,
-  template: PropTypes.object,
-  isModification: PropTypes.bool,
-};

package/src/components/__tests__/StructureNoteSuggestions.spec.js

@@ -1,151 +0,0 @@
-import React, { Suspense } from "react";
-import { waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import StructureNoteSuggestions from "../StructureNoteSuggestions";
-
-const mockSuggestions = {
-  editable_field: "editable_field_value",
-  non_editable_field: "non_editable_field_value",
-  unselect_field: "unselect_field_value",
-};
-jest.mock("@truedat/core/services/api", () => ({
-  apiJson: (url) => ({
-    then: (callback) =>
-      callback({
-        data: {
-          data: url.startsWith("suggestions")
-            ? mockSuggestions
-            : url.startsWith("error_message")
-            ? ["error", { error: { message: "ERROR MESSAGE" } }]
-            : ["error", "ERROR TEXT"],
-        },
-      }),
-  }),
-}));
-
-const messages = {
-  en: {
-    "actions.cancel": "cancel",
-    "actions.save": "save",
-    "structure_note.ai_suggestion.header": "header",
-    "actions.apply_ai_suggestion": "actions.apply_ai_suggestion",
-    "actions.ai_suggestion": "actions.ai_suggestion",
-    "structure_note.ai_suggestion.error": "error",
-  },
-};
-
-describe("<StructureNoteSuggestions />", () => {
-  it("matches the latest snapshot", () => {
-    const props = {
-      template: {},
-    };
-    const { container } = render(
-      <Suspense fallback={null}>
-        <StructureNoteSuggestions {...props} />
-      </Suspense>,
-      { messages }
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("component lifecycle", async () => {
-    const applySuggestions = jest.fn();
-    const props = {
-      aiSuggestionsAction: { href: "suggestions" },
-      applySuggestions,
-      template: {
-        content: [
-          {
-            fields: [
-              {
-                name: "editable_field",
-                label: "EditableField",
-                editable: true,
-              },
-            ],
-          },
-          {
-            name: "Group2",
-            fields: [
-              {
-                name: "non_editable_field",
-                label: "NonEditableField",
-                editable: false,
-              },
-              {
-                name: "unselect_field",
-                label: "UnselectedField",
-                editable: true,
-              },
-            ],
-          },
-        ],
-      },
-      isModification: true,
-    };
-    const { container, findByText, queryByText } = render(
-      <Suspense fallback={null}>
-        <StructureNoteSuggestions {...props} />
-      </Suspense>,
-      { messages }
-    );
-
-    userEvent.click(await findByText(/actions.ai_suggestion/i));
-    await waitFor(() =>
-      expect(queryByText(/actions.ai_suggestion/i)).not.toBeInTheDocument()
-    );
-
-    expect(container).toMatchSnapshot();
-
-    userEvent.click(await findByText(/UnselectedField/i));
-    userEvent.click(await findByText(/UnselectedField/i));
-    userEvent.click(await findByText(/UnselectedField/i));
-
-    userEvent.click(await findByText(/actions.apply_ai_suggestion/i));
-    await waitFor(() =>
-      expect(
-        queryByText(/actions.apply_ai_suggestion/i)
-      ).not.toBeInTheDocument()
-    );
-    expect(applySuggestions).toHaveBeenCalledWith(
-      expect.objectContaining({ editable_field: "editable_field_value" })
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it("renders error with message", async () => {
-    const props = {
-      aiSuggestionsAction: { href: "error_message" },
-    };
-    const { container, findByText, queryByText } = render(
-      <Suspense fallback={null}>
-        <StructureNoteSuggestions {...props} />
-      </Suspense>,
-      { messages }
-    );
-
-    userEvent.click(await findByText(/actions.ai_suggestion/i));
-    await waitFor(() =>
-      expect(queryByText(/error message/i)).toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("renders error with message", async () => {
-    const props = {
-      aiSuggestionsAction: { href: "error_text" },
-    };
-    const { container, findByText, queryByText } = render(
-      <Suspense fallback={null}>
-        <StructureNoteSuggestions {...props} />
-      </Suspense>,
-      { messages }
-    );
-
-    userEvent.click(await findByText(/actions.ai_suggestion/i));
-    await waitFor(() => expect(queryByText(/error text/i)).toBeInTheDocument());
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/__tests__/__snapshots__/StructureNoteSuggestions.spec.js.snap

@@ -1,316 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StructureNoteSuggestions /> component lifecycle 1`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <div
-      class="ui container"
-      style="display: flex; justify-content: space-between;"
-    >
-      <h4>
-        <i
-          aria-hidden="true"
-          class="lightbulb outline icon"
-        />
-        header
-      </h4>
-      <div
-        class="ui hidden divider"
-      />
-    </div>
-    <div
-      class="ui container"
-    >
-      <h5 />
-      <div
-        class="ui list"
-        role="list"
-      >
-        <div
-          class="item"
-          role="listitem"
-          style="display: flex; align-items: center; gap: 12px;"
-        >
-          <div
-            class="ui checked fitted checkbox"
-          >
-            <input
-              checked=""
-              class="hidden"
-              id="editable_field"
-              readonly=""
-              tabindex="0"
-              type="checkbox"
-              value=""
-            />
-            <label
-              for="editable_field"
-            />
-          </div>
-          <label
-            disabled=""
-            for="editable_field"
-            style="cursor: pointer;"
-          >
-            <div
-              class="header"
-            >
-              EditableField
-            </div>
-            <div
-              class="description"
-            >
-              editable_field_value
-            </div>
-          </label>
-        </div>
-      </div>
-      <div
-        class="ui hidden divider"
-      />
-    </div>
-    <div
-      class="ui container"
-    >
-      <h5>
-        Group2
-      </h5>
-      <div
-        class="ui list"
-        role="list"
-      >
-        <div
-          class="item"
-          role="listitem"
-          style="display: flex; align-items: center; gap: 12px;"
-        >
-          <div
-            class="ui disabled fitted checkbox"
-          >
-            <input
-              class="hidden"
-              disabled=""
-              id="non_editable_field"
-              readonly=""
-              tabindex="-1"
-              type="checkbox"
-              value=""
-            />
-            <label
-              for="non_editable_field"
-            />
-          </div>
-          <label
-            disabled=""
-            for="non_editable_field"
-            style="cursor: pointer;"
-          >
-            <div
-              class="header"
-            >
-              NonEditableField
-            </div>
-            <div
-              class="description"
-            >
-              non_editable_field_value
-            </div>
-          </label>
-        </div>
-        <div
-          class="item"
-          role="listitem"
-          style="display: flex; align-items: center; gap: 12px;"
-        >
-          <div
-            class="ui checked fitted checkbox"
-          >
-            <input
-              checked=""
-              class="hidden"
-              id="unselect_field"
-              readonly=""
-              tabindex="0"
-              type="checkbox"
-              value=""
-            />
-            <label
-              for="unselect_field"
-            />
-          </div>
-          <label
-            disabled=""
-            for="unselect_field"
-            style="cursor: pointer;"
-          >
-            <div
-              class="header"
-            >
-              UnselectedField
-            </div>
-            <div
-              class="description"
-            >
-              unselect_field_value
-            </div>
-          </label>
-        </div>
-      </div>
-      <div
-        class="ui hidden divider"
-      />
-    </div>
-    <div
-      class="ui right aligned container"
-    >
-      <button
-        class="ui primary button"
-      >
-        actions.apply_ai_suggestion
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<StructureNoteSuggestions /> component lifecycle 2`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <div
-      class="ui container"
-      style="display: flex; justify-content: space-between;"
-    >
-      <h4>
-        <i
-          aria-hidden="true"
-          class="lightbulb icon"
-        />
-        header
-      </h4>
-      <div
-        class="ui hidden divider"
-      />
-      <button
-        class="ui button"
-      >
-        actions.ai_suggestion
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<StructureNoteSuggestions /> matches the latest snapshot 1`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <div
-      class="ui container"
-      style="display: flex; justify-content: space-between;"
-    >
-      <h4>
-        <i
-          aria-hidden="true"
-          class="lightbulb icon"
-        />
-        header
-      </h4>
-      <div
-        class="ui hidden divider"
-      />
-      <button
-        class="ui button"
-      >
-        actions.ai_suggestion
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<StructureNoteSuggestions /> renders error with message 1`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <div
-      class="ui container"
-      style="display: flex; justify-content: space-between;"
-    >
-      <h4>
-        <i
-          aria-hidden="true"
-          class="lightbulb icon"
-        />
-        header
-      </h4>
-      <div
-        class="ui hidden divider"
-      />
-      <button
-        class="ui button"
-      >
-        actions.ai_suggestion
-      </button>
-    </div>
-    <div
-      class="ui negative message"
-    >
-      <div
-        class="header"
-      >
-        error
-      </div>
-      <p>
-        ERROR MESSAGE
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<StructureNoteSuggestions /> renders error with message 2`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <div
-      class="ui container"
-      style="display: flex; justify-content: space-between;"
-    >
-      <h4>
-        <i
-          aria-hidden="true"
-          class="lightbulb icon"
-        />
-        header
-      </h4>
-      <div
-        class="ui hidden divider"
-      />
-      <button
-        class="ui button"
-      >
-        actions.ai_suggestion
-      </button>
-    </div>
-    <div
-      class="ui negative message"
-    >
-      <div
-        class="header"
-      >
-        error
-      </div>
-      <p>
-        ERROR TEXT
-      </p>
-    </div>
-  </div>
-</div>
-`;