@wayke-se/components-react 2.16.0 → 3.0.0-beta.1

package/src/layouts/searchItem/MetadataItem.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useCallback } from 'react';
+import { Property } from '../../@types/vehicle-properties';
+
+import {
+  TableListItem,
+  TableListKey,
+  TableListValue,
+  TableListBooleanPos,
+  TableListBooleanNeg,
+} from '../../components/TableList/index';
+import { IconCheck, IconCancel } from '../../components/Icon/index';
+import { SrOnly } from '../../components/SrOnly/index';
+import { ButtonInline } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+
+const formatValue = (value: Property['value'], unit: Property['unit']) => {
+  if (typeof value === 'boolean') {
+    return value ? (
+      <TableListBooleanPos title="Ja">
+        <SrOnly>Ja</SrOnly>
+        <IconCheck block />
+      </TableListBooleanPos>
+    ) : (
+      <TableListBooleanNeg title="Nej">
+        <SrOnly>Nej</SrOnly>
+        <IconCancel block />
+      </TableListBooleanNeg>
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+  if (!!value && !!unit) {
+    return `${value} ${unit}`;
+  }
+  return value;
+};
+
+interface MetadataItemProps {
+  name: string;
+  hint?: string | null | undefined;
+  value: Property['value'];
+  unit: Property['unit'];
+}
+
+const MetadataItem = ({ name, hint, value, unit }: MetadataItemProps) => {
+  const [foldout, setFoldout] = useState(false);
+  const onToggleFoldout = useCallback(() => setFoldout(!foldout), [foldout]);
+
+  const presentedValue = formatValue(value, unit);
+
+  return (
+    <TableListItem>
+      <TableListKey>
+        {hint ? (
+          <ButtonInline onClick={onToggleFoldout} title={`Mer information om ${name}`}>
+            {name}
+          </ButtonInline>
+        ) : (
+          name
+        )}
+      </TableListKey>
+      <TableListValue>{value !== undefined ? presentedValue : 'Uppgift saknas'}</TableListValue>
+      {hint && foldout && (
+        <Modal title={name} onClose={onToggleFoldout}>
+          <Content dangerouslySetInnerHTML={{ __html: hint }} />
+        </Modal>
+      )}
+    </TableListItem>
+  );
+};
+
+export default MetadataItem;

package/src/layouts/searchItem/PackageOptionModal.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { marked } from 'marked';
+
+import { Repeat } from '../../components/Repeat/index';
+import { ButtonInline } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+import LogoBox from '../../components/LogoBox/index';
+
+interface ModelLink {
+  href?: string | null;
+  title?: string | null;
+}
+
+export interface PackageOptionModalData {
+  title?: string | null;
+  image?: string | null;
+  description?: string | null;
+  link?: ModelLink | null;
+}
+
+interface PackageOptionsModalProps {
+  packageOption: PackageOptionModalData;
+  onClose: () => void;
+}
+
+const PackageOptionModal = ({ packageOption, onClose }: PackageOptionsModalProps) => (
+  <Modal title={packageOption.title || ''} onClose={onClose}>
+    {packageOption.image && (
+      <Repeat>
+        <LogoBox logo={packageOption.image} alt={packageOption.title || undefined} wide />
+      </Repeat>
+    )}
+    {packageOption.description && (
+      <Repeat>
+        <Content dangerouslySetInnerHTML={{ __html: marked(packageOption.description) }} />
+      </Repeat>
+    )}
+    {packageOption.link?.href && packageOption.link.title && (
+      <Repeat>
+        <ButtonInline
+          as="a"
+          href={packageOption.link.href}
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          {packageOption.link.title}
+        </ButtonInline>
+      </Repeat>
+    )}
+  </Modal>
+);
+
+export default PackageOptionModal;

package/src/layouts/searchItem/PackageOptions.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { marked } from 'marked';
+
+import { Repeat } from '../../components/Repeat/index';
+import { ProductPageMainSection } from '../../components/ProductPage/index';
+import Content from '../../components/Content/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonInline } from '../../components/Button/index';
+import LogoBox from '../../components/LogoBox/index';
+import { PackageOption } from '../../@types/codegen';
+
+interface PackageOptionsProps {
+  packageOptions?: PackageOption[] | null;
+}
+
+const PackageOptions = ({ packageOptions }: PackageOptionsProps) => {
+  if (!packageOptions) {
+    return null;
+  }
+
+  return (
+    <>
+      {packageOptions.map((packageOption, index) => (
+        <ProductPageMainSection key={packageOption.title || index}>
+          <Repeat>
+            <H2 noMargin>{packageOption.title}</H2>
+          </Repeat>
+          {packageOption.description && (
+            <Repeat>
+              <Content dangerouslySetInnerHTML={{ __html: marked(packageOption.description) }} />
+            </Repeat>
+          )}
+          {packageOption.link?.url && (
+            <Repeat>
+              <ButtonInline
+                as="a"
+                href={packageOption.link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {packageOption.link.title
+                  ? packageOption.link.title
+                  : 'Läs mer (Öppnas i ett nytt fönster)'}
+              </ButtonInline>
+            </Repeat>
+          )}
+          {packageOption.image && (
+            <Repeat>
+              <LogoBox logo={packageOption.image} alt="Logotyp" wide />
+            </Repeat>
+          )}
+        </ProductPageMainSection>
+      ))}
+    </>
+  );
+};
+
+export default PackageOptions;

package/{dist-src/layouts/searchItem/Page404.js → src/layouts/searchItem/Page404.tsx}

@@ -1,9 +1,17 @@
 import React from 'react';
+
 import Container from '../../components/Container/index';
 import { Page, PageSection } from '../../components/Page/index';
 import { H1 } from '../../components/Heading/index';
-const Page404 = () => (React.createElement(Page, null,
-    React.createElement(PageSection, { large: true },
-        React.createElement(Container, null,
-            React.createElement(H1, { noMargin: true }, "404")))));
+
+const Page404 = () => (
+  <Page>
+    <PageSection large>
+      <Container>
+        <H1 noMargin>404</H1>
+      </Container>
+    </PageSection>
+  </Page>
+);
+
 export default Page404;

package/{dist-src/layouts/searchItem/PageLoading.js → src/layouts/searchItem/PageLoading.tsx}

@@ -1,9 +1,17 @@
 import React from 'react';
+
 import Container from '../../components/Container/index';
 import { Page, PageSection } from '../../components/Page/index';
 import Loader from '../../components/Loader/index';
-const PageLoading = () => (React.createElement(Page, null,
-    React.createElement(PageSection, { large: true },
-        React.createElement(Container, null,
-            React.createElement(Loader, null)))));
+
+const PageLoading = () => (
+  <Page>
+    <PageSection large>
+      <Container>
+        <Loader />
+      </Container>
+    </PageSection>
+  </Page>
+);
+
 export default PageLoading;

package/src/layouts/searchItem/Property.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Category, Property } from '../../@types/vehicle-properties';
+import PropertyTreeCreator from '../../utils/vehicle-properties/property-tree-creator';
+import sortTree from '../../utils/vehicle-properties/property-tree-sorter';
+import enrichWithHint from '../../utils/vehicle-properties/property-hint-enricher';
+import addCustomProperties from '../../utils/vehicle-properties/custom-property-adder';
+import removeProperties from '../../utils/vehicle-properties/property-remover';
+import MetadataItem from './MetadataItem';
+
+import { H5 } from '../../components/Heading/index';
+import { Repeat } from '../../components/Repeat/index';
+import { TableList } from '../../components/TableList/index';
+import Tabs from '../../components/Tabs/index';
+import { VehicleData } from '../../@types/codegen';
+
+interface MetadataSubCategoryProps {
+  name: string;
+  properties: Property[];
+}
+
+const MetadataSubCategory = ({ name, properties }: MetadataSubCategoryProps) => (
+  <Repeat>
+    <H5 as="h3">{name}</H5>
+    <TableList>
+      {!!properties.length &&
+        properties.map((property, index) => (
+          <MetadataItem
+            name={property.name}
+            hint={property.hint}
+            value={property.value}
+            unit={property.unit}
+            key={`${property.name}-${index}`}
+          />
+        ))}
+    </TableList>
+  </Repeat>
+);
+
+interface MetadataCaregoryProps {
+  properties: Property[];
+  subCategories: Category[];
+}
+
+const MetadataCategory = ({ properties, subCategories }: MetadataCaregoryProps) => (
+  <div className="tab-section">
+    {!!properties.length && (
+      <Repeat>
+        <TableList>
+          {properties.map((property, index) => (
+            <MetadataItem
+              name={property.name}
+              hint={property.hint}
+              value={property.value}
+              unit={property.unit}
+              key={`${property.name}-${index}`}
+            />
+          ))}
+        </TableList>
+      </Repeat>
+    )}
+    {!!subCategories.length &&
+      subCategories.map((subCategory, index) => (
+        <MetadataSubCategory
+          name={subCategory.name}
+          properties={subCategory.properties}
+          key={`${subCategory.name}-${index}`}
+        />
+      ))}
+  </div>
+);
+
+interface PropertySetProps {
+  propertySet: any;
+  vehicleData: VehicleData;
+}
+
+const PropertySet = ({ propertySet, vehicleData }: PropertySetProps) => {
+  const [activeCategoryId, setActiveCategoryId] = useState(-1);
+  const mappedProperties = useMemo(() => {
+    if (!propertySet) {
+      return undefined;
+    }
+
+    let newProperties = removeProperties(propertySet);
+    newProperties = addCustomProperties(vehicleData, newProperties);
+    const enrichedProperties = enrichWithHint(newProperties);
+
+    const tree = new PropertyTreeCreator(enrichedProperties).create();
+    sortTree(tree);
+    return tree;
+  }, [propertySet]);
+
+  useEffect(() => {
+    const categories =
+      mappedProperties?.categories?.length !== undefined ? mappedProperties?.categories : undefined;
+
+    if (activeCategoryId < 0 && categories !== undefined && categories.length > 0) {
+      setActiveCategoryId(categories[0].id);
+    }
+  }, [mappedProperties]);
+
+  const onTab = useCallback((id: string) => setActiveCategoryId(parseInt(id, 10)), []);
+
+  const activeCategory = mappedProperties?.categories?.find(
+    (category) => category.id === activeCategoryId
+  );
+
+  return (
+    <>
+      <Repeat>
+        <Tabs
+          tabs={
+            mappedProperties?.categories?.map((category) => ({
+              name: `${category.id}`,
+              displayName: category.name,
+            })) || []
+          }
+          active={`${activeCategoryId}`}
+          onClick={onTab}
+        />
+      </Repeat>
+      {activeCategory && (
+        <Repeat>
+          <MetadataCategory
+            properties={activeCategory.properties}
+            subCategories={activeCategory.subCategories}
+          />
+        </Repeat>
+      )}
+    </>
+  );
+};
+
+export default PropertySet;

package/src/layouts/searchItem/Related.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+
+import Container from '../../components/Container/index';
+import { Repeat } from '../../components/Repeat/index';
+
+import { PageSection } from '../../components/Page/index';
+import SectionHeader from '../../components/SectionHeader/index';
+import {
+  OverflowGridList,
+  OverflowGrid,
+  OverflowGridItem,
+} from '../../components/OverflowGrid/index';
+import ProductCard from '../../components/ProductCard/index';
+import { H2 } from '../../components/Heading/index';
+import useRelatedSearch from '../../State/RelatedSearch/useRelatedSearch';
+import Loader from '../../components/Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import PubSub from '../../utils/pubsub/pubsub';
+import { regexPathGuid } from '../../utils/regex';
+
+interface RelatedProps {
+  id: string;
+  hashRoute?: boolean;
+  pathRoute?: string;
+  onClickSearchItem?: (id: string) => void;
+}
+
+const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }: RelatedProps) => {
+  const { loading, response, moreLikeThisUrl } = useRelatedSearch(id);
+
+  const onItemClicked = useCallback((id: string) => {
+    PubSub.publish('ItemClicked', id);
+    if (onClickSearchItem) {
+      onClickSearchItem(id);
+    }
+  }, []);
+
+  if (!response?.documentList.documents.length || response?.documentList.documents.length === 0) {
+    return null;
+  }
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  return (
+    <PageSection accent large className="wayke__theme wayke__color--accent-bg">
+      <Container>
+        {moreLikeThisUrl ? (
+          <Repeat>
+            <SectionHeader onClick={() => {}}>
+              <H2 noMargin>Relaterade fordon</H2>
+            </SectionHeader>
+          </Repeat>
+        ) : (
+          <Repeat>
+            <SectionHeader onClick={() => {}} actionTitle="Visa alla">
+              <H2 noMargin>Senast inkomna</H2>
+            </SectionHeader>
+          </Repeat>
+        )}
+
+        <Repeat>
+          <OverflowGrid>
+            <OverflowGridList>
+              {response?.documentList.documents.map((document) => {
+                const prefix = pathRoute ? `/${pathRoute}` : '/';
+
+                const r = regexPathGuid(pathRoute);
+
+                const pathRouteUrl =
+                  window.location.pathname === '/'
+                    ? `${prefix}${document._id}`
+                    : r.test(`${pathRoute}${id}`)
+                    ? window.location.pathname.replace(r, `${pathRoute}${document._id}`)
+                    : `${window.location.pathname}${prefix}${document._id}`;
+
+                return (
+                  <OverflowGridItem key={document._id}>
+                    <ProductCard
+                      id={document._id}
+                      onClick={onItemClicked}
+                      title={document.title}
+                      href={pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined}
+                      image={document.featuredImage?.files?.[0]?.url}
+                      description={document.shortDescription}
+                      uspList={[
+                        {
+                          title: document.modelYear,
+                        },
+                        {
+                          title: `${numberSeparator(document.mileage)} mil`,
+                        },
+                        {
+                          title: document.gearboxType,
+                        },
+                        {
+                          title: document.fuelType,
+                        },
+                      ]}
+                      price={`${numberSeparator(document.price)} kr`}
+                      oldPrice={
+                        document.oldPrice !== undefined && document.price < document.oldPrice
+                          ? `${numberSeparator(document.oldPrice)} kr`
+                          : undefined
+                      }
+                      pathRoute={pathRoute}
+                    />
+                  </OverflowGridItem>
+                );
+              })}
+            </OverflowGridList>
+          </OverflowGrid>
+        </Repeat>
+      </Container>
+    </PageSection>
+  );
+};
+
+export default Related;