@wayke-se/components-react 3.0.0-beta.7 → 3.0.0-beta.9

package/src/layouts/searchItem/MetadataItem.tsx

@@ -1,74 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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/src/layouts/searchItem/Property.tsx

@@ -1,134 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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;