From 8f90b3ba306926151464e8a8808822caeef6189a Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Fri, 8 Jan 2021 09:52:55 +0100
Subject: [PATCH 01/26] Add purchasing options

---
 .../content-form/content-form.tsx             |  34 ++-
 .../content-form/purchasing-options-form.tsx  | 270 ++++++++++++++++++
 components/generic/content-buy-form/index.tsx |  33 +++
 .../dynamic-field/fields/input-number.tsx     |   6 +-
 components/layout/header/admin-sub-header.tsx |  10 +-
 edge.config.js                                | 136 ++++++++-
 lib/config/config.schema.js                   |  15 +
 lib/config/load-config.js                     |  14 +
 lib/types/contentTypeDefinition.ts            |  15 +-
 pages/create/content/[type].tsx               |   8 +-
 10 files changed, 522 insertions(+), 19 deletions(-)
 create mode 100644 components/content/write-content/content-form/purchasing-options-form.tsx
 create mode 100644 components/generic/content-buy-form/index.tsx

diff --git a/components/content/write-content/content-form/content-form.tsx b/components/content/write-content/content-form/content-form.tsx
index da1f4963..91015595 100644
--- a/components/content/write-content/content-form/content-form.tsx
+++ b/components/content/write-content/content-form/content-form.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect, useState, memo, useCallback } from 'react'
-import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
-import Link from 'next/link'
+import PurchasingOptionsForm, { PurchashingOptionsType } from './purchasing-options-form'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 
 import API from '@lib/api/api-endpoints'
 import Button from '@components/generic/button/button'
@@ -9,8 +8,11 @@ import ContentSummaryView from '../../read-content/content-summary-view/content-
 import DynamicField from '@components/generic/dynamic-field/dynamic-field-edit'
 import { FIELDS } from '@lib/constants'
 import GroupSummaryView from '@components/groups/read/group-summary-view/group-summary-view'
+import Link from 'next/link'
 import Toggle from '@components/generic/toggle/toggle'
 import fetch from '@lib/fetcher'
+import hasPermission from '@lib/permissions/has-permission'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
 
 function ContentForm(props) {
   // Saving states
@@ -18,8 +20,18 @@ function ContentForm(props) {
   const [success, setSuccess] = useState(false)
   const [error, setError] = useState(false)
 
+  const defaultShoppingOptions: PurchashingOptionsType = {
+    multiple: false,
+    sku: '',
+    stock: 1,
+    options: []
+  }
+
   // used to store values
-  const [state, setState] = useState({})
+  const [state, setState] = useState({
+    draft: false,
+    purchasingOptions: defaultShoppingOptions
+  })
 
   useEffect(() => {
     // Preload the form values
@@ -30,12 +42,17 @@ function ContentForm(props) {
       const allowedKeys = props.permittedFields
         .map((f) => f.name)
         .concat('draft')
+        .concat('purchasingOptions')
 
       allowedKeys.map((k) => {
         filteredData[k] = props.content[k]
       })
 
-      setState(filteredData)
+      setState({
+        ...state,
+        ...filteredData,
+        purchasingOptions: filteredData['purchasingOptions'] || defaultShoppingOptions
+      })
     }
   }, [props.content, props.type])
 
@@ -170,6 +187,13 @@ function ContentForm(props) {
               />
             ))}
 
+          {hasPermission(props.currentUser, `content.${props.type.slug}.purchasing.sell`) && <div className="purchasing-options-wrapper">
+              <PurchasingOptionsForm value={state['purchasingOptions']} onChange={(val) => setState({
+                ...state,
+                purchasingOptions: val
+              })} />
+          </div>}
+
           <div className="actions">
             <Button loading={loading} alt={true} type="submit">
               Save
diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
new file mode 100644
index 00000000..a8482439
--- /dev/null
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -0,0 +1,270 @@
+import React, { useState } from 'react'
+
+import Button from '@components/generic/button/button'
+import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+
+type OptionsType = {
+  name: string,
+  price: number,
+  default: boolean,
+  stock: number,
+}
+
+export type PurchashingOptionsType = {
+  multiple: boolean,
+  stock: number,
+  sku: string,
+  currency: string,
+  price: number,
+  options?: OptionsType[]
+}
+
+type PropTypesVariantItem = {
+  variant: OptionsType,
+  onChange: (val: OptionsType) => void,
+  onClickRemove: () => void
+}
+
+function VariantItem({
+  variant,
+  onChange,
+  onClickRemove
+}: PropTypesVariantItem) {
+
+  const onClickRemoveButton = (ev: React.MouseEvent<HTMLButtonElement>)  => {
+    ev.preventDefault()
+    ev.stopPropagation()
+    onClickRemove()
+
+  }
+  return (
+    <>
+      <div className="variant-item">
+        <DynamicFieldEdit
+          name="default"
+          value={variant.default}
+          onChange={(val) => onChange({
+            ...variant,
+            default: val
+          })}
+          field={{
+            name: 'default',
+            type: 'boolean',
+            label: 'This is the default variant',
+          }} />
+        <DynamicFieldEdit
+          name="name"
+          value={variant.name}
+          onChange={(val) => onChange({
+            ...variant,
+            name: val
+          })}
+          field={{
+            name: 'name',
+            type: 'text',
+            placeholder: 'Size M',
+            label: 'name',
+            min: 0
+          }} />
+        <DynamicFieldEdit
+          name="stock"
+          value={variant.stock}
+          onChange={(val) => onChange({
+            ...variant,
+            stock: val
+          })}
+          field={{
+            name: 'stock',
+            type: 'number',
+            label: 'stock',
+            min: 0
+          }} />
+        <DynamicFieldEdit
+          name="price"
+          value={variant.price}
+          onChange={(val) => onChange({
+            ...variant,
+            price: val
+          })}
+          field={{
+            name: 'price',
+            type: 'number',
+            label: 'price',
+            placeholder: 0.4,
+            min: 0.1,
+            max: 10000
+          }} />
+
+          <Button onClick={onClickRemoveButton}>Remove</Button>
+      </div>
+      <style jsx>{
+        `
+        .variant-item {
+          padding: var(--edge-gap);
+          border: 1px solid var(--accents-3);
+          margin: var(--edge-gap);
+        }
+        `
+      }</style>
+    </>
+  )
+}
+
+
+type PropTypes = {
+  value: PurchashingOptionsType,
+  onChange: (val: PurchashingOptionsType) => void
+}
+
+
+export default function PurchasingOptionsForm({
+  value,
+  onChange
+}: PropTypes) {
+  const [variants, setVariants] = useState([])
+
+  const addVariant = (ev: React.MouseEvent<HTMLButtonElement>)  => {
+    ev.preventDefault()
+    ev.stopPropagation()
+
+    setVariants([...variants, {
+      name: '',
+      price: 0.0,
+      stock: 0,
+      default: false
+    }])
+  }
+
+  const onChangeVariant = (index, value: OptionsType) => {
+    setVariants(variants.map((item, i) => {
+      return index === i ? {
+        ...value
+      } : {
+          ...item,
+          default: value.default === true ? false: item.default
+        }
+    }))
+  }
+
+  const onRemoveVariant = (index) => {
+    setVariants(variants.filter((item, i) => {
+      return i !== index
+    }))
+  }
+
+  return (
+    <>
+      <div className="purchasing-options">
+        <h3>Purchashing Options</h3>
+        <DynamicFieldEdit
+          name="multiple"
+          value={value.multiple}
+          onChange={(val) => onChange({
+            ...value,
+            multiple: val
+          })}
+          field={{
+            name: 'multiple',
+            type: 'boolean',
+            label: 'Allow multiple items',
+          }} />
+        <DynamicFieldEdit
+          name="sku"
+          value={value.sku}
+          onChange={(val) => onChange({
+            ...value,
+            sku: val
+          })}
+          field={{
+            name: 'sku',
+            type: 'text',
+            label: 'SKU',
+          }} />
+        <DynamicFieldEdit
+          name="stock"
+          value={value.stock}
+          onChange={(val) => onChange({
+            ...value,
+            stock: val
+          })}
+          field={{
+            name: 'stock',
+            type: 'number',
+            label: 'stock',
+            min: 0
+          }} />
+
+        <div className="form-row">
+          <div className="input-wr">
+            <DynamicFieldEdit
+              name="price"
+              value={value.price}
+              onChange={(val) => onChange({
+                ...value,
+                price: val
+              })}
+              field={{
+                name: 'price',
+                type: 'number',
+                label: 'price',
+                min: 0.1,
+                max: 10000
+              }} />
+          </div>
+          <div className="input-wr">
+            <DynamicFieldEdit
+              name="currency"
+              value={value.currency}
+              onChange={(val) => onChange({
+                ...value,
+                currency: val
+              })}
+              field={{
+                name: 'currency',
+                type: 'select',
+                label: 'Currency',
+                options: [{
+                  value: 'euro',
+                  label: '€'
+                }, {
+                  value: 'dollar',
+                  label: '$'
+                }, {
+                  value: 'pound',
+                  label: '£'
+                }],
+                description: 'Note: All values will be transformed to dollars at the moment of the payment.'
+              }} />
+          </div>
+        </div>
+
+        <div className="divider"></div>
+        <h4>Product Variants</h4>
+        <p>You can add diferent options for this product. For example: Sizes S,X,M,L with different prices and stock.</p>
+        {variants.map((item, index) => {
+          return <div className="variant" key={`variant-${index}`}>
+            <VariantItem variant={item} onChange={(val) => onChangeVariant(index, val)} onClickRemove={() => onRemoveVariant(index)} />
+          </div>
+        })}
+        <Button onClick={addVariant}>Add variant</Button>
+      </div>
+      <style jsx>{
+        `
+        .purchasing-options {
+          padding: var(--edge-gap);
+          border: 1px solid;
+          
+        }
+
+        .form-row {
+          display: flex;
+        }
+
+        .form-row .input-wr {
+          width: 50%;
+        }
+        `
+      }</style>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/generic/content-buy-form/index.tsx b/components/generic/content-buy-form/index.tsx
new file mode 100644
index 00000000..8194fa3c
--- /dev/null
+++ b/components/generic/content-buy-form/index.tsx
@@ -0,0 +1,33 @@
+import { ContentEntityType, ContentTypeDefinition } from '@lib/types'
+
+import Button from '../button/button'
+import React from 'react'
+
+type PropTypes = {
+  contentType : ContentTypeDefinition,
+  content: ContentEntityType
+}
+
+export default function ContentBuyForm({
+  contentType,
+  content
+}: PropTypes) {
+  return (
+    <>
+      <div className="content-buy-form">
+        <div className="quantity"></div>
+        <div className="add-to-cart">
+          <Button>Add to cart</Button>
+        </div>
+      </div>
+      <style jsx>{
+        `
+        .badge {
+          border-radius: borderRadius;
+          
+        }
+        `
+      }</style>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/generic/dynamic-field/fields/input-number.tsx b/components/generic/dynamic-field/fields/input-number.tsx
index 5efa1606..23f4584f 100644
--- a/components/generic/dynamic-field/fields/input-number.tsx
+++ b/components/generic/dynamic-field/fields/input-number.tsx
@@ -1,7 +1,6 @@
-import {  memo } from 'react'
-
-import useOnChange from '@components/generic/dynamic-field/hooks/useOnChange'
+import { memo } from 'react'
 import useFieldLength from '@components/generic/dynamic-field/hooks/useFieldLength'
+import useOnChange from '@components/generic/dynamic-field/hooks/useOnChange'
 
 function InputNumber(props) {
   const { onChange, touched } = useOnChange({ onChangeHandler: props.onChange })
@@ -19,6 +18,7 @@ function InputNumber(props) {
       min={min}
       max={max}
       className={`${touched ? 'touched' : ''}`}
+      step="any"
       onChange={onChange}
     />
   )
diff --git a/components/layout/header/admin-sub-header.tsx b/components/layout/header/admin-sub-header.tsx
index 8ccd8822..ad3d32a9 100644
--- a/components/layout/header/admin-sub-header.tsx
+++ b/components/layout/header/admin-sub-header.tsx
@@ -56,7 +56,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
                     <path fill="none" d="M0 0h24v24H0z" />
                     <path
                       className="icon"
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87z"
                     />
                     <circle
@@ -64,11 +64,11 @@ export default function AdminSubHeader({ user }: PropTypes) {
                       cx="9"
                       cy="8"
                       r="4"
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                     />
                     <path
                       className="icon"
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24C14.5 5.27 15 6.58 15 8s-.5 2.73-1.33 3.76c.42.14.86.24 1.33.24zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
                     />
                   </svg>
@@ -112,7 +112,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
               <ul>
                 {contentLinks.map(link => {
                   return (
-                    <li>
+                    <li key={link.link}>
                       <Link href={link.link}>
                         <a title={`Administer ${link.title}`}>
                           <svg
@@ -149,7 +149,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
               <ul>
                 {groupLinks.map(link => {
                   return (
-                    <li>
+                    <li key={link.link}>
                       <Link href={link.link}>
                         <a title={`Administer ${link.title}`}>
                           <svg
diff --git a/edge.config.js b/edge.config.js
index 1d4aba23..819d7e02 100644
--- a/edge.config.js
+++ b/edge.config.js
@@ -11,6 +11,7 @@ export const getConfig = () => {
   const userRole = 'USER'
   const adminRole = 'ADMIN'
   const publicRole = 'PUBLIC'
+  const shopRole = 'SHOP'
 
   const roles = [
     {
@@ -25,6 +26,10 @@ export const getConfig = () => {
       label: 'Public',
       value: publicRole,
     },
+    {
+      label: 'Shop',
+      value: shopRole
+    }
   ]
 
   const salt = crypto.randomBytes(16).toString('hex')
@@ -213,6 +218,116 @@ export const getConfig = () => {
     ],
   }
 
+  const productContentType = {
+    title: 'Product',
+
+    slug: 'product',
+
+    slugGeneration: ['title', 'createdAt'],
+
+    methods: {
+      get: true,
+      post: true,
+      delete: true,
+      put: true,
+    },
+
+    permissions: {
+      read: [publicRole],
+      create: [adminRole, shopRole],
+      update: [adminRole],
+      delete: [adminRole],
+      admin: [adminRole],
+    },
+
+    publishing: {
+      draftMode: true,
+      title: 'title',
+    },
+
+    monetization: {
+      web: false,
+    },
+
+    comments: {
+      enabled: true,
+      permissions: {
+        read: [publicRole],
+        create: [userRole, adminRole],
+        update: [adminRole],
+        delete: [adminRole],
+        admin: [adminRole],
+      },
+    },
+
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: [userRole],
+        sell: [shopRole, adminRole],
+        ship: [adminRole],
+        admin: [adminRole]
+      }
+    },
+
+    entityInteractions: [
+      
+      {
+        type: 'favorite',
+        aggregation: 'sum',
+        activeTitle: 'Remove from favorite',
+        inactiveTitle: 'Add to favorite',
+        permissions: {
+          read: ['PUBLIC', 'USER'],
+          create: ['USER'],
+          delete: ['USER'],
+        },
+      },
+    ],
+
+    fields: [
+      {
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+        placeholder: 'Title',
+        minlength: 8,
+        maxlength: 150,
+        required: true,
+        errorMessage: 'Title must be between 8 and 150 characters',
+      },
+      {
+        name: 'images',
+        type: 'img',
+        label: 'Image',
+        placeholder: 'Image',
+        multiple: true,
+        errorMessage: 'Only images are supported',
+      },
+      {
+        name: 'video',
+        type: 'video_url',
+        label: 'Video (URL)',
+        errorMessage: 'Only urls (https://) are supported',
+      },
+      {
+        name: 'tags',
+        type: 'tags',
+        label: 'Tags',
+        placeholder: 'Tags',
+      },
+      {
+        name: 'description',
+        type: 'rich_text',
+        label: 'Description',
+        placeholder: 'Description',
+        required: true,
+        minlength: 20,
+        errorMessage: 'Description is required',
+      },
+    ],
+  }
+
   const siteNewsContentType = {
     title: 'News',
 
@@ -677,6 +792,11 @@ export const getConfig = () => {
           name: siteNewsContentType.slug,
           title: siteNewsContentType.title, // this title will be appeared ont the widget
         },
+        {
+          // any other configuration will be placed here
+          name: productContentType.slug,
+          title: productContentType.title, // this title will be appeared ont the widget
+        },
       ],
       groups: [
         {
@@ -692,7 +812,7 @@ export const getConfig = () => {
     // Content configuration
     content: {
       // Different content types defined
-      types: [postContentType, siteNewsContentType],
+      types: [postContentType, siteNewsContentType, productContentType],
       initialContent: [],
     },
 
@@ -756,6 +876,20 @@ export const getConfig = () => {
           ], // fields that will be retrieved from the db
           permissions: siteNewsContentType.permissions.read, // permissions for check before search
         },
+        {
+          name: productContentType.slug, // a collection by which the search will be run
+          type: 'content', // used for separation purposes
+          fields: ['title', 'description'], // fields by which the search will be run
+          fieldsForShow: [
+            'title',
+            'slug',
+            'description',
+            'groupId',
+            'groupType',
+            'type',
+          ], // fields that will be retrieved from the db
+          permissions: productContentType.permissions.read, // permissions for check before search
+        },
       ],
     },
   }
diff --git a/lib/config/config.schema.js b/lib/config/config.schema.js
index 95aa37df..31c60d01 100644
--- a/lib/config/config.schema.js
+++ b/lib/config/config.schema.js
@@ -92,6 +92,21 @@ const ContentTypeSchema = object({
         admin: [],
       }),
   }),
+  purchasing: object({
+    enabled: boolean().default(false),
+    permissions: object({
+      buy: array(string()),
+      sell: array(string()),
+      ship: array(string()),
+      admin: array(string()),
+    })
+      .default({
+        buy: [],
+        sell: [],
+        ship: [],
+        admin: [],
+      }),
+  }),
   entityInteractions: array(InteractionSchema).nullable(),
 })
 
diff --git a/lib/config/load-config.js b/lib/config/load-config.js
index f5e9d1e2..7ab4c3b3 100644
--- a/lib/config/load-config.js
+++ b/lib/config/load-config.js
@@ -156,6 +156,8 @@ export default function load() {
       availablePermissions[`content.${type.slug}.admin`] =
         type.permissions.admin
 
+
+
       // Comments
       if (type.comments.enabled) {
         availablePermissions[`content.${type.slug}.comments.read`] =
@@ -170,6 +172,18 @@ export default function load() {
           type.comments.permissions.admin
       }
 
+      // Purchasing
+      if (type.purchasing.enabled) {
+        availablePermissions[`content.${type.slug}.purchasing.buy`] =
+          type.purchasing.permissions.buy
+        availablePermissions[`content.${type.slug}.purchasing.sell`] =
+          type.purchasing.permissions.sell
+        availablePermissions[`content.${type.slug}.purchasing.ship`] =
+          type.purchasing.permissions.ship
+        availablePermissions[`content.${type.slug}.purchasing.admin`] =
+          type.purchasing.permissions.admin
+      }
+
       // interactions
       ;(type.entityInteractions || []).forEach(
         ({ type: interactionType, permissions }) => {
diff --git a/lib/types/contentTypeDefinition.ts b/lib/types/contentTypeDefinition.ts
index 880a8f54..59831077 100644
--- a/lib/types/contentTypeDefinition.ts
+++ b/lib/types/contentTypeDefinition.ts
@@ -1,13 +1,25 @@
 import { FieldType } from './fields'
+import { InteractionTypeDefinition } from './interactionTypeDefinition'
 import { PermissionsType } from './permissions'
 import { PublishingType } from './publishing'
-import { InteractionTypeDefinition } from './interactionTypeDefinition'
 
 export declare type CommentsType = {
   enabled: boolean;
   permissions: PermissionsType
 }
 
+type PurchasingPermissionsType = {
+  buy: [string],
+  sell: [string],
+  admin: [string],
+  ship: [string]
+}
+
+export declare type PurchasingType = {
+  enabled: boolean;
+  permissions: PurchasingPermissionsType
+}
+
 export declare type ContentTypeDefinition = {
   title: string;
   slug: string;
@@ -19,6 +31,7 @@ export declare type ContentTypeDefinition = {
     web: boolean;
   },
   comments: CommentsType;
+  purchasing: PurchasingType;
   fields: FieldType[]
   entityInteractions: InteractionTypeDefinition[]
 }
\ No newline at end of file
diff --git a/pages/create/content/[type].tsx b/pages/create/content/[type].tsx
index 41943c88..8ee6530e 100644
--- a/pages/create/content/[type].tsx
+++ b/pages/create/content/[type].tsx
@@ -1,15 +1,14 @@
-import { useState, useMemo } from 'react'
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
-
 import {
   contentPermission,
-  groupContentPermission,
   cypheredFieldPermission,
+  groupContentPermission,
 } from '@lib/permissions'
 import { getContentTypeDefinition, getGroupTypeDefinition } from '@lib/config'
+import { useMemo, useState } from 'react'
 
 import ContentForm from '@components/content/write-content/content-form/content-form'
 import { GetServerSideProps } from 'next'
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 import Layout from '@components/layout/normal/layout'
 import { connect } from '@lib/api/db'
 import { findOneContent } from '@lib/api/entities/content'
@@ -134,6 +133,7 @@ const CreateContent = ({ group, groupType, contentType, currentUser }) => {
               group={group}
               groupType={groupType}
               onSave={onSave}
+              currentUser={currentUser}
               permittedFields={permittedFields}
             />
           </GoogleReCaptchaProvider>

From de6f73e69f5e1837b72aa40398f3b21d1275f607 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 14 Jan 2021 11:13:37 +0100
Subject: [PATCH 02/26] Tests and UI for purchasing options, part 1

---
 .../content-form/content-form.tsx             |   8 +-
 .../content-form/purchasing-options-form.tsx  |  21 +-
 lib/api/api-helpers/cypher-fields.ts          |   7 +-
 lib/api/entities/content/index.ts             |   5 +-
 lib/api/middlewares/bodyparser.middleware.js  |   2 +-
 lib/permissions/has-permission.ts             |   5 +-
 lib/permissions/index.ts                      |  78 +++--
 lib/types/entities/group.ts                   |   4 +-
 lib/types/groupTypeDefinition.ts              |   2 +-
 lib/types/purchasing.ts                       |  16 ++
 lib/validations/content/index.js              |  36 ---
 lib/validations/content/index.ts              |  76 +++++
 pages/api/content/[type].ts                   |  16 +-
 .../write/content.purchasing.create.test.js   | 271 ++++++++++++++++++
 .../api/users/write/users.register.test.js    |   2 +-
 15 files changed, 454 insertions(+), 95 deletions(-)
 create mode 100644 lib/types/purchasing.ts
 delete mode 100644 lib/validations/content/index.js
 create mode 100644 lib/validations/content/index.ts
 create mode 100644 test/integration/api/content/write/content.purchasing.create.test.js

diff --git a/components/content/write-content/content-form/content-form.tsx b/components/content/write-content/content-form/content-form.tsx
index 91015595..3db86d9c 100644
--- a/components/content/write-content/content-form/content-form.tsx
+++ b/components/content/write-content/content-form/content-form.tsx
@@ -1,4 +1,3 @@
-import PurchasingOptionsForm, { PurchashingOptionsType } from './purchasing-options-form'
 import React, { memo, useCallback, useEffect, useState } from 'react'
 
 import API from '@lib/api/api-endpoints'
@@ -9,9 +8,12 @@ import DynamicField from '@components/generic/dynamic-field/dynamic-field-edit'
 import { FIELDS } from '@lib/constants'
 import GroupSummaryView from '@components/groups/read/group-summary-view/group-summary-view'
 import Link from 'next/link'
+import { PurchashingOptionsType } from '@lib/types/purchasing'
+import PurchasingOptionsForm from './purchasing-options-form'
 import Toggle from '@components/generic/toggle/toggle'
 import fetch from '@lib/fetcher'
 import hasPermission from '@lib/permissions/has-permission'
+import { purchasingPermission } from '@lib/permissions'
 import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
 
 function ContentForm(props) {
@@ -24,6 +26,8 @@ function ContentForm(props) {
     multiple: false,
     sku: '',
     stock: 1,
+    currency: '',
+    price: 0.0,
     options: []
   }
 
@@ -187,7 +191,7 @@ function ContentForm(props) {
               />
             ))}
 
-          {hasPermission(props.currentUser, `content.${props.type.slug}.purchasing.sell`) && <div className="purchasing-options-wrapper">
+          {purchasingPermission(props.currentUser, props.type.slug, 'sell')  && <div className="purchasing-options-wrapper">
               <PurchasingOptionsForm value={state['purchasingOptions']} onChange={(val) => setState({
                 ...state,
                 purchasingOptions: val
diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index a8482439..fdaac97f 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -1,27 +1,12 @@
+import { PurchashingOptionsType, PurchasingVariantType } from '@lib/types/purchasing'
 import React, { useState } from 'react'
 
 import Button from '@components/generic/button/button'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
 
-type OptionsType = {
-  name: string,
-  price: number,
-  default: boolean,
-  stock: number,
-}
-
-export type PurchashingOptionsType = {
-  multiple: boolean,
-  stock: number,
-  sku: string,
-  currency: string,
-  price: number,
-  options?: OptionsType[]
-}
-
 type PropTypesVariantItem = {
-  variant: OptionsType,
-  onChange: (val: OptionsType) => void,
+  variant: PurchasingVariantType,
+  onChange: (val: PurchasingVariantType) => void,
   onClickRemove: () => void
 }
 
diff --git a/lib/api/api-helpers/cypher-fields.ts b/lib/api/api-helpers/cypher-fields.ts
index bef9383e..5066425e 100644
--- a/lib/api/api-helpers/cypher-fields.ts
+++ b/lib/api/api-helpers/cypher-fields.ts
@@ -1,6 +1,6 @@
-import crypto from 'crypto'
-
 import { FieldType, UserType } from '@lib/types'
+
+import crypto from 'crypto'
 import { cypheredFieldPermission } from '@lib/permissions'
 
 class CypherFields {
@@ -41,8 +41,11 @@ class CypherFields {
   }
 
   cypherData(fields: FieldType[], data: { [ket: string]: any }) {
+    // Deep clone the data (TODO: See why)
     const cypheredData = JSON.parse(JSON.stringify({ ...data }))
 
+
+    // Cypher each field that is marked as enabled
     fields.forEach(({ name, cypher: { enabled } = {} }) => {
       if (enabled && cypheredData[name]) {
         cypheredData[name] = this.encrypt(`${cypheredData[name]}`)
diff --git a/lib/api/entities/content/index.ts b/lib/api/entities/content/index.ts
index a8fe9f78..1f972803 100644
--- a/lib/api/entities/content/index.ts
+++ b/lib/api/entities/content/index.ts
@@ -4,9 +4,12 @@ import { findOneUser, findUsers } from '@lib/api/entities/users'
 import { ANY_OBJECT } from '@lib/types'
 import { getDB } from '@lib/api/db'
 import { hidePrivateUserFields } from '@lib/api/entities/users/user.utils'
+import logger from '@lib/logger'
 
 export function findOneContent(type, options) {
-  console.log('find', type, options)
+  
+  logger('DEBUG', 'Find', type, options)
+  
   return getDB()
     .collection(type)
     .findOne(options)
diff --git a/lib/api/middlewares/bodyparser.middleware.js b/lib/api/middlewares/bodyparser.middleware.js
index f2a8d65b..153936af 100644
--- a/lib/api/middlewares/bodyparser.middleware.js
+++ b/lib/api/middlewares/bodyparser.middleware.js
@@ -25,7 +25,7 @@ export async function parseBody(req, limit, parameters) {
   try {
     buffer = await getRawBody(req, { encoding, limit })
   } catch (e) {
-    console.log(e)
+    // console.log(e)
     if (e.type === 'entity.too.large') {
       throw new Error(`Body exceeded ${limit} limit`)
     } else {
diff --git a/lib/permissions/has-permission.ts b/lib/permissions/has-permission.ts
index d5d05d90..08054e79 100644
--- a/lib/permissions/has-permission.ts
+++ b/lib/permissions/has-permission.ts
@@ -1,8 +1,9 @@
-import { UserType } from '@lib/types'
+import { MemberType, UserType } from '@lib/types'
+
 import getPermissions from './get-permissions'
 
 // Given a user object and a list of pe
-export default function hasPermission(user : UserType, permission: string | Array<string>, customPermissions?: object) {
+export default function hasPermission(user : UserType | MemberType, permission: string | Array<string>, customPermissions?: object) {
   const roles =
     user && user.roles && user.roles.length > 0 ? user.roles : ['PUBLIC']
 
diff --git a/lib/permissions/index.ts b/lib/permissions/index.ts
index ddf8a703..f653196e 100644
--- a/lib/permissions/index.ts
+++ b/lib/permissions/index.ts
@@ -1,6 +1,7 @@
-import { UserType } from '@lib/types'
-import hasPerm from './has-permission'
+import { CommentType, ContentEntityType, GroupEntityType, UserType } from '@lib/types'
+
 import getPermissions from '@lib/config'
+import hasPerm from './has-permission'
 
 export const hasPermission = hasPerm
 
@@ -12,9 +13,9 @@ const publicUser = { roles: ['PUBLIC'] } as UserType
 // This function is used by the client app and the permissions middleware for the API
 export const contentPermission = (
   user: UserType = publicUser,
-  entityType,
-  action,
-  content = null
+  entityType: string,
+  action: string,
+  content: ContentEntityType = null
 ) => {
   const permission = [
     `content.${entityType}.${action}`,
@@ -39,13 +40,38 @@ export const contentPermission = (
   return canAccess
 }
 
+// Check permissions for a content purchasing actions 
+export const purchasingPermission = (
+  user: UserType = publicUser,
+  entityType: string,
+  action: string,
+  content: ContentEntityType = null
+) => {
+  const permission = [
+    `content.${entityType}.purchasing.${action}`,
+    `content.${entityType}.purchasing.admin`,
+  ]
+
+  // If there is a content we need to check also if the content owner is the current user
+  const canAccess = hasPerm(user, permission)
+
+  if (content) {
+    // Draft check
+    if (content.draft && action === 'buy') {
+      return false
+    }
+  }
+
+  return canAccess
+}
+
 export const groupContentPermission = (
   user: UserType = publicUser,
-  entityType,
-  contentType,
-  action,
-  group,
-  content = null
+  entityType: string,
+  contentType: string,
+  action: string,
+  group: GroupEntityType,
+  content: ContentEntityType = null
 ) => {
   const permission = [
     `group.${entityType}.content.${contentType}.${action}`,
@@ -90,9 +116,9 @@ export const groupContentPermission = (
 
 export const groupPermission = (
   user: UserType = publicUser,
-  entityType,
-  action,
-  group = null
+  entityType: string,
+  action: string,
+  group: GroupEntityType = null
 ) => {
   const permission = [
     `group.${entityType}.${action}`,
@@ -127,7 +153,7 @@ export const groupPermission = (
 // Check permissions for users or a user item
 // It checks if the user has the permissions for the role or if it's the own user
 // This function is used by the client app and the permissions middleware for the API
-export const userPermission = function(user: UserType, action, userId) {
+export const userPermission = function(user: UserType, action: string, userId: string) {
   const permission = [`user.${action}`, `user.admin`]
   const canAccess = hasPerm(user, permission)
 
@@ -150,9 +176,9 @@ export const userPermission = function(user: UserType, action, userId) {
 
 export const groupUserPermission = (
   user: UserType = publicUser,
-  entityType,
-  action,
-  group
+  entityType: string,
+  action: string,
+  group: GroupEntityType
 ) => {
   const permission = [
     `group.${entityType}.user.${action}`,
@@ -189,9 +215,9 @@ export const groupUserPermission = (
 // This function is used by the client app and the permissions middleware for the API
 export const commentPermission = function(
   user: UserType = publicUser,
-  contentType,
-  action,
-  comment = null
+  contentType: string,
+  action: string,
+  comment: ContentEntityType = null
 ) {
   const permission = [
     `content.${contentType}.comments.${action}`,
@@ -211,11 +237,11 @@ export const commentPermission = function(
 
 export const groupCommentPermission = (
   user: UserType = publicUser,
-  entityType,
-  contentType,
-  action,
-  group,
-  comment = null
+  entityType: string,
+  contentType: string,
+  action: string,
+  group: GroupEntityType,
+  comment: CommentType = null
 ) => {
   const permission = [
     `group.${entityType}.content.${contentType}.comments.${action}`,
@@ -263,7 +289,7 @@ export const interactionPermission = (
   entity: string,
   entityType: string,
   interactionType: string,
-  action
+  action: string
 ) => {
   const permissions = [
     `${entity}.${entityType}.interactions.${interactionType}.${action}`,
diff --git a/lib/types/entities/group.ts b/lib/types/entities/group.ts
index aa42eec2..d055949d 100644
--- a/lib/types/entities/group.ts
+++ b/lib/types/entities/group.ts
@@ -1,4 +1,5 @@
 import { InteractionEntity } from './interaction'
+import { PermissionsType } from '../permissions'
 
 export type MemberType = {
   id: string
@@ -18,5 +19,6 @@ export declare type GroupEntityType = {
   draft: boolean
   author: string
   createdAt: string
-  interactions: InteractionEntity[]
+  interactions: InteractionEntity[],
+  permissions?: PermissionsType
 }
diff --git a/lib/types/groupTypeDefinition.ts b/lib/types/groupTypeDefinition.ts
index 2b0dc668..b1241750 100644
--- a/lib/types/groupTypeDefinition.ts
+++ b/lib/types/groupTypeDefinition.ts
@@ -1,7 +1,7 @@
 import { FieldType } from './fields'
+import { InteractionTypeDefinition } from '@lib/types/interactionTypeDefinition'
 import { PermissionsType } from './permissions'
 import { PublishingType } from './publishing'
-import { InteractionTypeDefinition } from '@lib/types/interactionTypeDefinition'
 
 type RoleType = {
   label: string
diff --git a/lib/types/purchasing.ts b/lib/types/purchasing.ts
new file mode 100644
index 00000000..4eb6fd35
--- /dev/null
+++ b/lib/types/purchasing.ts
@@ -0,0 +1,16 @@
+
+export type PurchasingVariantType = {
+  name: string,
+  price: number,
+  default: boolean,
+  stock: number,
+}
+
+export type PurchashingOptionsType = {
+  multiple: boolean,
+  stock: number,
+  sku: string,
+  currency: string,
+  price: number,
+  options?: PurchasingVariantType[]
+}
\ No newline at end of file
diff --git a/lib/validations/content/index.js b/lib/validations/content/index.js
deleted file mode 100644
index 22d0595f..00000000
--- a/lib/validations/content/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const standardAllowedFields = ['draft', 'permissions', 'comments']
-
-import { validateField } from '../fields'
-
-export function contentValidations(typeDefinition, content) {
-  return new Promise((resolve, reject) => {
-    let errors = []
-
-    // Check that only includes fields defined in the configuration
-    Object.keys(content).forEach((k) => {
-      const fieldDefinition = typeDefinition.fields.find((f) => f.name === k)
-      const isStandardField = standardAllowedFields.indexOf(k) !== -1
-
-      if (!fieldDefinition && !isStandardField) {
-        errors.push(new Error('Unknown field ' + k))
-      }
-
-      if (!isStandardField && fieldDefinition) {
-        const value = content[k]
-        const name = k
-        const validationErrors = validateField(
-          name,
-          value,
-          fieldDefinition
-        )
-        errors = [...errors, ...validationErrors]
-      }
-    })
-
-    if (errors.length > 0) {
-      reject(new Error(errors.join(', ')))
-    } else {
-      resolve()
-    }
-  })
-}
diff --git a/lib/validations/content/index.ts b/lib/validations/content/index.ts
new file mode 100644
index 00000000..94be8a63
--- /dev/null
+++ b/lib/validations/content/index.ts
@@ -0,0 +1,76 @@
+const standardAllowedFields = ['draft', 'permissions', 'comments', 'purchasingOptions']
+
+import {
+  PurchashingOptionsType,
+} from '@lib/types/purchasing'
+import {
+  validateField,
+} from '../fields'
+
+function validatePurchasingOptions(purchasingOptions: PurchashingOptionsType) {
+  const errors = []
+
+  if (!purchasingOptions.currency) {
+    errors.push('Missing currency')
+  }
+
+  if (!purchasingOptions.price) {
+    errors.push('Price can not be empty')
+  }
+
+  return errors
+}
+
+export function contentValidations(typeDefinition, content) {
+  return new Promise((resolve, reject) => {
+    let errors = []
+
+    // Check that only includes fields defined in the configuration
+    Object.keys(content).forEach((k) => {
+      const fieldDefinition = typeDefinition.fields.find((f) => f.name === k)
+      const isStandardField = standardAllowedFields.indexOf(k) !== -1
+
+      if (!fieldDefinition && !isStandardField) {
+        errors.push(new Error('Unknown field ' + k))
+      }
+
+      const value = content[k]
+
+      if (!isStandardField && fieldDefinition) {
+        const name = k
+        const validationErrors = validateField(
+          name,
+          value,
+          fieldDefinition
+        )
+        errors = [...errors, ...validationErrors]
+      } else if (isStandardField) {
+        // Validate standard fields
+        switch (k) {
+          case 'draft':
+            if (typeof (value) !== 'boolean') {
+              errors.push('Invalid draft value')
+            }
+            break;
+          case 'permissions':
+            if (typeof (value) !== 'object') {
+              errors.push('Invalid permissions value')
+            }
+            break;
+          case 'purchasingOptions':
+            const purchasingOptionsErrors = validatePurchasingOptions(value)
+            errors = [...purchasingOptionsErrors, ...errors]
+            break;
+          default:
+            break;
+        }
+      }
+    })
+
+    if (errors.length > 0) {
+      reject(new Error(errors.join(', ')))
+    } else {
+      resolve()
+    }
+  })
+}
\ No newline at end of file
diff --git a/pages/api/content/[type].ts b/pages/api/content/[type].ts
index a9dfa7cd..ae6845f5 100644
--- a/pages/api/content/[type].ts
+++ b/pages/api/content/[type].ts
@@ -1,3 +1,4 @@
+import { ANY_OBJECT, Request } from '@lib/types'
 import {
   addContent,
   findContent,
@@ -9,16 +10,17 @@ import {
   isValidContentType,
   loadUser,
 } from '@lib/api/middlewares'
+
 import Cypher from '@lib/api/api-helpers/cypher-fields'
-import { ANY_OBJECT, Request } from '@lib/types'
+import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 import { connect } from '@lib/api/db'
 import { contentValidations } from '@lib/validations/content'
 import { fillContentWithDefaultData } from '@lib/api/entities/content/content.utils'
 import logger from '@lib/logger'
 import methods from '@lib/api/api-helpers/methods'
 import { onContentAdded } from '@lib/api/hooks/content.hooks'
+import { purchasingPermission } from '@lib/permissions'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
-import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 
 const getContent = (filterParams, paginationParams) => async (
   req: Request,
@@ -78,8 +80,14 @@ const getContent = (filterParams, paginationParams) => async (
 const createContent = async (req: Request, res) => {
   const type = req.contentType
 
-  const content = {
-    ...req.body,
+  const { purchasingOptions, ...rest} = req.body
+  
+  // Only store purchasing options if the current user has permissions
+  const content = purchasingPermission(req.currentUser, type.slug, 'sell') ? {
+    ...rest,
+    purchasingOptions
+  } : {
+    ...rest
   }
 
   return contentValidations(type, content)
diff --git a/test/integration/api/content/write/content.purchasing.create.test.js b/test/integration/api/content/write/content.purchasing.create.test.js
new file mode 100644
index 00000000..18b65cd5
--- /dev/null
+++ b/test/integration/api/content/write/content.purchasing.create.test.js
@@ -0,0 +1,271 @@
+import {
+  addContent,
+  findOneContent,
+} from '../../../../../lib/api/entities/content'
+import {
+  deleteFile,
+  uploadFile,
+} from '../../../../../lib/api/storage'
+
+import getPermissions from '../../../../../lib/permissions/get-permissions'
+import {
+  getSession,
+} from '../../../../../lib/api/auth/iron'
+import handler from '../../../../../pages/api/content/[type]'
+import request from '../../requestHandler'
+import {
+  string,
+} from 'yup'
+
+jest.mock('../../../../../lib/api/storage')
+jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/permissions/get-permissions')
+jest.mock('../../../../../lib/api/entities/content')
+
+jest.mock('../../../../../edge.config', () => {
+  const mockInitialPosts = []
+
+  const mockPostContentType = {
+    title: 'product',
+
+    slug: 'product',
+
+    slugGeneration: ['title', 'createdAt'],
+
+    permissions: {
+      read: ['PUBLIC'],
+      create: ['ADMIN', 'USER'],
+      update: ['ADMIN'],
+      delete: ['ADMIN'],
+      admin: ['ADMIN'],
+    },
+
+    publishing: {
+      draftMode: true,
+    },
+
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: ['USER'],
+        sell: ['SHOP', 'ADMIN'],
+        ship: ['ADMIN'],
+        admin: ['ADMIN']
+      }
+    },
+
+
+    comments: {
+      enabled: true,
+      permissions: {
+        read: ['PUBLIC'],
+        create: ['USER', 'ADMIN'],
+        update: ['ADMIN'],
+        delete: ['ADMIN'],
+        admin: ['ADMIN'],
+      },
+    },
+
+    fields: [{
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+        minlength: 8,
+        placeholder: 'Title',
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        label: 'Description',
+        minlength: 8,
+        placeholder: 'Description',
+      },
+      {
+        name: 'image',
+        type: 'img',
+        label: 'Image',
+        placeholder: 'Image',
+      },
+      {
+        name: 'file',
+        type: 'file',
+        label: 'File',
+        placeholder: 'File',
+      },
+      {
+        name: 'tags',
+        type: 'tags',
+        label: 'Tags',
+        placeholder: 'Tags',
+      },
+    ],
+  }
+
+  return {
+    __esModule: true,
+    getConfig: jest.fn().mockReturnValue({
+      title: 'A test',
+      description: 'A test',
+      // Content configuration
+      content: {
+        // Different content types defined
+        types: [mockPostContentType],
+        initialContent: mockInitialPosts,
+      },
+
+      user: {
+        roles: [{
+          label: 'user',
+          value: 'USER'
+        }],
+        newUserRoles: ['USER']
+      }
+    }),
+  }
+})
+
+describe('Allow to create content that is purchasable', () => {
+  beforeEach(() => {
+    addContent.mockReturnValue(Promise.resolve({
+      id: 'abc'
+    }))
+    getPermissions.mockReturnValue({
+      'content.product.create': ['USER', 'SHOP'],
+      'content.product.admin': ['ADMIN'],
+      'content.product.purchasing.sell': ['ADMIN', 'SHOP']
+    })
+  })
+
+  afterEach(() => {
+    getPermissions.mockReset()
+    getSession.mockReset()
+    addContent.mockReset()
+  })
+
+  test('Should return allow to save the content if the user can create content, but not store purchasing options if the user can not sell', async () => {
+
+
+    getSession.mockReturnValueOnce({
+      roles: ['USER'],
+      id: 'test-id',
+    })
+
+    const newProduct = {
+      title: 'testatadas dsaasd',
+      description: 'test test  test test test test test test test test test test test test test test ',
+      purchasingOptions: {
+        price: 1,
+        stock: 1
+      }
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        type: 'product'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newProduct
+    });
+
+
+    expect(res.statusCode).toBe(200)
+
+    const calls = addContent.mock.calls
+    expect(calls[0][0]).toEqual('product')
+    expect(calls[0][1]).not.toHaveProperty('purchasingOptions')
+    expect(calls[0][1]).toHaveProperty('title')
+
+  })
+
+  test('Check purchasing options format if the role can sell', async () => {
+
+
+    getSession.mockReturnValueOnce({
+      roles: ['SHOP'],
+      id: 'test-id',
+    })
+
+    const newProduct = {
+      title: 'testatadas dsaasd',
+      description: 'test test  test test test test test test test test test test test test test test ',
+      purchasingOptions: {
+        price: 1,
+        stock: 1
+      }
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        type: 'product'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newProduct
+    });
+
+
+    expect(res.statusCode).toBe(400)
+    expect(res.body).toMatchObject({
+      error: 'Invalid data: Missing currency',
+    })
+
+    expect(addContent).not.toHaveBeenCalled()
+
+  })
+
+  test('Store purchasing options if the role can sell', async () => {
+
+
+    getSession.mockReturnValueOnce({
+      roles: ['SHOP'],
+      id: 'test-id',
+    })
+
+    const newProduct = {
+      title: 'testatadas dsaasd',
+      description: 'test test  test test test test test test test test test test test test test test ',
+      purchasingOptions: {
+        price: 1,
+        stock: 1,
+        currency: 'euro'
+      }
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        type: 'product'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newProduct
+    });
+
+
+    expect(res.statusCode).toBe(200)
+
+
+    const calls = addContent.mock.calls
+    expect(calls[0][0]).toEqual('product')
+    expect(calls[0][1]).toHaveProperty('purchasingOptions')
+    expect(calls[0][1].purchasingOptions).toEqual(newProduct.purchasingOptions)
+
+    expect(calls[0][1]).toHaveProperty('title')
+
+  })
+
+
+
+  // Should allow a normal user to store the data but without the shopping info
+
+  // Should allow a SHOP to set purchasing options
+  // Expect add content to be called with the purchasing options
+  // Should allow an ADMIN to set purchasing options
+  // Should return error if purchasing options format is wrong
+})
\ No newline at end of file
diff --git a/test/integration/api/users/write/users.register.test.js b/test/integration/api/users/write/users.register.test.js
index 7f75a838..3759a424 100644
--- a/test/integration/api/users/write/users.register.test.js
+++ b/test/integration/api/users/write/users.register.test.js
@@ -270,7 +270,7 @@ describe('Integrations tests for users creation endpoint', () => {
         },
         body: newUser
       });
-      console.log('COMPLETED', res)
+      // console.log('COMPLETED', res)
       expect(res.statusCode).toBe(200)
 
       expect(res.body).toMatchObject({

From 7dda51839a252dfb78630819bf128a605ec6a697 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Fri, 15 Jan 2021 09:31:34 +0100
Subject: [PATCH 03/26] define order type

---
 edge.config.js => edge.config.ts              |  2 +-
 lib/api/entities/orders/index.ts              | 69 +++++++++++++++++++
 .../{config.schema.js => config.schema.ts}    |  0
 lib/config/{load-config.js => load-config.ts} |  0
 lib/constants/orders.ts                       |  9 +++
 lib/{fetcher.js => fetcher.ts}                |  4 +-
 lib/types/entities/orders.ts                  | 20 ++++++
 lib/types/index.ts                            |  1 +
 pages/api/orders/index.ts                     | 17 +++++
 9 files changed, 119 insertions(+), 3 deletions(-)
 rename edge.config.js => edge.config.ts (99%)
 create mode 100644 lib/api/entities/orders/index.ts
 rename lib/config/{config.schema.js => config.schema.ts} (100%)
 rename lib/config/{load-config.js => load-config.ts} (100%)
 create mode 100644 lib/constants/orders.ts
 rename lib/{fetcher.js => fetcher.ts} (80%)
 create mode 100644 lib/types/entities/orders.ts
 create mode 100644 pages/api/orders/index.ts

diff --git a/edge.config.js b/edge.config.ts
similarity index 99%
rename from edge.config.js
rename to edge.config.ts
index 819d7e02..da68dd39 100644
--- a/edge.config.js
+++ b/edge.config.ts
@@ -7,7 +7,7 @@ function ObjectID(rnd = (r16) => Math.floor(r16).toString(16)) {
   )
 }
 
-export const getConfig = () => {
+export const getConfig = (config: any) => {
   const userRole = 'USER'
   const adminRole = 'ADMIN'
   const publicRole = 'PUBLIC'
diff --git a/lib/api/entities/orders/index.ts b/lib/api/entities/orders/index.ts
new file mode 100644
index 00000000..9c00cad7
--- /dev/null
+++ b/lib/api/entities/orders/index.ts
@@ -0,0 +1,69 @@
+import { ANY_OBJECT, OrderType } from '@lib/types'
+
+import { getDB } from '@lib/api/db'
+
+type OrdersResponseType = {
+  total: number,
+  from: number,
+  limit: number,
+  results: OrderType[]
+}
+
+export function findOneOrder(options) {
+  return getDB()
+    .collection('orders')
+    .findOne(options)
+}
+
+export function addOrder(data: OrderType) {
+  return getDB()
+    .collection('orders')
+    .add(data)
+}
+
+export function updateOneOrder(id, data:OrderType) {
+  return getDB()
+    .collection('orders')
+    .doc(id)
+    .set(data)
+}
+
+export async function findorders(
+  options = {},
+  paginationOptions: ANY_OBJECT = {}
+): Promise<OrdersResponseType> {
+  const { from = 0, limit = 15, sortBy, sortOrder = 'DESC' } = paginationOptions
+
+  const total = await getDB()
+    .collection('orders')
+    .count(options)
+
+  return getDB()
+    .collection('orders')
+    .limit(limit)
+    .start(from)
+    .find(options, {
+      sortBy,
+      sortOrder,
+    })
+    .then(async (data) => {
+      return {
+        results: data,
+        from,
+        limit,
+        total,
+      }
+    })
+}
+
+export function deleteorders(options) {
+  return getDB()
+    .collection('orders')
+    .remove(options)
+}
+
+export function deleteOneOrder(options) {
+  return getDB()
+    .collection('orders')
+    .remove(options, true)
+}
diff --git a/lib/config/config.schema.js b/lib/config/config.schema.ts
similarity index 100%
rename from lib/config/config.schema.js
rename to lib/config/config.schema.ts
diff --git a/lib/config/load-config.js b/lib/config/load-config.ts
similarity index 100%
rename from lib/config/load-config.js
rename to lib/config/load-config.ts
diff --git a/lib/constants/orders.ts b/lib/constants/orders.ts
new file mode 100644
index 00000000..57952c9c
--- /dev/null
+++ b/lib/constants/orders.ts
@@ -0,0 +1,9 @@
+export const ORDER_STATUS = {
+  CREATED: 'created',
+  STARTED: 'started',
+  PAUSED: 'paused',
+  SHIPPED: 'shipped',
+  RECEIVED: 'received',
+  FINISHED: 'finished',
+  CANCELLED: 'cancelled'
+}
\ No newline at end of file
diff --git a/lib/fetcher.js b/lib/fetcher.ts
similarity index 80%
rename from lib/fetcher.js
rename to lib/fetcher.ts
index b25a8bf5..adb08a66 100644
--- a/lib/fetcher.js
+++ b/lib/fetcher.ts
@@ -4,8 +4,8 @@ function checkStatus(response) {
   if (response.ok) {
     return response
   } else {
-    var error = new Error(response.statusText)
-    error.response = response
+    // var error = new Error(response.statusText)
+    // error.response = response
     return Promise.reject(response)
   }
 }
diff --git a/lib/types/entities/orders.ts b/lib/types/entities/orders.ts
new file mode 100644
index 00000000..44cddf7e
--- /dev/null
+++ b/lib/types/entities/orders.ts
@@ -0,0 +1,20 @@
+import { TDate } from "timeago.js"
+
+export type OrderProductType = {
+  productId: string,
+  amount: number,
+  price: number,
+  variant?: string,
+}
+
+export type OrderType = {
+  id?: string,
+  buyerId: string,
+  sellerId: string,
+  status: string,
+  updatedAt?: TDate,
+  createdAt?: TDate,
+  paymentId?: string,
+  paymentStatus?: string,
+  products: OrderProductType[]
+}
\ No newline at end of file
diff --git a/lib/types/index.ts b/lib/types/index.ts
index e5a907b0..628bbebf 100644
--- a/lib/types/index.ts
+++ b/lib/types/index.ts
@@ -14,6 +14,7 @@ export * from './entities/interaction'
 export * from './userTypeDefinition'
 export * from './entities/email'
 export * from './statistic'
+export * from './entities/orders'
 
 export type ANY_OBJECT = {
   [key: string]: any
diff --git a/pages/api/orders/index.ts b/pages/api/orders/index.ts
new file mode 100644
index 00000000..df494db8
--- /dev/null
+++ b/pages/api/orders/index.ts
@@ -0,0 +1,17 @@
+// Register order create
+  // Fetch the original product,
+    // If it does not exist or is not buyable, return 400
+   // check if the current user can buy
+      // If it does not have permissions, cancel and 401
+  // For each product: see if the stock is greater than 0
+    // Return 400 if some product stock is 0 (?)
+
+  // Create the order , mark it as created
+    // Set the sellerID as the owner of the product
+  // Return OK
+
+// Fetch orders
+  // Get all the orders with the sellerID 
+
+// Update order
+  // Check sellerId and userId or admin permissions
\ No newline at end of file

From c75f7125ef550d9883ab4201778e8fdc2e6ba4d8 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Fri, 15 Jan 2021 09:48:23 +0100
Subject: [PATCH 04/26] update documentation

---
 DOCUMENTATION.md                              | 35 ++++++++++++++++++-
 README.md                                     |  2 ++
 lib/config/config.schema.ts                   |  4 +--
 lib/config/load-config.ts                     |  5 ++-
 lib/types/contentTypeDefinition.ts            |  2 +-
 .../write/content.purchasing.create.test.js   |  2 +-
 6 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index 838843ed..d7f4dc54 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -26,6 +26,7 @@
     - [Providers](#providers)
   - [Emails](#emails)
   - [Static Pages](#static-pages)
+  - [Ecommerce](#ecommerce)
   - [Web monetization](#web-monetization)
   - [Other Payments](#other-payments)
   - [Super search](#super-search)
@@ -74,7 +75,8 @@
   - Provided by [next-pwa](https://github.com/shadowwalker/next-pwa)
 - Easy to deploy
   - Deploy on platforms like Vercel in minutes
-- ~Multilingual support~
+- Multilingual support*
+  - Based on nextjs i18n 
 
 ## How to start using Edge.
 
@@ -229,6 +231,23 @@ const contentType = {
     },
   },
 
+  purchasing: {
+    // Enable or disable purchasing this content
+    enabled: true,
+    permissions: {
+      // Who will see the "purchase" form and will be able to purchase the item 
+      buy: ['USER'],
+
+      // Who will be able to see the "purchasing options" form on the content edition/creation
+      sell: ['SHOP', 'ADMIN'],
+
+      // Who will be able to update any orders (users with "sell" role are always allowed to update their own orders)
+      orders: ['WAREHOUSE'],
+
+      // Who will be able to administer any order and purchasing option
+      admin: ['ADMIN']
+    }
+  },
 
   // A list of fields, see below for more information
   fields: [{
@@ -732,6 +751,10 @@ Edge uses [Passport.js](http://www.passportjs.org) cookie based authentication w
 
 The login cookie is httpOnly, meaning it can only be accessed by the API, and it's encrypted using [@hapi/iron](https://hapi.dev/family/iron) for more security.
 
+Apart from the cookie authentication there are two more ways to authenticate:
+- JWT token on the Authenthication header*
+- API Key
+
 ### Providers
 
 In the configuration different providers can be enabled or disabled
@@ -812,6 +835,16 @@ description: 'Example page description'
 Hello, this is a static page, automatically rendered.
 ```
 
+## Ecommerce
+
+Edge can be used as a ecommerce. It offers the ability to mark content types as purchasable. When doing that:
+- A purchasing options form will appear on the content creation/edition
+- Users with the role "buy" will be able to add items to the shopping cart and complete a purchase
+- An "orders" API will be enabled
+  - When creating an order, an email will be triggered for both the buyer and the seller
+  - When an order is marked as "shipped" an email will be sent to the buyer
+  - The buyer will be able to see their ongoing orders on their dashboard
+
 ## Web monetization
 
 Web monetization is integrated into Edge and is easily enabled via configuration.
diff --git a/README.md b/README.md
index 6e15f270..0e8b38a6 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,8 @@ The main features of Edge are:
 - Comments on content types.
 - Interactions on entities (like, follow, report, etc).
 - Users APIs (login, register, update)
+- Purchasing options and order management
+  - You can use Edge as a order API for your own storefront, or use Edge as a full store yourself
 - Emails (email verification, contact emails)
 - Dynamic admin dashboard for all the content, groups and users.
 - Block access to users to the site
diff --git a/lib/config/config.schema.ts b/lib/config/config.schema.ts
index 31c60d01..e5fdc774 100644
--- a/lib/config/config.schema.ts
+++ b/lib/config/config.schema.ts
@@ -97,13 +97,13 @@ const ContentTypeSchema = object({
     permissions: object({
       buy: array(string()),
       sell: array(string()),
-      ship: array(string()),
+      orders: array(string()),
       admin: array(string()),
     })
       .default({
         buy: [],
         sell: [],
-        ship: [],
+        orders: [],
         admin: [],
       }),
   }),
diff --git a/lib/config/load-config.ts b/lib/config/load-config.ts
index 7ab4c3b3..469ccba4 100644
--- a/lib/config/load-config.ts
+++ b/lib/config/load-config.ts
@@ -1,5 +1,4 @@
 import { DATABASES } from '@lib/constants'
-
 import { getConfig } from '../../edge.config'
 import merge from 'deepmerge'
 import schema from './config.schema'
@@ -178,8 +177,8 @@ export default function load() {
           type.purchasing.permissions.buy
         availablePermissions[`content.${type.slug}.purchasing.sell`] =
           type.purchasing.permissions.sell
-        availablePermissions[`content.${type.slug}.purchasing.ship`] =
-          type.purchasing.permissions.ship
+        availablePermissions[`content.${type.slug}.purchasing.orders`] =
+          type.purchasing.permissions.orders
         availablePermissions[`content.${type.slug}.purchasing.admin`] =
           type.purchasing.permissions.admin
       }
diff --git a/lib/types/contentTypeDefinition.ts b/lib/types/contentTypeDefinition.ts
index 59831077..847cc106 100644
--- a/lib/types/contentTypeDefinition.ts
+++ b/lib/types/contentTypeDefinition.ts
@@ -12,7 +12,7 @@ type PurchasingPermissionsType = {
   buy: [string],
   sell: [string],
   admin: [string],
-  ship: [string]
+  orders: [string]
 }
 
 export declare type PurchasingType = {
diff --git a/test/integration/api/content/write/content.purchasing.create.test.js b/test/integration/api/content/write/content.purchasing.create.test.js
index 18b65cd5..bca471fa 100644
--- a/test/integration/api/content/write/content.purchasing.create.test.js
+++ b/test/integration/api/content/write/content.purchasing.create.test.js
@@ -49,7 +49,7 @@ jest.mock('../../../../../edge.config', () => {
       permissions: {
         buy: ['USER'],
         sell: ['SHOP', 'ADMIN'],
-        ship: ['ADMIN'],
+        orders: ['ADMIN'],
         admin: ['ADMIN']
       }
     },

From 89b359f7576268d00913c5a65100ac21f8dafe00 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sun, 17 Jan 2021 15:19:58 +0100
Subject: [PATCH 05/26] start creating order types

---
 lib/api/entities/orders/index.ts |   4 +-
 lib/api/hooks/order.hooks.ts     |  20 +++++
 lib/constants/activity.ts        |   2 +
 lib/types/entities/orders.ts     |   1 +
 lib/validations/order/index.ts   |   5 ++
 pages/api/orders/index.ts        | 127 ++++++++++++++++++++++++++++---
 6 files changed, 146 insertions(+), 13 deletions(-)
 create mode 100644 lib/api/hooks/order.hooks.ts
 create mode 100644 lib/validations/order/index.ts

diff --git a/lib/api/entities/orders/index.ts b/lib/api/entities/orders/index.ts
index 9c00cad7..990047eb 100644
--- a/lib/api/entities/orders/index.ts
+++ b/lib/api/entities/orders/index.ts
@@ -28,7 +28,7 @@ export function updateOneOrder(id, data:OrderType) {
     .set(data)
 }
 
-export async function findorders(
+export async function findOrders(
   options = {},
   paginationOptions: ANY_OBJECT = {}
 ): Promise<OrdersResponseType> {
@@ -56,7 +56,7 @@ export async function findorders(
     })
 }
 
-export function deleteorders(options) {
+export function deleteOrders(options) {
   return getDB()
     .collection('orders')
     .remove(options)
diff --git a/lib/api/hooks/order.hooks.ts b/lib/api/hooks/order.hooks.ts
new file mode 100644
index 00000000..098c6652
--- /dev/null
+++ b/lib/api/hooks/order.hooks.ts
@@ -0,0 +1,20 @@
+import { ACTIVITY_TYPES } from '@lib/constants'
+import { OrderType } from '@lib/types/entities/orders'
+import { UserType } from '@lib/types/entities/user'
+import {
+  addActivity,
+} from '@lib/api/entities/activity'
+import config from '@lib/config'
+
+export  async function onOrderCreated(order: OrderType, user : UserType) {
+  if (config.activity.enabled && user) {
+    await addActivity({
+      author: user.id,
+      role: 'user',
+      type: ACTIVITY_TYPES.ORDER_CREATED,
+      meta: {
+        orderId: order.id
+      },
+    })
+  }
+}
diff --git a/lib/constants/activity.ts b/lib/constants/activity.ts
index 1b46fe49..b94639b5 100644
--- a/lib/constants/activity.ts
+++ b/lib/constants/activity.ts
@@ -17,4 +17,6 @@ export enum ACTIVITY_TYPES {
   GROUP_DELETED = 'group_deleted',
   EMAIL_SENT = 'email_sent',
   EMAIL_VERIFIED = 'email_verified',
+  ORDER_CREATED = 'order_created',
+  ORDER_STATUS_CHANGED = 'order_status_changed',
 }
diff --git a/lib/types/entities/orders.ts b/lib/types/entities/orders.ts
index 44cddf7e..c5a096d9 100644
--- a/lib/types/entities/orders.ts
+++ b/lib/types/entities/orders.ts
@@ -2,6 +2,7 @@ import { TDate } from "timeago.js"
 
 export type OrderProductType = {
   productId: string,
+  productContentType: string,
   amount: number,
   price: number,
   variant?: string,
diff --git a/lib/validations/order/index.ts b/lib/validations/order/index.ts
new file mode 100644
index 00000000..443a0d09
--- /dev/null
+++ b/lib/validations/order/index.ts
@@ -0,0 +1,5 @@
+import { OrderType } from "@lib/types";
+
+export default function validateOrder(order: OrderType): boolean {
+  return order.buyerId && order.sellerId  && order.products.length > 0 
+}
\ No newline at end of file
diff --git a/pages/api/orders/index.ts b/pages/api/orders/index.ts
index df494db8..b38d8245 100644
--- a/pages/api/orders/index.ts
+++ b/pages/api/orders/index.ts
@@ -1,17 +1,122 @@
 // Register order create
-  // Fetch the original product,
-    // If it does not exist or is not buyable, return 400
-   // check if the current user can buy
-      // If it does not have permissions, cancel and 401
-  // For each product: see if the stock is greater than 0
-    // Return 400 if some product stock is 0 (?)
+// Fetch the original product,
+// If it does not exist or is not buyable, return 400
+// check if the current user can buy
+// If it does not have permissions, cancel and 401
+// For each product: see if the stock is greater than 0
+// Return 400 if some product stock is 0 (?)
 
-  // Create the order , mark it as created
-    // Set the sellerID as the owner of the product
-  // Return OK
+// Create the order , mark it as created
+// Set the sellerID as the owner of the product
+// Return OK
 
 // Fetch orders
-  // Get all the orders with the sellerID 
+// Get all the orders with the sellerID 
 
 // Update order
-  // Check sellerId and userId or admin permissions
\ No newline at end of file
+// Check sellerId and userId or admin permissions
+
+import {
+  addOrder,
+  findOrders,
+} from '@lib/api/entities/orders'
+
+import { OrderType } from '@lib/types/entities/orders'
+import { Request } from '@lib/types'
+import { connect } from '@lib/api/db'
+import { loadUser } from '@lib/api/middlewares'
+import logger from '@lib/logger'
+import methods from '@lib/api/api-helpers/methods'
+import {
+  onOrderCreated,
+} from '@lib/api/hooks/order.hooks'
+import { purchasingPermission } from '@lib/permissions'
+import runMiddleware from '@lib/api/api-helpers/run-middleware'
+import validateOrder from '@lib/validations/order'
+
+async function createOrder(req: Request, res) {
+
+  const orderObject: OrderType = {
+    ...req.body,
+  }
+
+  if (!validateOrder(orderObject)) {
+    return res.status(400).json({
+      error: 'Malformed order entity'
+    })
+  }
+
+  try {
+    const result = await addOrder(orderObject)
+    await onOrderCreated(result, req.currentUser)
+
+    return res.status(200).json(result)
+  } catch (err) {
+    res.status(500).json({
+      error: 'Error sending message ' + err.message
+    })
+  }
+
+
+}
+
+const getOrders = (filterParams, paginationParams) => (req: Request, res) => {
+  return findOrders(filterParams, paginationParams)
+    .then(result => {
+      return res.status(200).json(result)
+    })
+}
+
+
+export default async (req: Request, res) => {
+  const {
+    query: { search, sortBy, sortOrder, from, limit },
+  } = req
+
+  const filterParams = {}
+
+  if (search) {
+    filterParams['$or'] = [
+      { to: { $regex: search } },
+      { from: { $regex: search } },
+      { text: { $regex: search } }
+    ]
+  }
+
+  const paginationParams = {
+    sortBy,
+    sortOrder,
+    from,
+    limit,
+  }
+
+  try {
+    // Connect to database
+    await connect()
+  } catch (e) {
+    logger('ERROR', 'Can not connect to db', e)
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+  try {
+    await runMiddleware(req, res, loadUser)
+  } catch (e) {
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+  // TODO: We need to check the permissions of all the products in the order object
+  if (!purchasingPermission(req.currentUser, type, 'buy')) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
+  await methods(req, res, {
+    get: getOrders(filterParams, paginationParams),
+    post: createOrder,
+  })
+}

From c82a320c255c5e0f6a1a199e7262cde0cb093980 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sun, 17 Jan 2021 19:39:03 +0100
Subject: [PATCH 06/26] reworking UI for diferent roles, adding header and
 orders

---
 .../content-form/content-form.tsx             |   2 +-
 components/layout/header/admin-sub-header.tsx | 104 ++++++++++++++++--
 components/layout/header/header.tsx           |   3 +-
 edge.config.ts                                |  31 ++++--
 ...-content-types.js => use-content-types.ts} |   0
 lib/config/config.schema.ts                   |  17 ++-
 lib/config/load-config.ts                     |  13 +++
 lib/permissions/index.ts                      |  12 +-
 package.json                                  |   1 +
 pages/_app.tsx                                |   1 +
 pages/api/content/[type].ts                   |   2 +-
 pages/api/orders/index.ts                     |  68 ++++++++----
 yarn.lock                                     |   5 +
 13 files changed, 208 insertions(+), 51 deletions(-)
 rename lib/client/hooks/{use-content-types.js => use-content-types.ts} (100%)

diff --git a/components/content/write-content/content-form/content-form.tsx b/components/content/write-content/content-form/content-form.tsx
index 3db86d9c..3b6adf20 100644
--- a/components/content/write-content/content-form/content-form.tsx
+++ b/components/content/write-content/content-form/content-form.tsx
@@ -191,7 +191,7 @@ function ContentForm(props) {
               />
             ))}
 
-          {purchasingPermission(props.currentUser, props.type.slug, 'sell')  && <div className="purchasing-options-wrapper">
+          {purchasingPermission(props.currentUser, 'sell', props.type.slug)  && <div className="purchasing-options-wrapper">
               <PurchasingOptionsForm value={state['purchasingOptions']} onChange={(val) => setState({
                 ...state,
                 purchasingOptions: val
diff --git a/components/layout/header/admin-sub-header.tsx b/components/layout/header/admin-sub-header.tsx
index ad3d32a9..4bad1493 100644
--- a/components/layout/header/admin-sub-header.tsx
+++ b/components/layout/header/admin-sub-header.tsx
@@ -11,14 +11,13 @@ type PropTypes = {
 
 export default function AdminSubHeader({ user }: PropTypes) {
   // Links
-  const contentTypes = useContentTypes(['admin'])
   const groupTypes = useGroupTypes(['admin'])
-
   const groupLinks = groupTypes.map(({ slug, title }) => ({
     link: `/admin/groups/${slug}`,
     title: `${title}`,
   }))
 
+  const contentTypes = useContentTypes(['admin'])
   const contentLinks = contentTypes.map((type) => {
     return {
       link: `/admin/content/${type.slug}`,
@@ -26,6 +25,21 @@ export default function AdminSubHeader({ user }: PropTypes) {
     }
   })
 
+  const createContentTypes = useContentTypes(['create'])
+  const createContentTypeLinks = createContentTypes.map((type) => {
+    return {
+      link: `/create/content/${type.slug}`,
+      title: `${type.title}`,
+    }
+  })
+  const createGroupTypes = useGroupTypes(['create'])
+  const createGroupTypeLinks = createGroupTypes.map((type) => {
+    return {
+      link: `/create/group/${type.slug}`,
+      title: `${type.title}`,
+    }
+  })
+
   return (
     <>
       <div className="admin-sub-header">
@@ -97,7 +111,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
               </Link>
             </li>}
 
-            <li className="view-more">
+            {hasPermission(user, 'admin.access') && <li className="view-more">
               <a title="Content">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                   <defs />
@@ -134,7 +148,8 @@ export default function AdminSubHeader({ user }: PropTypes) {
                 })}
               </ul>
             </li>
-            <li className="view-more">
+            }
+            {hasPermission(user, 'admin.access') && <li className="view-more">
               <a title="Groups">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                   <defs />
@@ -170,8 +185,75 @@ export default function AdminSubHeader({ user }: PropTypes) {
                   )
                 })}
               </ul>
-            </li>
+            </li>}
 
+            {(hasPermission(user, 'purchasing.orders') || hasPermission(user, 'purchasing.sell')) && <li>
+              <Link href="/orders">
+                <a title="Orders">
+                <i className="las la-cubes"></i>
+                  <span>Orders</span>
+                </a>
+              </Link>
+            </li>}
+            <li className="view-more">
+              <a title="Create">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <defs />
+                  <path fill="none" d="M0 0h24v24H0z" />
+                  <path
+                    className="icon"
+                    d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+                  />
+                </svg>
+                <span>Create</span>
+              </a>
+              <ul>
+                {createContentTypeLinks.map(link => {
+                  return (
+                    <li key={link.link}>
+                      <Link href={link.link}>
+                        <a title={`Create a ${link.title}`}>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                          >
+                            <defs />
+                            <path fill="none" d="M0 0h24v24H0z" />
+                            <path
+                              className="icon"
+                              d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
+                            />
+                          </svg>
+                          <span>{link.title}</span>
+                        </a>
+                      </Link>
+                    </li>
+                  )
+                })}
+                {createGroupTypeLinks.map(link => {
+                  return (
+                    <li key={link.link}>
+                      <Link href={link.link}>
+                        <a title={`Administer ${link.title}`}>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                          >
+                            <defs />
+                            <path fill="none" d="M0 0h24v24H0z" />
+                            <path
+                              className="icon"
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM9.5 8c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8zm6.5 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
+                            />
+                          </svg>
+                          <span>{link.title}</span>
+                        </a>
+                      </Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            </li>
 
           </ul>
         </div>
@@ -208,6 +290,12 @@ export default function AdminSubHeader({ user }: PropTypes) {
         .admin-navigation li:hover .icon {
           fill: var(--accents-2);
         }
+
+        .i {
+          font-size: 20px;
+          padding-right: 5px;
+          color: var(--accents-4);
+        }
         svg {
           margin-right: 4px;
           width: 20px;
@@ -217,7 +305,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
           transition: 0.35s ease;
         }
         .view-more{
-          padding-right: 32px;
+
           position: relative;
           user-select: none;
         }
@@ -249,10 +337,6 @@ export default function AdminSubHeader({ user }: PropTypes) {
             max-width: 100px;
           }
 
-          .view-more {
-            padding-right: 80px;
-          }
-
           svg{
             box-sizing: content-box;
             margin: 0;
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index 6bfb3627..64132bf1 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -12,7 +12,7 @@ import {
 
 function Header() {
   const { user } = useUser()
-  const showAdminNav = hasPermission(user, `admin.access`)
+  const showAdminNav = hasPermission(user, `admin.access`) || hasPermission(user, 'purchasing.sell') || hasPermission(user, 'purchasing.orders')
 
 
   const [active, setActive] = useState(false)
@@ -35,6 +35,7 @@ function Header() {
           </div>
         </aside>
         {showAdminNav && <AdminHeader user={user} />}
+        
         <div className="edge-header-content">
 
           <div className="edge-container">
diff --git a/edge.config.ts b/edge.config.ts
index da68dd39..002056a5 100644
--- a/edge.config.ts
+++ b/edge.config.ts
@@ -249,6 +249,16 @@ export const getConfig = (config: any) => {
       web: false,
     },
 
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: [userRole],
+        sell: [shopRole, adminRole],
+        ship: [adminRole],
+        admin: [adminRole]
+      }
+    },
+
     comments: {
       enabled: true,
       permissions: {
@@ -260,16 +270,6 @@ export const getConfig = (config: any) => {
       },
     },
 
-    purchasing: {
-      enabled: true,
-      permissions: {
-        buy: [userRole],
-        sell: [shopRole, adminRole],
-        ship: [adminRole],
-        admin: [adminRole]
-      }
-    },
-
     entityInteractions: [
       
       {
@@ -829,6 +829,17 @@ export const getConfig = (config: any) => {
       enabled: false,
     },
 
+    // Purchasing
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: [userRole],
+        sell: [shopRole, adminRole],
+        ship: [adminRole],
+        admin: [adminRole]
+      },
+    },
+
     // super search configuration
     superSearch: {
       enabled: true,
diff --git a/lib/client/hooks/use-content-types.js b/lib/client/hooks/use-content-types.ts
similarity index 100%
rename from lib/client/hooks/use-content-types.js
rename to lib/client/hooks/use-content-types.ts
diff --git a/lib/config/config.schema.ts b/lib/config/config.schema.ts
index e5fdc774..c9e2ab03 100644
--- a/lib/config/config.schema.ts
+++ b/lib/config/config.schema.ts
@@ -163,7 +163,7 @@ export default object({
   storage: object().required('Missing storage configuration'),
   database: object({
     type: string().matches(
-      `(${DATABASES.FIREBASE}|${DATABASES.IN_MEMORY}|${DATABASES.MONGO})`,
+      `(${DATABASES.IN_MEMORY}|${DATABASES.MONGO})`,
       'Invalid database type'
     ),
   }),
@@ -221,6 +221,21 @@ export default object({
     types: array(GroupTypeSchema),
     initialGroups: array(),
   }),
+  purchasing: object({
+    enabled: boolean().default(false),
+    permissions: object({
+      buy: array(string()),
+      sell: array(string()),
+      orders: array(string()),
+      admin: array(string()),
+    })
+      .default({
+        buy: [],
+        sell: [],
+        orders: [],
+        admin: [],
+      }),
+  }),
   superSearch: object({
     enabled: boolean(),
     permissions: object(),
diff --git a/lib/config/load-config.ts b/lib/config/load-config.ts
index 469ccba4..ca446fad 100644
--- a/lib/config/load-config.ts
+++ b/lib/config/load-config.ts
@@ -122,6 +122,19 @@ export default function load() {
         newConfig.superSearch.permissions.read
     }
 
+    // Purchasing
+    if (newConfig.purchasing.enabled) {
+      availablePermissions[`purchasing.buy`] =
+        newConfig.purchasing.permissions.buy
+      availablePermissions[`purchasing.sell`] =
+        newConfig.purchasing.permissions.sell
+      availablePermissions[`purchasing.orders`] =
+        newConfig.purchasing.permissions.orders
+      availablePermissions[`purchasing.admin`] =
+        newConfig.purchasing.permissions.admin
+    }
+
+
     // interactions
     ;(newConfig.user.entityInteractions || []).forEach(
       ({ type: interactionType, permissions }) => {
diff --git a/lib/permissions/index.ts b/lib/permissions/index.ts
index f653196e..4fad662f 100644
--- a/lib/permissions/index.ts
+++ b/lib/permissions/index.ts
@@ -43,17 +43,23 @@ export const contentPermission = (
 // Check permissions for a content purchasing actions 
 export const purchasingPermission = (
   user: UserType = publicUser,
-  entityType: string,
   action: string,
+  entityType?: string,
   content: ContentEntityType = null
 ) => {
-  const permission = [
+
+  const globalPermission = [
+    `purchasing.${action}`,
+    `purchasing.admin`,
+  ]
+
+  const contentTypePermission = [
     `content.${entityType}.purchasing.${action}`,
     `content.${entityType}.purchasing.admin`,
   ]
 
   // If there is a content we need to check also if the content owner is the current user
-  const canAccess = hasPerm(user, permission)
+  const canAccess = entityType ? hasPerm(user, contentTypePermission) : hasPerm(user, globalPermission)
 
   if (content) {
     // Draft check
diff --git a/package.json b/package.json
index 1f5e1d1e..53fc54d5 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "formidable-serverless": "^1.0.3",
     "gray-matter": "^4.0.2",
     "isomorphic-unfetch": "^3.0.0",
+    "line-awesome": "^1.3.0",
     "markdown-it": "^11.0.0",
     "markdown-it-emoji": "^1.4.0",
     "mongodb": "^3.5.6",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e94fdbc6..1876b2be 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import '../styles/index.scss'
+import 'line-awesome/dist/line-awesome/css/line-awesome.css'
 
 import * as gtag from '../lib/client/gtag'
 
diff --git a/pages/api/content/[type].ts b/pages/api/content/[type].ts
index ae6845f5..662a3cf9 100644
--- a/pages/api/content/[type].ts
+++ b/pages/api/content/[type].ts
@@ -83,7 +83,7 @@ const createContent = async (req: Request, res) => {
   const { purchasingOptions, ...rest} = req.body
   
   // Only store purchasing options if the current user has permissions
-  const content = purchasingPermission(req.currentUser, type.slug, 'sell') ? {
+  const content = purchasingPermission(req.currentUser, 'sell', type.slug) ? {
     ...rest,
     purchasingOptions
   } : {
diff --git a/pages/api/orders/index.ts b/pages/api/orders/index.ts
index b38d8245..4e610770 100644
--- a/pages/api/orders/index.ts
+++ b/pages/api/orders/index.ts
@@ -36,6 +36,12 @@ import validateOrder from '@lib/validations/order'
 
 async function createOrder(req: Request, res) {
 
+  if (!purchasingPermission(req.currentUser, 'buy')) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
   const orderObject: OrderType = {
     ...req.body,
   }
@@ -60,27 +66,37 @@ async function createOrder(req: Request, res) {
 
 }
 
-const getOrders = (filterParams, paginationParams) => (req: Request, res) => {
-  return findOrders(filterParams, paginationParams)
-    .then(result => {
-      return res.status(200).json(result)
-    })
-}
-
-
-export default async (req: Request, res) => {
+const getOrders = (req: Request, res) => {
   const {
-    query: { search, sortBy, sortOrder, from, limit },
+    query: { sellerId, buyerId, sortBy, sortOrder, from, limit },
   } = req
 
-  const filterParams = {}
+  const filterParams = { }
+
+  if (sellerId) {
+    filterParams['sellerId'] = sellerId
+  }
 
-  if (search) {
-    filterParams['$or'] = [
-      { to: { $regex: search } },
-      { from: { $regex: search } },
-      { text: { $regex: search } }
-    ]
+  if (buyerId) {
+    filterParams['buyerId'] = buyerId
+  }
+
+
+  // If there is a buyer ID
+  // We allow the current user to see their orders
+  // We allow order manager role to see orders
+  // We allow seller to see orders
+  const canAccessWithBuyerId = buyerId && (req.currentUser.id === buyerId || purchasingPermission(req.currentUser, 'orders') || (sellerId && req.currentUser.id === sellerId))
+  const canAccessWithoutSellerId = !sellerId && purchasingPermission(req.currentUser, 'orders')
+  const canAccessSellerId = sellerId && (req.currentUser.id === sellerId || purchasingPermission(req.currentUser, 'orders'))
+  const canManageOrders = purchasingPermission(req.currentUser, 'orders')
+
+  const canAccess = canAccessWithBuyerId || canAccessWithoutSellerId || canAccessSellerId || canManageOrders
+
+  if (!canAccess) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
   }
 
   const paginationParams = {
@@ -90,6 +106,16 @@ export default async (req: Request, res) => {
     limit,
   }
 
+
+  return findOrders(filterParams, paginationParams)
+    .then(result => {
+      return res.status(200).json(result)
+    })
+}
+
+
+export default async (req: Request, res) => {
+
   try {
     // Connect to database
     await connect()
@@ -108,15 +134,9 @@ export default async (req: Request, res) => {
     })
   }
 
-  // TODO: We need to check the permissions of all the products in the order object
-  if (!purchasingPermission(req.currentUser, type, 'buy')) {
-    return res.status(401).json({
-      error: 'Unauthorized'
-    })
-  }
 
   await methods(req, res, {
-    get: getOrders(filterParams, paginationParams),
+    get: getOrders,
     post: createOrder,
   })
 }
diff --git a/yarn.lock b/yarn.lock
index 5792aac0..c24e97d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6599,6 +6599,11 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+line-awesome@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/line-awesome/-/line-awesome-1.3.0.tgz#51d59fe311ed040d22d8e80d3aa0b9a4b57e6cd3"
+  integrity sha512-Y0YHksL37ixDsHz+ihCwOtF5jwJgCDxQ3q+zOVgaSW8VugHGTsZZXMacPYZB1/JULBi6BAuTCTek+4ZY/UIwcw==
+
 line-column@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"

From 9d7ec00c0143a2b8750a030f8660d41606b7229e Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sun, 17 Jan 2021 20:21:06 +0100
Subject: [PATCH 07/26] shopping carts API

---
 lib/api/entities/shopping-carts/index.ts |  69 +++++++++++++
 lib/types/entities/shopping-cart.ts      |  15 +++
 lib/types/index.ts                       |   1 +
 pages/api/shopping-carts/index.ts        | 120 +++++++++++++++++++++++
 4 files changed, 205 insertions(+)
 create mode 100644 lib/api/entities/shopping-carts/index.ts
 create mode 100644 lib/types/entities/shopping-cart.ts
 create mode 100644 pages/api/shopping-carts/index.ts

diff --git a/lib/api/entities/shopping-carts/index.ts b/lib/api/entities/shopping-carts/index.ts
new file mode 100644
index 00000000..d2d9f39c
--- /dev/null
+++ b/lib/api/entities/shopping-carts/index.ts
@@ -0,0 +1,69 @@
+import { ANY_OBJECT, ShoppingCartType } from '@lib/types'
+
+import { getDB } from '@lib/api/db'
+
+type ShoppingCartsResponseType = {
+  total: number,
+  from: number,
+  limit: number,
+  results: ShoppingCartType[]
+}
+
+export function findOneShoppingCart(options) {
+  return getDB()
+    .collection('shopping-carts')
+    .findOne(options)
+}
+
+export function addShoppingCart(data: ShoppingCartType) {
+  return getDB()
+    .collection('shopping-carts')
+    .add(data)
+}
+
+export function updateOneShoppingCart(id, data:ShoppingCartType) {
+  return getDB()
+    .collection('shopping-carts')
+    .doc(id)
+    .set(data)
+}
+
+export async function findShoppingCarts(
+  options = {},
+  paginationOptions: ANY_OBJECT = {}
+): Promise<ShoppingCartsResponseType> {
+  const { from = 0, limit = 15, sortBy, sortShoppingCart = 'DESC' } = paginationOptions
+
+  const total = await getDB()
+    .collection('shopping-carts')
+    .count(options)
+
+  return getDB()
+    .collection('shopping-carts')
+    .limit(limit)
+    .start(from)
+    .find(options, {
+      sortBy,
+      sortShoppingCart,
+    })
+    .then(async (data) => {
+      return {
+        results: data,
+        from,
+        limit,
+        total,
+      }
+    })
+}
+
+export function deleteShoppingCarts(options) {
+  return getDB()
+    .collection('shopping-carts')
+    .remove(options)
+}
+
+export function deleteOneShoppingCart(options) {
+  return getDB()
+    .collection('shopping-carts')
+    .remove(options, true)
+}
diff --git a/lib/types/entities/shopping-cart.ts b/lib/types/entities/shopping-cart.ts
new file mode 100644
index 00000000..658c5258
--- /dev/null
+++ b/lib/types/entities/shopping-cart.ts
@@ -0,0 +1,15 @@
+import { TDate } from "timeago.js";
+
+export type ShoppingCartProductType = {
+  productId: string,
+  productContentType: string,
+  sellerId: string,
+  amount: number,
+  variant: string
+}
+
+export type ShoppingCartType = {
+  userId: string,
+  products: ShoppingCartProductType[]
+  createdAt: number
+}
\ No newline at end of file
diff --git a/lib/types/index.ts b/lib/types/index.ts
index 628bbebf..ca37ccf5 100644
--- a/lib/types/index.ts
+++ b/lib/types/index.ts
@@ -15,6 +15,7 @@ export * from './userTypeDefinition'
 export * from './entities/email'
 export * from './statistic'
 export * from './entities/orders'
+export * from './entities/shopping-cart'
 
 export type ANY_OBJECT = {
   [key: string]: any
diff --git a/pages/api/shopping-carts/index.ts b/pages/api/shopping-carts/index.ts
new file mode 100644
index 00000000..cd53b6d6
--- /dev/null
+++ b/pages/api/shopping-carts/index.ts
@@ -0,0 +1,120 @@
+import {
+  addShoppingCart,
+  findShoppingCarts,
+} from '@lib/api/entities/shopping-carts'
+
+import { Request } from '@lib/types'
+import { ShoppingCartType } from '@lib/types/entities/shopping-cart'
+import { connect } from '@lib/api/db'
+import { loadUser } from '@lib/api/middlewares'
+import logger from '@lib/logger'
+import methods from '@lib/api/api-helpers/methods'
+import { purchasingPermission } from '@lib/permissions'
+import runMiddleware from '@lib/api/api-helpers/run-middleware'
+
+function validateShoppingCart(item: ShoppingCartType) {
+  if (item.products.length === 0 ) {
+    return false
+  }
+
+  // TODO: validate data structure. Maybe use yup schema
+}
+
+async function createShoppingCart(req: Request, res) {
+
+  if (!purchasingPermission(req.currentUser, 'buy')) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
+  const shoppingCartObject: ShoppingCartType = {
+    ...req.body,
+  }
+
+  if (!validateShoppingCart(shoppingCartObject)) {
+    return res.status(400).json({
+      error: 'Malformed order entity'
+    })
+  }
+
+  try {
+    const result = await addShoppingCart(shoppingCartObject)
+
+    return res.status(200).json(result)
+  } catch (err) {
+    res.status(500).json({
+      error: 'Error creating shoppign cart ' + err.message
+    })
+  }
+
+
+}
+
+const getShoppingCarts = (req: Request, res) => {
+  const {
+    query: { userId, sortBy, sortOrder, from, limit, id },
+  } = req
+
+  const filterParams = { }
+
+  if (userId) {
+    filterParams['userId'] = userId
+  }
+
+  if (id) {
+    filterParams['id'] = id
+  }
+
+  const canAccessWithBuyerId = (userId && req.currentUser.id === userId) || purchasingPermission(req.currentUser, 'admin')
+  const canManageShoppingCarts = purchasingPermission(req.currentUser, 'admin')
+
+  const canAccess = canManageShoppingCarts || canAccessWithBuyerId
+
+  if (!canAccess) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
+  const paginationParams = {
+    sortBy,
+    sortOrder,
+    from,
+    limit,
+  }
+
+
+  return findShoppingCarts(filterParams, paginationParams)
+    .then(result => {
+      return res.status(200).json(result)
+    })
+}
+
+
+export default async (req: Request, res) => {
+
+  try {
+    // Connect to database
+    await connect()
+  } catch (e) {
+    logger('ERROR', 'Can not connect to db', e)
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+  try {
+    await runMiddleware(req, res, loadUser)
+  } catch (e) {
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+
+  await methods(req, res, {
+    get: getShoppingCarts,
+    post: createShoppingCart,
+  })
+}

From 7c294d33e41539706cee6ff23a527c8864d7cc43 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 21 Jan 2021 10:34:23 +0100
Subject: [PATCH 08/26] JWT

---
 DOCUMENTATION.md                              |  8 +++--
 .../auth/{auth-cookies.js => auth-cookies.ts} |  0
 lib/api/auth/passport-strategies.js           |  2 +-
 lib/api/auth/{iron.js => token.ts}            | 15 ++++++++--
 lib/api/middlewares/load-user.middleware.js   |  2 +-
 package.json                                  |  2 +-
 pages/api/activity/[userId].ts                |  4 +--
 pages/api/auth/[...action].ts                 |  8 +++--
 pages/api/users/[...slug].ts                  |  2 +-
 pages/content/[type].tsx                      |  7 ++---
 pages/create/content/[type].tsx               |  2 +-
 pages/create/group/[type].tsx                 | 11 +++----
 pages/edit/content/[type]/[slug].tsx          |  8 ++---
 pages/edit/group/[type]/[slug].tsx            |  8 ++---
 pages/group/[type].tsx                        |  8 ++---
 pages/group/[type]/[slug].tsx                 |  2 +-
 yarn.lock                                     | 30 -------------------
 17 files changed, 51 insertions(+), 68 deletions(-)
 rename lib/api/auth/{auth-cookies.js => auth-cookies.ts} (100%)
 rename lib/api/auth/{iron.js => token.ts} (53%)

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index d7f4dc54..303df135 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -749,11 +749,13 @@ MONGODB_DATABASE=<database>
 
 Edge uses [Passport.js](http://www.passportjs.org) cookie based authentication with email and password.
 
-The login cookie is httpOnly, meaning it can only be accessed by the API, and it's encrypted using [@hapi/iron](https://hapi.dev/family/iron) for more security.
+The login cookie is httpOnly, meaning it can only be accessed by the API, and it's encrypted using [JWT](https://www.npmjs.com/package/jsonwebtoken) for more security.
 
-Apart from the cookie authentication there are two more ways to authenticate:
-- JWT token on the Authenthication header*
+Apart from the cookie authentication there are two more ways to authorizate users:
+- JWT token on the Authenthication header
+  - Using the format `Authentication: Bearer TOKEN`
 - API Key
+  - TO-DO
 
 ### Providers
 
diff --git a/lib/api/auth/auth-cookies.js b/lib/api/auth/auth-cookies.ts
similarity index 100%
rename from lib/api/auth/auth-cookies.js
rename to lib/api/auth/auth-cookies.ts
diff --git a/lib/api/auth/passport-strategies.js b/lib/api/auth/passport-strategies.js
index a8b1fd2d..e3d55fa1 100644
--- a/lib/api/auth/passport-strategies.js
+++ b/lib/api/auth/passport-strategies.js
@@ -8,7 +8,7 @@ import FacebookStrategy from 'passport-facebook'
 import GithubStrategy from 'passport-github2'
 import { OAuth2Strategy as GoogleStrategy } from 'passport-google-oauth'
 import Local from 'passport-local'
-import { getSession } from './iron'
+import { getSession } from './token'
 import logger from '@lib/logger'
 import slugify from 'slugify'
 
diff --git a/lib/api/auth/iron.js b/lib/api/auth/token.ts
similarity index 53%
rename from lib/api/auth/iron.js
rename to lib/api/auth/token.ts
index ebc1d95b..e26cd290 100644
--- a/lib/api/auth/iron.js
+++ b/lib/api/auth/token.ts
@@ -1,5 +1,5 @@
-import Iron from '@hapi/iron'
 import { getTokenCookie } from './auth-cookies'
+import jwt from 'jsonwebtoken'
 
 // Use an environment variable here instead of a hardcoded value for production
 const TOKEN_SECRET =
@@ -7,10 +7,19 @@ const TOKEN_SECRET =
   'default-secret-string-that-should-not-be-used'
 
 export function encryptSession(session) {
-  return Iron.seal(session, TOKEN_SECRET, Iron.defaults)
+  return jwt.sign(session, TOKEN_SECRET, {
+    expiresIn: '2 days'
+  } )
 }
 
 export async function getSession(req) {
   const token = getTokenCookie(req)
-  return token && Iron.unseal(token, TOKEN_SECRET, Iron.defaults)
+  
+  if (token) {
+    return jwt.verify(token, TOKEN_SECRET)
+  } else if (req.headers['authorization']) {
+    return jwt.verify(req.headers['authorization'].replace('Bearer ', ''), TOKEN_SECRET)
+  }
+
+  return null
 }
diff --git a/lib/api/middlewares/load-user.middleware.js b/lib/api/middlewares/load-user.middleware.js
index ce2ac781..c4fdc3e8 100644
--- a/lib/api/middlewares/load-user.middleware.js
+++ b/lib/api/middlewares/load-user.middleware.js
@@ -1,4 +1,4 @@
-import { getSession } from '../auth/iron'
+import { getSession } from '../auth/token'
 
 export default async (req, res, cb) => {
   try {
diff --git a/package.json b/package.json
index 53fc54d5..ec7364ad 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@babel/core": "^7.11.1",
-    "@hapi/iron": "6.0.0",
     "@sendgrid/mail": "^7.1.0",
     "azure-storage": "2.10.3",
     "content-type": "^1.0.4",
@@ -23,6 +22,7 @@
     "formidable-serverless": "^1.0.3",
     "gray-matter": "^4.0.2",
     "isomorphic-unfetch": "^3.0.0",
+    "jsonwebtoken": "^8.5.1",
     "line-awesome": "^1.3.0",
     "markdown-it": "^11.0.0",
     "markdown-it-emoji": "^1.4.0",
diff --git a/pages/api/activity/[userId].ts b/pages/api/activity/[userId].ts
index 661e04fe..8d4c9c8c 100644
--- a/pages/api/activity/[userId].ts
+++ b/pages/api/activity/[userId].ts
@@ -1,10 +1,10 @@
+import { Request } from '@lib/types'
 import { connect } from '@lib/api/db'
 import { findActivity } from '@lib/api/entities/activity'
 import { findOneUser } from '@lib/api/entities/users'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import { hasPermission } from '@lib/permissions'
 import logger from '@lib/logger'
-import { Request } from '@lib/types'
 import methods from '@lib/api/api-helpers/methods'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 
diff --git a/pages/api/auth/[...action].ts b/pages/api/auth/[...action].ts
index 390fc278..b1400fdd 100644
--- a/pages/api/auth/[...action].ts
+++ b/pages/api/auth/[...action].ts
@@ -12,7 +12,7 @@ import { Request } from 'express'
 import { UserType } from '@lib/types'
 import appConfig from '@lib/config'
 import { connect } from '@lib/api/db'
-import { encryptSession } from '@lib/api/auth/iron'
+import { encryptSession } from '@lib/api/auth/token'
 import express from 'express'
 import { generateSaltAndHash } from '@lib/api/entities/users/user.utils'
 import logger from '@lib/logger'
@@ -91,6 +91,8 @@ const logUserIn = async (res, user) => {
   })
 
   setTokenCookie(res, token)
+
+  return token
 }
 
 // Normal login
@@ -120,9 +122,9 @@ app.post('/api/auth/login', async (req: Request, res) => {
       })
     }
 
-    await logUserIn(res, user)
+    const token = await logUserIn(res, user)
 
-    return res.status(200).json({ done: true })
+    return res.status(200).json({ token, userId: user.id })
   } catch (error) {
     console.error(error)
     return res.status(401).json({ error: error.message })
diff --git a/pages/api/users/[...slug].ts b/pages/api/users/[...slug].ts
index 84b2e3e5..6b6dbbaa 100644
--- a/pages/api/users/[...slug].ts
+++ b/pages/api/users/[...slug].ts
@@ -19,7 +19,7 @@ import { onUserDeleted, onUserUpdated } from '@lib/api/hooks/user.hooks'
 import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { connect } from '@lib/api/db'
 import edgeConfig from '@lib/config'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import { hasPermission } from '@lib/permissions'
 import { hidePrivateUserFields } from '@lib/api/entities/users/user.utils'
 import logger from '@lib/logger'
diff --git a/pages/content/[type].tsx b/pages/content/[type].tsx
index 8b59c760..98ca6d63 100644
--- a/pages/content/[type].tsx
+++ b/pages/content/[type].tsx
@@ -1,18 +1,17 @@
 import { hasPermissionsForContent, loadUser } from '@lib/api/middlewares'
 
 import ContentListView from '@components/content/read-content/content-list-view/content-list-view'
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { GetServerSideProps } from 'next'
 import Layout from '@components/layout/three-panels/layout'
 import ListContentTypes from '@components/content/read-content/list-content-types/list-content-types'
 import ToolBar from '@components/generic/toolbar/toolbar'
+import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 import { connect } from '@lib/api/db'
 import { findContent } from '@lib/api/entities/content'
 import { getContentTypeDefinition } from '@lib/config'
+import { getSession } from '@lib/api/auth/token'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
-import { getSession } from '@lib/api/auth/iron'
-import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
-
 
 // Get serversideProps is important for SEO, and only available at the pages level
 export const getServerSideProps: GetServerSideProps = async ({
diff --git a/pages/create/content/[type].tsx b/pages/create/content/[type].tsx
index 8ee6530e..6a75c69e 100644
--- a/pages/create/content/[type].tsx
+++ b/pages/create/content/[type].tsx
@@ -12,7 +12,7 @@ import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 import Layout from '@components/layout/normal/layout'
 import { connect } from '@lib/api/db'
 import { findOneContent } from '@lib/api/entities/content'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 
 // Get serversideProps is important for SEO, and only available at the pages level
 export const getServerSideProps: GetServerSideProps = async ({
diff --git a/pages/create/group/[type].tsx b/pages/create/group/[type].tsx
index 608b5b34..21a30f66 100644
--- a/pages/create/group/[type].tsx
+++ b/pages/create/group/[type].tsx
@@ -1,12 +1,13 @@
-import GroupForm from '@components/groups/write/group-form/group-form'
 import { cypheredFieldPermission, groupPermission } from '@lib/permissions'
-import Layout from '@components/layout/normal/layout'
-import { useState, useMemo, useCallback } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+
 import { GetServerSideProps } from 'next'
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+import GroupForm from '@components/groups/write/group-form/group-form'
+import Layout from '@components/layout/normal/layout'
 import { connect } from '@lib/api/db'
 import { getGroupTypeDefinition } from '@lib/config'
-import { getSession } from '@lib/api/auth/iron'
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+import { getSession } from '@lib/api/auth/token'
 
 export const getServerSideProps: GetServerSideProps = async ({
   req,
diff --git a/pages/edit/content/[type]/[slug].tsx b/pages/edit/content/[type]/[slug].tsx
index 74263def..75c41984 100644
--- a/pages/edit/content/[type]/[slug].tsx
+++ b/pages/edit/content/[type]/[slug].tsx
@@ -1,15 +1,15 @@
+import { contentPermission, cypheredFieldPermission } from '@lib/permissions'
 import { useCallback, useMemo, useState } from 'react'
 
 import ContentForm from '@components/content/write-content/content-form/content-form'
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { GetServerSideProps } from 'next'
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 import Layout from '@components/layout/normal/layout'
 import { connect } from '@lib/api/db'
-import { contentPermission, cypheredFieldPermission } from '@lib/permissions'
 import { findOneContent } from '@lib/api/entities/content'
 import { getContentTypeDefinition } from '@lib/config'
-import { getSession } from '@lib/api/auth/iron'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+import { getSession } from '@lib/api/auth/token'
 
 function notFound(res) {
   res.writeHead(302, { Location: '/404' })
diff --git a/pages/edit/group/[type]/[slug].tsx b/pages/edit/group/[type]/[slug].tsx
index c8124e99..532c6e76 100644
--- a/pages/edit/group/[type]/[slug].tsx
+++ b/pages/edit/group/[type]/[slug].tsx
@@ -1,15 +1,15 @@
+import { cypheredFieldPermission, groupPermission } from '@lib/permissions'
 import { useCallback, useMemo, useState } from 'react'
 
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { GetServerSideProps } from 'next'
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 import GroupForm from '@components/groups/write/group-form/group-form'
 import Layout from '@components/layout/normal/layout'
 import { connect } from '@lib/api/db'
 import { findOneContent } from '@lib/api/entities/content'
 import { getGroupTypeDefinition } from '@lib/config'
-import { getSession } from '@lib/api/auth/iron'
-import { cypheredFieldPermission, groupPermission } from '@lib/permissions'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+import { getSession } from '@lib/api/auth/token'
 
 function notFound(res) {
   res.writeHead(302, { Location: '/404' })
diff --git a/pages/group/[type].tsx b/pages/group/[type].tsx
index 3ca9a1d1..2c7969af 100644
--- a/pages/group/[type].tsx
+++ b/pages/group/[type].tsx
@@ -1,19 +1,19 @@
 import { hasPermissionsForGroup, loadUser } from '@lib/api/middlewares'
 
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { GetServerSideProps } from 'next'
 import GroupListView from '@components/groups/read/group-list-view/group-list-view'
 import Layout from '@components/layout/three-panels/layout'
 import LinkList from '@components/generic/link-list/link-list'
 import ToolBar from '@components/generic/toolbar/toolbar'
+import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 import { connect } from '@lib/api/db'
 import { findContent } from '@lib/api/entities/content'
 import { getGroupTypeDefinition } from '@lib/config'
+import { getSession } from '@lib/api/auth/token'
+import { groupPermission } from '@lib/permissions'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 import { useGroupTypes } from '@lib/client/hooks'
-import { getSession } from '@lib/api/auth/iron'
-import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
-import { groupPermission } from '@lib/permissions'
 
 // Get serversideProps is important for SEO, and only available at the pages level
 export const getServerSideProps: GetServerSideProps = async ({
diff --git a/pages/group/[type]/[slug].tsx b/pages/group/[type]/[slug].tsx
index aa1f94b0..36bba8c9 100644
--- a/pages/group/[type]/[slug].tsx
+++ b/pages/group/[type]/[slug].tsx
@@ -11,7 +11,7 @@ import { appendInteractions } from '@lib/api/entities/interactions/interactions.
 import { connect } from '@lib/api/db'
 import { findOneContent } from '@lib/api/entities/content'
 import { getGroupTypeDefinition } from '@lib/config'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import { groupUserPermission } from '@lib/permissions'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 
diff --git a/yarn.lock b/yarn.lock
index c24e97d6..ed119b7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1117,13 +1117,6 @@
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
   integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
 
-"@hapi/b64@5.x.x":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/b64/-/b64-5.0.0.tgz#b8210cbd72f4774985e78569b77e97498d24277d"
-  integrity sha512-ngu0tSEmrezoiIaNGG6rRvKOUkUuDdf4XTPnONHGYfSGRmDqPZX5oJL6HAdKTo1UQHECbdB4OzhWrfgVppjHUw==
-  dependencies:
-    "@hapi/hoek" "9.x.x"
-
 "@hapi/boom@9.x.x":
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.1.tgz#89e6f0e01637c2a4228da0d113e8157c93677b04"
@@ -1131,18 +1124,6 @@
   dependencies:
     "@hapi/hoek" "9.x.x"
 
-"@hapi/bourne@2.x.x":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-2.0.0.tgz#5bb2193eb685c0007540ca61d166d4e1edaf918d"
-  integrity sha512-WEezM1FWztfbzqIUbsDzFRVMxSoLy3HugVcux6KDDtTqzPsLE8NDRHfXvev66aH1i2oOKKar3/XDjbvh/OUBdg==
-
-"@hapi/cryptiles@5.x.x":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@hapi/cryptiles/-/cryptiles-5.1.0.tgz#655de4cbbc052c947f696148c83b187fc2be8f43"
-  integrity sha512-fo9+d1Ba5/FIoMySfMqPBR/7Pa29J2RsiPrl7bkwo5W5o+AN1dAYQRi4SPrPwwVxVGKjgLOEWrsvt1BonJSfLA==
-  dependencies:
-    "@hapi/boom" "9.x.x"
-
 "@hapi/formula@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@hapi/formula/-/formula-1.2.0.tgz#994649c7fea1a90b91a0a1e6d983523f680e10cd"
@@ -1158,17 +1139,6 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
   integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
 
-"@hapi/iron@6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/iron/-/iron-6.0.0.tgz#ca3f9136cda655bdd6028de0045da0de3d14436f"
-  integrity sha512-zvGvWDufiTGpTJPG1Y/McN8UqWBu0k/xs/7l++HVU535NLHXsHhy54cfEMdW7EjwKfbBfM9Xy25FmTiobb7Hvw==
-  dependencies:
-    "@hapi/b64" "5.x.x"
-    "@hapi/boom" "9.x.x"
-    "@hapi/bourne" "2.x.x"
-    "@hapi/cryptiles" "5.x.x"
-    "@hapi/hoek" "9.x.x"
-
 "@hapi/joi@^16.1.8":
   version "16.1.8"
   resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-16.1.8.tgz#84c1f126269489871ad4e2decc786e0adef06839"

From 469ae9c9d44c73fdaf7a5ea89d84ba736a6ab57e Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 4 Feb 2021 09:10:06 +0100
Subject: [PATCH 09/26] working on shopping cart tests

---
 .../content-detail-view.tsx                   |  11 +-
 .../purchasing-product-form.tsx               | 255 +++++++++++++++++
 .../content-form/purchasing-options-form.tsx  |   2 +-
 components/layout/header/admin-sub-header.tsx | 131 +--------
 lib/types/entities/shopping-cart.ts           |   2 +-
 pages/api/shopping-carts/[id]/add-product.ts  | 120 ++++++++
 pages/api/shopping-carts/[id]/get-prices.ts   |   1 +
 pages/api/shopping-carts/[id]/index.ts        |  76 +++++
 .../api/shopping-carts/[id]/remove-product.ts |   0
 pages/api/shopping-carts/index.ts             |  43 ++-
 pages/checkout/[cartId].tsx                   |  75 +++++
 pages/content/[type]/[slug].tsx               |   2 +-
 .../comments/delete/comments.delete.test.js   |   4 +-
 .../comments/read/comment-list.read.test.js   |   4 +-
 .../api/comments/write/comments.write.test.js |   4 +-
 .../api/content/delete/content.delete.test.js |   4 +-
 .../read/content-list.cypher.read.test.js     |   5 +-
 .../content/read/content.cypher.read.test.js  |   5 +-
 .../content/read/content.detail.read.test.js  |   4 +-
 .../api/content/read/content.read.test.js     |   4 +-
 .../api/content/write/content.create.test.js  |   4 +-
 .../write/content.cypher.create.test.js       |   6 +-
 .../write/content.cypher.update.test.js       |   7 +-
 .../api/content/write/content.edit.test.js    |   4 +-
 .../write/content.purchasing.create.test.js   |   4 +-
 .../delete/groups.comment.delete.test.js      |   4 +-
 .../groups/delete/groups.user.delete.test.js  |   4 +-
 .../api/groups/read/group.cypher.read.test.js |   5 +-
 .../read/groups-list.cypher.read.test.js      |   5 +-
 .../groups/read/groups.content.read.test.js   |   4 +-
 .../api/groups/read/groups.read.test.js       |   4 +-
 .../write/groups.comment.create.test.js       |   4 +-
 .../write/groups.content.create.test.js       |   4 +-
 .../groups/write/groups.content.edit.test.js  |   4 +-
 .../api/groups/write/groups.create.test.js    |   4 +-
 .../api/groups/write/groups.edit.test.js      |   4 +-
 .../groups/write/groups.user.create.test.js   |   4 +-
 .../groups/write/groups.user.update.test.js   |   4 +-
 .../delete/interactions.delete.test.js        |   8 +-
 .../write/interactions.create.test.js         |   6 +-
 .../shopping-cart-detail.read.test.js         |   0
 .../shopping-cart.create.test.js              | 260 ++++++++++++++++++
 .../shopping-cart.delete.test.js              |   0
 .../shopping-cart/shopping-cart.read.test.js  | 241 ++++++++++++++++
 .../shopping-cart.update.test.js              | 242 ++++++++++++++++
 .../api/statistic/statistic.read.test.js      |   5 +-
 .../api/superSearch/superSearch.read.test.js  |   5 +-
 .../api/users/delete/user.delete.test.js      |   4 +-
 .../api/users/read/user.cypher.read.test.js   |   5 +-
 .../users/read/users-list.cypher.read.test.js |   5 +-
 .../api/users/read/users-list.read.test.js    |   4 +-
 .../api/users/read/users.read.test.js         |   4 +-
 .../api/users/write/users.edit.test.js        |   4 +-
 .../api/users/write/users.register.test.js    |   4 +-
 tsconfig.json                                 |   3 +-
 55 files changed, 1415 insertions(+), 216 deletions(-)
 create mode 100644 components/content/read-content/content-detail-view/purchasing-product-form.tsx
 create mode 100644 pages/api/shopping-carts/[id]/add-product.ts
 create mode 100644 pages/api/shopping-carts/[id]/get-prices.ts
 create mode 100644 pages/api/shopping-carts/[id]/index.ts
 create mode 100644 pages/api/shopping-carts/[id]/remove-product.ts
 create mode 100644 pages/checkout/[cartId].tsx
 create mode 100644 test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
 create mode 100644 test/integration/api/shopping-cart/shopping-cart.create.test.js
 create mode 100644 test/integration/api/shopping-cart/shopping-cart.delete.test.js
 create mode 100644 test/integration/api/shopping-cart/shopping-cart.read.test.js
 create mode 100644 test/integration/api/shopping-cart/shopping-cart.update.test.js

diff --git a/components/content/read-content/content-detail-view/content-detail-view.tsx b/components/content/read-content/content-detail-view/content-detail-view.tsx
index 6d3969b0..bc169c4c 100644
--- a/components/content/read-content/content-detail-view/content-detail-view.tsx
+++ b/components/content/read-content/content-detail-view/content-detail-view.tsx
@@ -1,4 +1,5 @@
-import React, { useState, memo, Fragment } from 'react'
+import React, { Fragment, memo, useState } from 'react'
+import config, { getInteractionsDefinition } from '@lib/config'
 
 import AuthorBox from '@components/user/author-box/author-box'
 import Button from '@components/generic/button/button'
@@ -8,14 +9,14 @@ import ContentActions from '../../content-actions/content-actions'
 import ContentSummaryView from '../content-summary-view/content-summary-view'
 import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
 import FollowButton from '@components/user/follow-button/follow-button'
+import { Interaction } from '@components/generic/interactions'
 import ReactionCounter from '@components/generic/reaction-counter/reaction-counter'
 import SocialShare from '@components/generic/social-share/social-share'
-import config, { getInteractionsDefinition } from '@lib/config'
 import { format } from 'timeago.js'
+import { purchasingPermission } from '@lib/permissions'
 import { useMonetizationState } from 'react-web-monetization'
 import { usePermission } from '@lib/client/hooks'
 import { useUser } from '@lib/client/hooks'
-import { Interaction } from '@components/generic/interactions'
 
 interface Props {
   content: any
@@ -82,6 +83,8 @@ function ContentDetailView(props: Props) {
       setShowComments(true)
     }
   }
+
+
   return (
     <>
       <article className="edge-item-card">
@@ -154,6 +157,8 @@ function ContentDetailView(props: Props) {
             user={user}
           />
         </div>
+              
+        {purchasingPermission(user, 'buy', props.type.slug) && <PurchasingProductForm product={props.content} /> }
 
         <footer className="edge-item-card-footer">
           <ul className="edge-item-card-stats">
diff --git a/components/content/read-content/content-detail-view/purchasing-product-form.tsx b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
new file mode 100644
index 00000000..8112abdd
--- /dev/null
+++ b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
@@ -0,0 +1,255 @@
+import { PurchashingOptionsType, PurchasingVariantType } from '@lib/types/purchasing'
+import React, { useState } from 'react'
+
+import Button from '@components/generic/button/button'
+import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+
+type PropTypesVariantItem = {
+  variant: PurchasingVariantType,
+  onChange: (val: PurchasingVariantType) => void,
+  onClickRemove: () => void
+}
+
+function VariantItem({
+  variant,
+  onChange,
+  onClickRemove
+}: PropTypesVariantItem) {
+
+  const onClickRemoveButton = (ev: React.MouseEvent<HTMLButtonElement>)  => {
+    ev.preventDefault()
+    ev.stopPropagation()
+    onClickRemove()
+
+  }
+  return (
+    <>
+      <div className="variant-item">
+        <DynamicFieldEdit
+          name="default"
+          value={variant.default}
+          onChange={(val) => onChange({
+            ...variant,
+            default: val
+          })}
+          field={{
+            name: 'default',
+            type: 'boolean',
+            label: 'This is the default variant',
+          }} />
+        <DynamicFieldEdit
+          name="name"
+          value={variant.name}
+          onChange={(val) => onChange({
+            ...variant,
+            name: val
+          })}
+          field={{
+            name: 'name',
+            type: 'text',
+            placeholder: 'Size M',
+            label: 'name',
+            min: 0
+          }} />
+        <DynamicFieldEdit
+          name="stock"
+          value={variant.stock}
+          onChange={(val) => onChange({
+            ...variant,
+            stock: val
+          })}
+          field={{
+            name: 'stock',
+            type: 'number',
+            label: 'stock',
+            min: 0
+          }} />
+        <DynamicFieldEdit
+          name="price"
+          value={variant.price}
+          onChange={(val) => onChange({
+            ...variant,
+            price: val
+          })}
+          field={{
+            name: 'price',
+            type: 'number',
+            label: 'price',
+            placeholder: 0.4,
+            min: 0.1,
+            max: 10000
+          }} />
+
+          <Button onClick={onClickRemoveButton}>Remove</Button>
+      </div>
+      <style jsx>{
+        `
+        .variant-item {
+          padding: var(--edge-gap);
+          border: 1px solid var(--accents-3);
+          margin: var(--edge-gap);
+        }
+        `
+      }</style>
+    </>
+  )
+}
+
+
+type PropTypes = {
+  value: PurchashingOptionsType,
+  onChange: (val: PurchashingOptionsType) => void
+}
+
+
+export default function PurchasingProductForm({
+  value,
+  onChange
+}: PropTypes) {
+  const [variants, setVariants] = useState([])
+
+  const addVariant = (ev: React.MouseEvent<HTMLButtonElement>)  => {
+    ev.preventDefault()
+    ev.stopPropagation()
+
+    setVariants([...variants, {
+      name: '',
+      price: 0.0,
+      stock: 0,
+      default: false
+    }])
+  }
+
+  const onChangeVariant = (index, value: PurchasingVariantType) => {
+    setVariants(variants.map((item, i) => {
+      return index === i ? {
+        ...value
+      } : {
+          ...item,
+          default: value.default === true ? false: item.default
+        }
+    }))
+  }
+
+  const onRemoveVariant = (index) => {
+    setVariants(variants.filter((item, i) => {
+      return i !== index
+    }))
+  }
+
+  return (
+    <>
+      <div className="purchasing-options">
+        <h3>Purchashing Options</h3>
+        <DynamicFieldEdit
+          name="multiple"
+          value={value.multiple}
+          onChange={(val) => onChange({
+            ...value,
+            multiple: val
+          })}
+          field={{
+            name: 'multiple',
+            type: 'boolean',
+            label: 'Allow multiple items',
+          }} />
+        <DynamicFieldEdit
+          name="sku"
+          value={value.sku}
+          onChange={(val) => onChange({
+            ...value,
+            sku: val
+          })}
+          field={{
+            name: 'sku',
+            type: 'text',
+            label: 'SKU',
+          }} />
+        <DynamicFieldEdit
+          name="stock"
+          value={value.stock}
+          onChange={(val) => onChange({
+            ...value,
+            stock: val
+          })}
+          field={{
+            name: 'stock',
+            type: 'number',
+            label: 'stock',
+            min: 0
+          }} />
+
+        <div className="form-row">
+          <div className="input-wr">
+            <DynamicFieldEdit
+              name="price"
+              value={value.price}
+              onChange={(val) => onChange({
+                ...value,
+                price: val
+              })}
+              field={{
+                name: 'price',
+                type: 'number',
+                label: 'price',
+                min: 0.1,
+                max: 10000
+              }} />
+          </div>
+          <div className="input-wr">
+            <DynamicFieldEdit
+              name="currency"
+              value={value.currency}
+              onChange={(val) => onChange({
+                ...value,
+                currency: val
+              })}
+              field={{
+                name: 'currency',
+                type: 'select',
+                label: 'Currency',
+                options: [{
+                  value: 'euro',
+                  label: '€'
+                }, {
+                  value: 'dollar',
+                  label: '$'
+                }, {
+                  value: 'pound',
+                  label: '£'
+                }],
+                description: 'Note: All values will be transformed to dollars at the moment of the payment.'
+              }} />
+          </div>
+        </div>
+
+        <div className="divider"></div>
+        <h4>Product Variants</h4>
+        <p>You can add diferent options for this product. For example: Sizes S,X,M,L with different prices and stock.</p>
+        {variants.map((item, index) => {
+          return <div className="variant" key={`variant-${index}`}>
+            <VariantItem variant={item} onChange={(val) => onChangeVariant(index, val)} onClickRemove={() => onRemoveVariant(index)} />
+          </div>
+        })}
+        <Button onClick={addVariant}>Add variant</Button>
+      </div>
+      <style jsx>{
+        `
+        .purchasing-options {
+          padding: var(--edge-gap);
+          border: 1px solid;
+          
+        }
+
+        .form-row {
+          display: flex;
+        }
+
+        .form-row .input-wr {
+          width: 50%;
+        }
+        `
+      }</style>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index fdaac97f..20e56b3a 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -120,7 +120,7 @@ export default function PurchasingOptionsForm({
     }])
   }
 
-  const onChangeVariant = (index, value: OptionsType) => {
+  const onChangeVariant = (index, value: PurchasingVariantType) => {
     setVariants(variants.map((item, i) => {
       return index === i ? {
         ...value
diff --git a/components/layout/header/admin-sub-header.tsx b/components/layout/header/admin-sub-header.tsx
index 4bad1493..9456e26f 100644
--- a/components/layout/header/admin-sub-header.tsx
+++ b/components/layout/header/admin-sub-header.tsx
@@ -48,14 +48,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
             {hasPermission(user, `admin.stats`) && <li>
               <Link href="/admin">
                 <a title="Admin">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <defs />
-                    <path fill="none" d="M0 0h24v24H0V0z" />
-                    <path
-                      className="icon"
-                      d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
-                    />
-                  </svg>
+                  <i className="las la-cog"></i>
                   <span>Administration</span>
                 </a>
               </Link>
@@ -65,27 +58,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
             {hasPermission(user, `user.admin`) && <li>
               <Link href="/admin/users">
                 <a title="Admin">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <defs />
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                      className="icon"
-                      fillRule="evenodd"
-                      d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87z"
-                    />
-                    <circle
-                      className="icon"
-                      cx="9"
-                      cy="8"
-                      r="4"
-                      fillRule="evenodd"
-                    />
-                    <path
-                      className="icon"
-                      fillRule="evenodd"
-                      d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24C14.5 5.27 15 6.58 15 8s-.5 2.73-1.33 3.76c.42.14.86.24 1.33.24zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
-                    />
-                  </svg>
+                  <i className="las la-users-cog"></i>
                   <span>Users</span>
                 </a>
               </Link>
@@ -95,17 +68,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
             {hasPermission(user, `admin.email`) && <li>
               <Link href="/admin/emails">
                 <a title="Admin">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                  >
-                    <defs />
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path
-                      className="icon"
-                      d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
-                    />
-                  </svg>
+                  <i className="las la-envelope"></i>
                   <span>Emails</span>
                 </a>
               </Link>
@@ -113,14 +76,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
 
             {hasPermission(user, 'admin.access') && <li className="view-more">
               <a title="Content">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <defs />
-                  <path fill="none" d="M0 0h24v24H0z" />
-                  <path
-                    className="icon"
-                    d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                  />
-                </svg>
+                <i className="las la-file"></i>
                 <span>Content</span>
               </a>
               <ul>
@@ -129,17 +85,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
                     <li key={link.link}>
                       <Link href={link.link}>
                         <a title={`Administer ${link.title}`}>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                          >
-                            <defs />
-                            <path fill="none" d="M0 0h24v24H0z" />
-                            <path
-                              className="icon"
-                              d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
-                            />
-                          </svg>
+                          <i className="las la-file"></i>
                           <span>{link.title}</span>
                         </a>
                       </Link>
@@ -151,14 +97,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
             }
             {hasPermission(user, 'admin.access') && <li className="view-more">
               <a title="Groups">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <defs />
-                  <path fill="none" d="M0 0h24v24H0z" />
-                  <path
-                    className="icon"
-                    d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                  />
-                </svg>
+                <i className="las la-users"></i>
                 <span>Groups</span>
               </a>
               <ul>
@@ -167,17 +106,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
                     <li key={link.link}>
                       <Link href={link.link}>
                         <a title={`Administer ${link.title}`}>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                          >
-                            <defs />
-                            <path fill="none" d="M0 0h24v24H0z" />
-                            <path
-                              className="icon"
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM9.5 8c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8zm6.5 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
-                            />
-                          </svg>
+                          <i className="las la-users"></i>
                           <span>{link.title}</span>
                         </a>
                       </Link>
@@ -190,21 +119,14 @@ export default function AdminSubHeader({ user }: PropTypes) {
             {(hasPermission(user, 'purchasing.orders') || hasPermission(user, 'purchasing.sell')) && <li>
               <Link href="/orders">
                 <a title="Orders">
-                <i className="las la-cubes"></i>
+                  <i className="las la-cubes"></i>
                   <span>Orders</span>
                 </a>
               </Link>
             </li>}
             <li className="view-more">
               <a title="Create">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <defs />
-                  <path fill="none" d="M0 0h24v24H0z" />
-                  <path
-                    className="icon"
-                    d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                  />
-                </svg>
+                <i className="las la-plus-circle"></i>
                 <span>Create</span>
               </a>
               <ul>
@@ -213,17 +135,7 @@ export default function AdminSubHeader({ user }: PropTypes) {
                     <li key={link.link}>
                       <Link href={link.link}>
                         <a title={`Create a ${link.title}`}>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                          >
-                            <defs />
-                            <path fill="none" d="M0 0h24v24H0z" />
-                            <path
-                              className="icon"
-                              d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
-                            />
-                          </svg>
+                          <i className="las la-file"></i>
                           <span>{link.title}</span>
                         </a>
                       </Link>
@@ -234,18 +146,8 @@ export default function AdminSubHeader({ user }: PropTypes) {
                   return (
                     <li key={link.link}>
                       <Link href={link.link}>
-                        <a title={`Administer ${link.title}`}>
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                          >
-                            <defs />
-                            <path fill="none" d="M0 0h24v24H0z" />
-                            <path
-                              className="icon"
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8 17.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM9.5 8c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8zm6.5 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
-                            />
-                          </svg>
+                        <a title={`Create ${link.title}`}>
+                          <i className="las la-users"></i>
                           <span>{link.title}</span>
                         </a>
                       </Link>
@@ -291,15 +193,12 @@ export default function AdminSubHeader({ user }: PropTypes) {
           fill: var(--accents-2);
         }
 
-        .i {
+        i {
           font-size: 20px;
-          padding-right: 5px;
+          margin-right: 5px;
           color: var(--accents-4);
         }
-        svg {
-          margin-right: 4px;
-          width: 20px;
-        }
+       
         .icon {
           fill: var(--accents-4);
           transition: 0.35s ease;
diff --git a/lib/types/entities/shopping-cart.ts b/lib/types/entities/shopping-cart.ts
index 658c5258..72a9a830 100644
--- a/lib/types/entities/shopping-cart.ts
+++ b/lib/types/entities/shopping-cart.ts
@@ -5,7 +5,7 @@ export type ShoppingCartProductType = {
   productContentType: string,
   sellerId: string,
   amount: number,
-  variant: string
+  variant?: string
 }
 
 export type ShoppingCartType = {
diff --git a/pages/api/shopping-carts/[id]/add-product.ts b/pages/api/shopping-carts/[id]/add-product.ts
new file mode 100644
index 00000000..cd53b6d6
--- /dev/null
+++ b/pages/api/shopping-carts/[id]/add-product.ts
@@ -0,0 +1,120 @@
+import {
+  addShoppingCart,
+  findShoppingCarts,
+} from '@lib/api/entities/shopping-carts'
+
+import { Request } from '@lib/types'
+import { ShoppingCartType } from '@lib/types/entities/shopping-cart'
+import { connect } from '@lib/api/db'
+import { loadUser } from '@lib/api/middlewares'
+import logger from '@lib/logger'
+import methods from '@lib/api/api-helpers/methods'
+import { purchasingPermission } from '@lib/permissions'
+import runMiddleware from '@lib/api/api-helpers/run-middleware'
+
+function validateShoppingCart(item: ShoppingCartType) {
+  if (item.products.length === 0 ) {
+    return false
+  }
+
+  // TODO: validate data structure. Maybe use yup schema
+}
+
+async function createShoppingCart(req: Request, res) {
+
+  if (!purchasingPermission(req.currentUser, 'buy')) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
+  const shoppingCartObject: ShoppingCartType = {
+    ...req.body,
+  }
+
+  if (!validateShoppingCart(shoppingCartObject)) {
+    return res.status(400).json({
+      error: 'Malformed order entity'
+    })
+  }
+
+  try {
+    const result = await addShoppingCart(shoppingCartObject)
+
+    return res.status(200).json(result)
+  } catch (err) {
+    res.status(500).json({
+      error: 'Error creating shoppign cart ' + err.message
+    })
+  }
+
+
+}
+
+const getShoppingCarts = (req: Request, res) => {
+  const {
+    query: { userId, sortBy, sortOrder, from, limit, id },
+  } = req
+
+  const filterParams = { }
+
+  if (userId) {
+    filterParams['userId'] = userId
+  }
+
+  if (id) {
+    filterParams['id'] = id
+  }
+
+  const canAccessWithBuyerId = (userId && req.currentUser.id === userId) || purchasingPermission(req.currentUser, 'admin')
+  const canManageShoppingCarts = purchasingPermission(req.currentUser, 'admin')
+
+  const canAccess = canManageShoppingCarts || canAccessWithBuyerId
+
+  if (!canAccess) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
+  const paginationParams = {
+    sortBy,
+    sortOrder,
+    from,
+    limit,
+  }
+
+
+  return findShoppingCarts(filterParams, paginationParams)
+    .then(result => {
+      return res.status(200).json(result)
+    })
+}
+
+
+export default async (req: Request, res) => {
+
+  try {
+    // Connect to database
+    await connect()
+  } catch (e) {
+    logger('ERROR', 'Can not connect to db', e)
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+  try {
+    await runMiddleware(req, res, loadUser)
+  } catch (e) {
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+
+  await methods(req, res, {
+    get: getShoppingCarts,
+    post: createShoppingCart,
+  })
+}
diff --git a/pages/api/shopping-carts/[id]/get-prices.ts b/pages/api/shopping-carts/[id]/get-prices.ts
new file mode 100644
index 00000000..7f9ac507
--- /dev/null
+++ b/pages/api/shopping-carts/[id]/get-prices.ts
@@ -0,0 +1 @@
+// Fetch product prices and total
\ No newline at end of file
diff --git a/pages/api/shopping-carts/[id]/index.ts b/pages/api/shopping-carts/[id]/index.ts
new file mode 100644
index 00000000..9ba03ed5
--- /dev/null
+++ b/pages/api/shopping-carts/[id]/index.ts
@@ -0,0 +1,76 @@
+// GET, UPDATE; DELETE CART
+
+import {
+  addShoppingCart,
+  findOneShoppingCart,
+  findShoppingCarts,
+} from '@lib/api/entities/shopping-carts'
+
+import { Request } from '@lib/types'
+import { ShoppingCartType } from '@lib/types/entities/shopping-cart'
+import { connect } from '@lib/api/db'
+import { loadUser } from '@lib/api/middlewares'
+import logger from '@lib/logger'
+import methods from '@lib/api/api-helpers/methods'
+import { purchasingPermission } from '@lib/permissions'
+import runMiddleware from '@lib/api/api-helpers/run-middleware'
+
+function validateShoppingCart(item: ShoppingCartType) {
+  if (item.products.length === 0 ) {
+    return false
+  }
+
+  // TODO: validate data structure. Maybe use yup schema
+}
+
+
+
+export default async (req: Request, res) => {
+
+  try {
+    // Connect to database
+    await connect()
+  } catch (e) {
+    logger('ERROR', 'Can not connect to db', e)
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+  try {
+    await runMiddleware(req, res, loadUser)
+  } catch (e) {
+    return res.status(500).json({
+      error: e.message,
+    })
+  }
+
+  const cart = await findOneShoppingCart({
+    id: req.query.id
+  })
+
+  if (!cart) {
+    return res.status(404).json({
+      error: 'Not found'
+    })
+  }
+
+  const canAccess = (purchasingPermission(req.currentUser, 'buy') && cart.userId === req.currentUser.id) || purchasingPermission(req.currentUser, 'admin')
+
+  if (!canAccess) {
+    return res.status(401).json({
+      error: 'Unauthorized'
+    })
+  }
+
+  await methods(req, res, {
+    get: function() {
+      res.status(200).json({
+        cart
+      })
+    },
+    put: function() {
+
+    },
+  })
+}
diff --git a/pages/api/shopping-carts/[id]/remove-product.ts b/pages/api/shopping-carts/[id]/remove-product.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/api/shopping-carts/index.ts b/pages/api/shopping-carts/index.ts
index cd53b6d6..9b3f70fc 100644
--- a/pages/api/shopping-carts/index.ts
+++ b/pages/api/shopping-carts/index.ts
@@ -1,9 +1,9 @@
+import { Request, UserType } from '@lib/types'
 import {
   addShoppingCart,
   findShoppingCarts,
 } from '@lib/api/entities/shopping-carts'
 
-import { Request } from '@lib/types'
 import { ShoppingCartType } from '@lib/types/entities/shopping-cart'
 import { connect } from '@lib/api/db'
 import { loadUser } from '@lib/api/middlewares'
@@ -17,7 +17,20 @@ function validateShoppingCart(item: ShoppingCartType) {
     return false
   }
 
-  // TODO: validate data structure. Maybe use yup schema
+  let validProductAmount = true
+  let validProductId = true
+
+  item.products.forEach((p) => {
+    
+    if (!p.amount || p.amount < 1) {
+      validProductAmount = false
+    }
+
+    if (!p.productId || !p.productContentType) {
+      validProductId = false
+    }
+  })
+  return validProductAmount && validProductId
 }
 
 async function createShoppingCart(req: Request, res) {
@@ -33,16 +46,38 @@ async function createShoppingCart(req: Request, res) {
   }
 
   if (!validateShoppingCart(shoppingCartObject)) {
+    logger('DEBUG', 'Invalid shopping cart shape')
     return res.status(400).json({
-      error: 'Malformed order entity'
+      error: 'Malformed shopping cart entity'
+    })
+  }
+  
+  let validProductPermissions = true
+
+  shoppingCartObject.products.forEach((p) => {
+    if (!purchasingPermission(req.currentUser, 'buy', p.productContentType)) {
+      validProductPermissions = false
+    }
+  })
+
+  if (!validProductPermissions) {
+    logger('DEBUG', 'Invalid shopping cart permissions')
+
+    return res.status(401).json({
+      error: 'Invalid product types'
     })
   }
 
   try {
-    const result = await addShoppingCart(shoppingCartObject)
+    const result = await addShoppingCart({
+      ...shoppingCartObject,
+      userId: req.currentUser.id,
+    })
 
     return res.status(200).json(result)
   } catch (err) {
+    logger('ERROR', 'Error creating shoppign cart')
+
     res.status(500).json({
       error: 'Error creating shoppign cart ' + err.message
     })
diff --git a/pages/checkout/[cartId].tsx b/pages/checkout/[cartId].tsx
new file mode 100644
index 00000000..90b05c21
--- /dev/null
+++ b/pages/checkout/[cartId].tsx
@@ -0,0 +1,75 @@
+import Layout from '@components/layout/three-panels/layout'
+import LoadingPage from '@components/generic/loading/loading-page/loading-page'
+import fetch from '@lib/fetcher'
+import { purchasingPermission } from '@lib/permissions'
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import useSWR from 'swr'
+import { useUser } from '@lib/client/hooks'
+
+const CheckoutPage = () => {
+  const router = useRouter()
+  const { cartId } = router.query
+
+  // Check permissions to read
+  const currentUser = useUser()
+
+  const hasPermissionsToBuy = purchasingPermission(currentUser.user, 'buy')
+
+  // Load shopping cart
+
+  // Load store data
+  const { data, error } = useSWR(cartId ? `/api/shopping-carts/${cartId}` : null, fetch)
+  
+
+  useEffect(() => {
+    if (currentUser && !hasPermissionsToBuy) {
+      // Redirect to 404 if the user is not found
+      router.push('/404')
+    }
+  }, [hasPermissionsToBuy, currentUser])
+
+  
+
+  return (
+    <Layout title="Checkout" >
+      {!hasPermissionsToBuy ? (
+        <LoadingPage />
+      ) : (
+        <div className="checkout-wrapper">
+          <div className="checkout-content-wrapper">
+            <h2>
+              Customer
+            </h2>
+            <p>Login or use an email</p>
+
+            <h2>Shipping</h2>
+            <p>If logged use the shipping adddress otherwise enter new. Use billing address too</p>
+
+            <h2>Payment</h2>
+            <p>Credit card form an place order</p>
+          </div>
+          
+          <div className="shopping-cart-wrapper">
+            Shopping cart
+            { data && JSON.stringify(data)}
+          </div>
+        </div>
+      )}
+
+      <style jsx>
+        {`
+          .checkout-wrapper {
+            background: var(--edge-background);
+            border-top-left-radius: 16px;
+            border-top-right-radius: 16px;
+            overflow: hidden;
+          }
+          
+        `}
+      </style>
+    </Layout>
+  )
+}
+
+export default CheckoutPage
diff --git a/pages/content/[type]/[slug].tsx b/pages/content/[type]/[slug].tsx
index ffac04eb..8f26e6e2 100644
--- a/pages/content/[type]/[slug].tsx
+++ b/pages/content/[type]/[slug].tsx
@@ -9,7 +9,7 @@ import { appendInteractions } from '@lib/api/entities/interactions/interactions.
 import { connect } from '@lib/api/db'
 import { findOneContent } from '@lib/api/entities/content'
 import { getContentTypeDefinition } from '@lib/config'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import { onContentRead } from '@lib/api/hooks/content.hooks'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 
diff --git a/test/integration/api/comments/delete/comments.delete.test.js b/test/integration/api/comments/delete/comments.delete.test.js
index d713e103..dc8d8490 100644
--- a/test/integration/api/comments/delete/comments.delete.test.js
+++ b/test/integration/api/comments/delete/comments.delete.test.js
@@ -10,11 +10,11 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/comments/[id]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/comments')
 jest.mock('../../../../../lib/api/entities/activity')
diff --git a/test/integration/api/comments/read/comment-list.read.test.js b/test/integration/api/comments/read/comment-list.read.test.js
index 1e739ca1..34bbedf8 100644
--- a/test/integration/api/comments/read/comment-list.read.test.js
+++ b/test/integration/api/comments/read/comment-list.read.test.js
@@ -4,11 +4,11 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/comments'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/comments')
 
diff --git a/test/integration/api/comments/write/comments.write.test.js b/test/integration/api/comments/write/comments.write.test.js
index e7341596..0ae24659 100644
--- a/test/integration/api/comments/write/comments.write.test.js
+++ b/test/integration/api/comments/write/comments.write.test.js
@@ -1,9 +1,9 @@
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/comments'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 
 jest.mock('../../../../../edge.config', () => {
diff --git a/test/integration/api/content/delete/content.delete.test.js b/test/integration/api/content/delete/content.delete.test.js
index 717417a0..b8595c5a 100644
--- a/test/integration/api/content/delete/content.delete.test.js
+++ b/test/integration/api/content/delete/content.delete.test.js
@@ -8,11 +8,11 @@ import { deleteComment } from '../../../../../lib/api/entities/comments'
 import { deleteFile } from '../../../../../lib/api/storage'
 import { deleteInteractions } from '../../../../../lib/api/entities/interactions'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]/[slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/storage')
 jest.mock('../../../../../lib/api/entities/comments')
diff --git a/test/integration/api/content/read/content-list.cypher.read.test.js b/test/integration/api/content/read/content-list.cypher.read.test.js
index 0060c392..e62d7f50 100644
--- a/test/integration/api/content/read/content-list.cypher.read.test.js
+++ b/test/integration/api/content/read/content-list.cypher.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/content/[type]'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/content/read/content.cypher.read.test.js b/test/integration/api/content/read/content.cypher.read.test.js
index 745506e9..14b3cf22 100644
--- a/test/integration/api/content/read/content.cypher.read.test.js
+++ b/test/integration/api/content/read/content.cypher.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/content/[type]/[slug]'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/content/read/content.detail.read.test.js b/test/integration/api/content/read/content.detail.read.test.js
index f3ecd8a8..a13bbf23 100644
--- a/test/integration/api/content/read/content.detail.read.test.js
+++ b/test/integration/api/content/read/content.detail.read.test.js
@@ -1,9 +1,9 @@
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]/[slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 
 jest.mock('../../../../../edge.config', () => {
diff --git a/test/integration/api/content/read/content.read.test.js b/test/integration/api/content/read/content.read.test.js
index e6d532dc..49c8f24e 100644
--- a/test/integration/api/content/read/content.read.test.js
+++ b/test/integration/api/content/read/content.read.test.js
@@ -1,11 +1,11 @@
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 
 jest.mock('../../../../../edge.config', () => {
diff --git a/test/integration/api/content/write/content.create.test.js b/test/integration/api/content/write/content.create.test.js
index 4e516efc..70631455 100644
--- a/test/integration/api/content/write/content.create.test.js
+++ b/test/integration/api/content/write/content.create.test.js
@@ -1,12 +1,12 @@
 import { deleteFile, uploadFile } from '../../../../../lib/api/storage'
 
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import  handler from '../../../../../pages/api/content/[type]'
 import request from '../../requestHandler'
 
 jest.mock('../../../../../lib/api/storage')
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 
 jest.mock('../../../../../edge.config', () => {
diff --git a/test/integration/api/content/write/content.cypher.create.test.js b/test/integration/api/content/write/content.cypher.create.test.js
index 236ca41d..75b99b37 100644
--- a/test/integration/api/content/write/content.cypher.create.test.js
+++ b/test/integration/api/content/write/content.cypher.create.test.js
@@ -1,12 +1,12 @@
 import { describe, expect, test } from '@jest/globals'
 
+import { addContent } from '@lib/api/entities/content'
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/content/[type]'
 import request from '../../requestHandler'
-import { addContent } from '@lib/api/entities/content'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 jest.mock('@lib/api/entities/content')
 
diff --git a/test/integration/api/content/write/content.cypher.update.test.js b/test/integration/api/content/write/content.cypher.update.test.js
index 5291cfbd..32447853 100644
--- a/test/integration/api/content/write/content.cypher.update.test.js
+++ b/test/integration/api/content/write/content.cypher.update.test.js
@@ -1,13 +1,12 @@
 import { describe, expect, test } from '@jest/globals'
+import { findOneContent, updateOneContent } from '@lib/api/entities/content'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/content/[type]/[slug]'
-import { updateOneContent, findOneContent } from '@lib/api/entities/content'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 jest.mock('@lib/api/entities/content')
 
diff --git a/test/integration/api/content/write/content.edit.test.js b/test/integration/api/content/write/content.edit.test.js
index ae7f8553..172195ff 100644
--- a/test/integration/api/content/write/content.edit.test.js
+++ b/test/integration/api/content/write/content.edit.test.js
@@ -6,11 +6,11 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]/[slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/storage')
 
diff --git a/test/integration/api/content/write/content.purchasing.create.test.js b/test/integration/api/content/write/content.purchasing.create.test.js
index bca471fa..a14abe61 100644
--- a/test/integration/api/content/write/content.purchasing.create.test.js
+++ b/test/integration/api/content/write/content.purchasing.create.test.js
@@ -10,7 +10,7 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]'
 import request from '../../requestHandler'
 import {
@@ -18,7 +18,7 @@ import {
 } from 'yup'
 
 jest.mock('../../../../../lib/api/storage')
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 
diff --git a/test/integration/api/groups/delete/groups.comment.delete.test.js b/test/integration/api/groups/delete/groups.comment.delete.test.js
index b1502794..4e476459 100644
--- a/test/integration/api/groups/delete/groups.comment.delete.test.js
+++ b/test/integration/api/groups/delete/groups.comment.delete.test.js
@@ -5,12 +5,12 @@ import {
 } from '../../../../../lib/api/entities/comments'
 
 import { findOneContent } from '../../../../../lib/api/entities/content'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/comments/[id]'
 import { onCommentDeleted } from '../../../../../lib/api/hooks/comment.hooks'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/entities/comments')
 jest.mock('../../../../../lib/api/hooks/comment.hooks')
diff --git a/test/integration/api/groups/delete/groups.user.delete.test.js b/test/integration/api/groups/delete/groups.user.delete.test.js
index 6848263a..70c2f6bc 100644
--- a/test/integration/api/groups/delete/groups.user.delete.test.js
+++ b/test/integration/api/groups/delete/groups.user.delete.test.js
@@ -5,11 +5,11 @@ import {
 
 import { findOneUser } from '../../../../../lib/api/entities/users'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/groups/[type]/[slug]/users/[userId]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/entities/users')
diff --git a/test/integration/api/groups/read/group.cypher.read.test.js b/test/integration/api/groups/read/group.cypher.read.test.js
index 10188746..8a0b01cc 100644
--- a/test/integration/api/groups/read/group.cypher.read.test.js
+++ b/test/integration/api/groups/read/group.cypher.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/groups/[type]/[slug]'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/groups/read/groups-list.cypher.read.test.js b/test/integration/api/groups/read/groups-list.cypher.read.test.js
index 0cd6f053..5e4e5df8 100644
--- a/test/integration/api/groups/read/groups-list.cypher.read.test.js
+++ b/test/integration/api/groups/read/groups-list.cypher.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/groups/[type]'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/groups/read/groups.content.read.test.js b/test/integration/api/groups/read/groups.content.read.test.js
index 311ea83c..5f38c130 100644
--- a/test/integration/api/groups/read/groups.content.read.test.js
+++ b/test/integration/api/groups/read/groups.content.read.test.js
@@ -5,11 +5,11 @@ import {
 
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/api/entities/content')
 
 /*
diff --git a/test/integration/api/groups/read/groups.read.test.js b/test/integration/api/groups/read/groups.read.test.js
index c63bd3b1..a972f095 100644
--- a/test/integration/api/groups/read/groups.read.test.js
+++ b/test/integration/api/groups/read/groups.read.test.js
@@ -4,11 +4,11 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/groups/[type]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 
diff --git a/test/integration/api/groups/write/groups.comment.create.test.js b/test/integration/api/groups/write/groups.comment.create.test.js
index 18f54260..7a22fc78 100644
--- a/test/integration/api/groups/write/groups.comment.create.test.js
+++ b/test/integration/api/groups/write/groups.comment.create.test.js
@@ -6,11 +6,11 @@ import {
 } from '../../../../../lib/api/entities/content'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/comments'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/entities/comments')
 
diff --git a/test/integration/api/groups/write/groups.content.create.test.js b/test/integration/api/groups/write/groups.content.create.test.js
index 4bef23fc..01b23c49 100644
--- a/test/integration/api/groups/write/groups.content.create.test.js
+++ b/test/integration/api/groups/write/groups.content.create.test.js
@@ -1,11 +1,11 @@
 import { addContent, findOneContent } from '../../../../../lib/api/entities/content'
 
 import { fillContentWithDefaultData } from '../../../../../lib/api/entities/content/content.utils'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/entities/content/content.utils')
 
diff --git a/test/integration/api/groups/write/groups.content.edit.test.js b/test/integration/api/groups/write/groups.content.edit.test.js
index a7192585..f4a636db 100644
--- a/test/integration/api/groups/write/groups.content.edit.test.js
+++ b/test/integration/api/groups/write/groups.content.edit.test.js
@@ -1,10 +1,10 @@
 import { findOneContent, updateOneContent } from '../../../../../lib/api/entities/content'
 
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]/[slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/api/storage')
 jest.mock('../../../../../lib/api/entities/content')
 
diff --git a/test/integration/api/groups/write/groups.create.test.js b/test/integration/api/groups/write/groups.create.test.js
index 0d7c2d7a..234dd1f4 100644
--- a/test/integration/api/groups/write/groups.create.test.js
+++ b/test/integration/api/groups/write/groups.create.test.js
@@ -1,10 +1,10 @@
 import { addContent } from '../../../../../lib/api/entities/content'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/groups/[type]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 
diff --git a/test/integration/api/groups/write/groups.edit.test.js b/test/integration/api/groups/write/groups.edit.test.js
index fbe62499..dc38527e 100644
--- a/test/integration/api/groups/write/groups.edit.test.js
+++ b/test/integration/api/groups/write/groups.edit.test.js
@@ -5,11 +5,11 @@ import {
 } from '../../../../../lib/api/entities/content'
 
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/groups/[type]/[slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/storage')
diff --git a/test/integration/api/groups/write/groups.user.create.test.js b/test/integration/api/groups/write/groups.user.create.test.js
index 565cf03a..2a0477ef 100644
--- a/test/integration/api/groups/write/groups.user.create.test.js
+++ b/test/integration/api/groups/write/groups.user.create.test.js
@@ -5,11 +5,11 @@ import {
 
 import { findOneUser } from '../../../../../lib/api/entities/users'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/groups/[type]/[slug]/users'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/entities/users')
diff --git a/test/integration/api/groups/write/groups.user.update.test.js b/test/integration/api/groups/write/groups.user.update.test.js
index 26992611..53e7f774 100644
--- a/test/integration/api/groups/write/groups.user.update.test.js
+++ b/test/integration/api/groups/write/groups.user.update.test.js
@@ -5,11 +5,11 @@ import {
 
 import { findOneUser } from '../../../../../lib/api/entities/users'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/groups/[type]/[slug]/users/[userId]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/content')
 jest.mock('../../../../../lib/api/entities/users')
diff --git a/test/integration/api/interactions/delete/interactions.delete.test.js b/test/integration/api/interactions/delete/interactions.delete.test.js
index d5c6b21d..e68c9b56 100644
--- a/test/integration/api/interactions/delete/interactions.delete.test.js
+++ b/test/integration/api/interactions/delete/interactions.delete.test.js
@@ -1,13 +1,13 @@
 import {
-  findOneInteraction,
   deleteOneInteraction,
+  findOneInteraction,
 } from '@lib/api/entities/interactions'
-import { getSession } from '@lib/api/auth/iron'
-import handler from '@pages/api/interactions/[entity]/[entity-type]/[interaction-type]'
 
+import { getSession } from '@lib/api/auth/token'
+import handler from '@pages/api/interactions/[entity]/[entity-type]/[interaction-type]'
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/api/entities/interactions')
 
 const contentEntity = 'content'
diff --git a/test/integration/api/interactions/write/interactions.create.test.js b/test/integration/api/interactions/write/interactions.create.test.js
index 9371d944..32c9d45f 100644
--- a/test/integration/api/interactions/write/interactions.create.test.js
+++ b/test/integration/api/interactions/write/interactions.create.test.js
@@ -2,12 +2,12 @@ import {
   createInteraction,
   findOneInteraction,
 } from '@lib/api/entities/interactions'
-import { getSession } from '@lib/api/auth/iron'
-import handler from '@pages/api/interactions/[entity]/[entity-type]/[interaction-type]'
 
+import { getSession } from '@lib/api/auth/token'
+import handler from '@pages/api/interactions/[entity]/[entity-type]/[interaction-type]'
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/api/entities/interactions')
 
 const contentEntity = 'content'
diff --git a/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js b/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/test/integration/api/shopping-cart/shopping-cart.create.test.js b/test/integration/api/shopping-cart/shopping-cart.create.test.js
new file mode 100644
index 00000000..7071409d
--- /dev/null
+++ b/test/integration/api/shopping-cart/shopping-cart.create.test.js
@@ -0,0 +1,260 @@
+import {
+  addShoppingCart,
+} from '../../../../lib/api/entities/shopping-carts'
+import getPermissions from '../../../../lib/permissions/get-permissions'
+import {
+  getSession,
+} from '../../../../lib/api/auth/token'
+import handler from '../../../../pages/api/shopping-carts/index'
+import request from '../requestHandler'
+
+jest.mock('../../../../lib/api/auth/token')
+jest.mock('../../../../lib/permissions/get-permissions')
+jest.mock('../../../../lib/api/entities/shopping-carts')
+
+jest.mock('../../../../edge.config', () => {
+  const mockInitialPosts = []
+
+  const mockPostContentType = {
+    title: 'product',
+
+    slug: 'product',
+
+    slugGeneration: ['title', 'createdAt'],
+
+    permissions: {
+      read: ['PUBLIC'],
+      create: ['ADMIN', 'USER'],
+      update: ['ADMIN'],
+      delete: ['ADMIN'],
+      admin: ['ADMIN'],
+    },
+
+    publishing: {
+      draftMode: true,
+    },
+
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: ['USER'],
+        sell: ['SHOP', 'ADMIN'],
+        orders: ['ADMIN'],
+        admin: ['ADMIN']
+      }
+    },
+
+
+    comments: {
+      enabled: false,
+      permissions: {
+        read: ['PUBLIC'],
+        create: ['USER', 'ADMIN'],
+        update: ['ADMIN'],
+        delete: ['ADMIN'],
+        admin: ['ADMIN'],
+      },
+    },
+
+    fields: [{
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+        minlength: 8,
+        placeholder: 'Title',
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        label: 'Description',
+        minlength: 8,
+        placeholder: 'Description',
+      },
+      {
+        name: 'image',
+        type: 'img',
+        label: 'Image',
+        placeholder: 'Image',
+      },
+      {
+        name: 'file',
+        type: 'file',
+        label: 'File',
+        placeholder: 'File',
+      },
+      {
+        name: 'tags',
+        type: 'tags',
+        label: 'Tags',
+        placeholder: 'Tags',
+      },
+    ],
+  }
+
+  return {
+    __esModule: true,
+    getConfig: jest.fn().mockReturnValue({
+      title: 'A test',
+      description: 'A test',
+      // Content configuration
+      content: {
+        // Different content types defined
+        types: [mockPostContentType],
+        initialContent: mockInitialPosts,
+      },
+
+      user: {
+        roles: [{
+          label: 'user',
+          value: 'USER'
+        }],
+        newUserRoles: ['USER']
+      }
+    }),
+  }
+})
+
+describe('Shopping carts creation', () => {
+  beforeEach(() => {
+    addShoppingCart.mockReturnValue(Promise.resolve({
+      id: 'abc'
+    }))
+    getPermissions.mockReturnValue({
+      'purchasing.buy': ['USER'],
+      'purchasing.admin': ['ADMIN'],
+      'content.product.purchasing.buy': ['USER']
+    })
+  })
+
+  afterEach(() => {
+    getPermissions.mockReset()
+    getSession.mockReset()
+    addShoppingCart.mockReset()
+  })
+
+  test('Should not allow public users to create shopping carts', async () => {
+
+    getSession.mockReturnValueOnce(null)
+
+    const newShoppingCart = {
+      products: [{
+        id: 'abc',
+        type: 'product',
+        price: 0.0
+      }]
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newShoppingCart
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+
+  test('Should allow registered users to create shopping carts', async () => {
+
+    getSession.mockReturnValueOnce({
+      roles: ['USER'],
+      id: 'ada'
+    })
+
+    const newShoppingCart = {
+      products: [{
+        productId: 'abc',
+        productContentType: 'product',
+        amount: 1
+      }]
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newShoppingCart
+    });
+
+    expect(addShoppingCart).toHaveBeenCalledWith({
+      ...newShoppingCart,
+      userId: 'ada'
+    })
+
+    expect(res.statusCode).toBe(200)
+  })
+
+  test('Should return error if a product is not allowed', async () => {
+
+    getSession.mockReturnValueOnce({
+      roles: ['USER'],
+      id: 'ada'
+    })
+
+    const newShoppingCart = {
+      products: [{
+        productId: 'abc',
+        productContentType: 'product',
+        amount: 1
+      }, 
+      {
+        productId: 'abc',
+        productContentType: 'post',
+        amount: 1
+      }]
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newShoppingCart
+    });
+
+   
+    expect(res.statusCode).toBe(401)
+  })
+  test('Should return error if a product is malformed', async () => {
+
+    getSession.mockReturnValueOnce({
+      roles: ['USER'],
+      id: 'ada'
+    })
+
+    const newShoppingCart = {
+      products: [{
+        productId: 'abc',
+        productContentType: 'product',
+        amount: 0 // Invalid amount
+      }]
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newShoppingCart
+    });
+
+   
+    expect(res.statusCode).toBe(400)
+  })
+  
+})
\ No newline at end of file
diff --git a/test/integration/api/shopping-cart/shopping-cart.delete.test.js b/test/integration/api/shopping-cart/shopping-cart.delete.test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/test/integration/api/shopping-cart/shopping-cart.read.test.js b/test/integration/api/shopping-cart/shopping-cart.read.test.js
new file mode 100644
index 00000000..0fa3d90a
--- /dev/null
+++ b/test/integration/api/shopping-cart/shopping-cart.read.test.js
@@ -0,0 +1,241 @@
+import {
+  addShoppingCart,
+  findShoppingCarts,
+} from '../../../../lib/api/entities/shopping-carts'
+
+import getPermissions from '../../../../lib/permissions/get-permissions'
+import {
+  getSession,
+} from '../../../../lib/api/auth/token'
+import handler from '../../../../pages/api/shopping-carts/index'
+import request from '../requestHandler'
+
+jest.mock('../../../../lib/api/auth/token')
+jest.mock('../../../../lib/permissions/get-permissions')
+jest.mock('../../../../lib/api/entities/shopping-carts')
+
+jest.mock('../../../../edge.config', () => {
+  const mockInitialPosts = []
+
+  const mockPostContentType = {
+    title: 'product',
+
+    slug: 'product',
+
+    slugGeneration: ['title', 'createdAt'],
+
+    permissions: {
+      read: ['PUBLIC'],
+      create: ['ADMIN', 'USER'],
+      update: ['ADMIN'],
+      delete: ['ADMIN'],
+      admin: ['ADMIN'],
+    },
+
+    publishing: {
+      draftMode: true,
+    },
+
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: ['USER'],
+        sell: ['SHOP', 'ADMIN'],
+        orders: ['ADMIN'],
+        admin: ['ADMIN']
+      }
+    },
+
+
+    comments: {
+      enabled: false,
+      permissions: {
+        read: ['PUBLIC'],
+        create: ['USER', 'ADMIN'],
+        update: ['ADMIN'],
+        delete: ['ADMIN'],
+        admin: ['ADMIN'],
+      },
+    },
+
+    fields: [{
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+        minlength: 8,
+        placeholder: 'Title',
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        label: 'Description',
+        minlength: 8,
+        placeholder: 'Description',
+      },
+      {
+        name: 'image',
+        type: 'img',
+        label: 'Image',
+        placeholder: 'Image',
+      },
+      {
+        name: 'file',
+        type: 'file',
+        label: 'File',
+        placeholder: 'File',
+      },
+      {
+        name: 'tags',
+        type: 'tags',
+        label: 'Tags',
+        placeholder: 'Tags',
+      },
+    ],
+  }
+
+  return {
+    __esModule: true,
+    getConfig: jest.fn().mockReturnValue({
+      title: 'A test',
+      description: 'A test',
+      // Content configuration
+      content: {
+        // Different content types defined
+        types: [mockPostContentType],
+        initialContent: mockInitialPosts,
+      },
+
+      user: {
+        roles: [{
+          label: 'user',
+          value: 'USER'
+        }],
+        newUserRoles: ['USER']
+      }
+    }),
+  }
+})
+
+describe('Shopping carts creation', () => {
+  beforeEach(() => {
+    findShoppingCarts.mockReturnValue(Promise.resolve([]))
+    getPermissions.mockReturnValue({
+      'purchasing.buy': ['USER'],
+      'purchasing.admin': ['ADMIN'],
+      'content.product.purchasing.buy': ['USER']
+    })
+  })
+
+  afterEach(() => {
+    getPermissions.mockReset()
+    getSession.mockReset()
+    findShoppingCarts.mockReset()
+  })
+
+  test('Should not allow public users to read shopping carts', async () => {
+
+    getSession.mockReturnValueOnce(null)
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should not allow user to read other users  shopping carts', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: 'xxxxxx'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should not allow user to fetch shopping carts without userId', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should  allow ADMIN to fetch shopping carts without userId', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['ADMIN']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    const calls = findShoppingCarts.mock.calls
+    expect(calls[0][0]).not.toHaveProperty('userId')
+    expect(res.statusCode).toBe(200)
+  })
+
+  test('Should allow users to fetch their own shopping carts', async () => {
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: 'abc'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(findShoppingCarts).toHaveBeenCalledWith({
+      userId: 'abc'
+    }, {
+      from: undefined,
+      limit: undefined,
+      sortBy: undefined,
+      sortOrder: undefined
+    })
+    expect(res.statusCode).toBe(200)
+  })
+})
\ No newline at end of file
diff --git a/test/integration/api/shopping-cart/shopping-cart.update.test.js b/test/integration/api/shopping-cart/shopping-cart.update.test.js
new file mode 100644
index 00000000..298c78f5
--- /dev/null
+++ b/test/integration/api/shopping-cart/shopping-cart.update.test.js
@@ -0,0 +1,242 @@
+import {
+  addShoppingCart,
+  findShoppingCarts,
+  updateOneShoppingCart,
+} from '../../../../lib/api/entities/shopping-carts'
+
+import getPermissions from '../../../../lib/permissions/get-permissions'
+import {
+  getSession,
+} from '../../../../lib/api/auth/token'
+import handler from '../../../../pages/api/shopping-carts/index'
+import request from '../requestHandler'
+
+jest.mock('../../../../lib/api/auth/token')
+jest.mock('../../../../lib/permissions/get-permissions')
+jest.mock('../../../../lib/api/entities/shopping-carts')
+
+jest.mock('../../../../edge.config', () => {
+  const mockInitialPosts = []
+
+  const mockPostContentType = {
+    title: 'product',
+
+    slug: 'product',
+
+    slugGeneration: ['title', 'createdAt'],
+
+    permissions: {
+      read: ['PUBLIC'],
+      create: ['ADMIN', 'USER'],
+      update: ['ADMIN'],
+      delete: ['ADMIN'],
+      admin: ['ADMIN'],
+    },
+
+    publishing: {
+      draftMode: true,
+    },
+
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: ['USER'],
+        sell: ['SHOP', 'ADMIN'],
+        orders: ['ADMIN'],
+        admin: ['ADMIN']
+      }
+    },
+
+
+    comments: {
+      enabled: false,
+      permissions: {
+        read: ['PUBLIC'],
+        create: ['USER', 'ADMIN'],
+        update: ['ADMIN'],
+        delete: ['ADMIN'],
+        admin: ['ADMIN'],
+      },
+    },
+
+    fields: [{
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+        minlength: 8,
+        placeholder: 'Title',
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        label: 'Description',
+        minlength: 8,
+        placeholder: 'Description',
+      },
+      {
+        name: 'image',
+        type: 'img',
+        label: 'Image',
+        placeholder: 'Image',
+      },
+      {
+        name: 'file',
+        type: 'file',
+        label: 'File',
+        placeholder: 'File',
+      },
+      {
+        name: 'tags',
+        type: 'tags',
+        label: 'Tags',
+        placeholder: 'Tags',
+      },
+    ],
+  }
+
+  return {
+    __esModule: true,
+    getConfig: jest.fn().mockReturnValue({
+      title: 'A test',
+      description: 'A test',
+      // Content configuration
+      content: {
+        // Different content types defined
+        types: [mockPostContentType],
+        initialContent: mockInitialPosts,
+      },
+
+      user: {
+        roles: [{
+          label: 'user',
+          value: 'USER'
+        }],
+        newUserRoles: ['USER']
+      }
+    }),
+  }
+})
+
+describe('Shopping carts update', () => {
+  beforeEach(() => {
+    findShoppingCarts.mockReturnValue(Promise.resolve([]))
+    getPermissions.mockReturnValue({
+      'purchasing.buy': ['USER'],
+      'purchasing.admin': ['ADMIN'],
+      'content.product.purchasing.buy': ['USER']
+    })
+  })
+
+  afterEach(() => {
+    getPermissions.mockReset()
+    getSession.mockReset()
+    findShoppingCarts.mockReset()
+  })
+
+  test('Should not allow public users to update shopping carts', async () => {
+
+    getSession.mockReturnValueOnce(null)
+
+    const res = await request(handler, {
+      method: 'PUT',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should not allow user to read other users  shopping carts', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: 'xxxxxx'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should not allow user to fetch shopping carts without userId', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should  allow ADMIN to fetch shopping carts without userId', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['ADMIN']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    const calls = findShoppingCarts.mock.calls
+    expect(calls[0][0]).not.toHaveProperty('userId')
+    expect(res.statusCode).toBe(200)
+  })
+
+  test('Should allow users to fetch their own shopping carts', async () => {
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: 'abc'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(findShoppingCarts).toHaveBeenCalledWith({
+      userId: 'abc'
+    }, {
+      from: undefined,
+      limit: undefined,
+      sortBy: undefined,
+      sortOrder: undefined
+    })
+    expect(res.statusCode).toBe(200)
+  })
+})
\ No newline at end of file
diff --git a/test/integration/api/statistic/statistic.read.test.js b/test/integration/api/statistic/statistic.read.test.js
index f4f86dcf..a89ff6c8 100644
--- a/test/integration/api/statistic/statistic.read.test.js
+++ b/test/integration/api/statistic/statistic.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/statistic'
-
 import request from '../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/superSearch/superSearch.read.test.js b/test/integration/api/superSearch/superSearch.read.test.js
index acd87097..226d9706 100644
--- a/test/integration/api/superSearch/superSearch.read.test.js
+++ b/test/integration/api/superSearch/superSearch.read.test.js
@@ -1,11 +1,10 @@
 import { findAll } from '@lib/api/entities/superSearch'
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/super-search'
-
 import request from '../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 jest.mock('@lib/api/entities/superSearch')
 
diff --git a/test/integration/api/users/delete/user.delete.test.js b/test/integration/api/users/delete/user.delete.test.js
index 8d11c493..080babf4 100644
--- a/test/integration/api/users/delete/user.delete.test.js
+++ b/test/integration/api/users/delete/user.delete.test.js
@@ -25,11 +25,11 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/users/[...slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/storage')
 jest.mock('../../../../../lib/api/entities/comments')
diff --git a/test/integration/api/users/read/user.cypher.read.test.js b/test/integration/api/users/read/user.cypher.read.test.js
index d206105d..96151be7 100644
--- a/test/integration/api/users/read/user.cypher.read.test.js
+++ b/test/integration/api/users/read/user.cypher.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/users/[...slug]'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/users/read/users-list.cypher.read.test.js b/test/integration/api/users/read/users-list.cypher.read.test.js
index 517d5c3c..c1dc21ee 100644
--- a/test/integration/api/users/read/users-list.cypher.read.test.js
+++ b/test/integration/api/users/read/users-list.cypher.read.test.js
@@ -1,12 +1,11 @@
 import { describe, expect, test } from '@jest/globals'
 
 import getPermissions from '@lib/permissions/get-permissions'
-import { getSession } from '@lib/api/auth/iron'
+import { getSession } from '@lib/api/auth/token'
 import handler from '@pages/api/users'
-
 import request from '../../requestHandler'
 
-jest.mock('@lib/api/auth/iron')
+jest.mock('@lib/api/auth/token')
 jest.mock('@lib/permissions/get-permissions')
 
 jest.mock('@rootFolder/edge.config', () => {
diff --git a/test/integration/api/users/read/users-list.read.test.js b/test/integration/api/users/read/users-list.read.test.js
index 283609c0..60aa3496 100644
--- a/test/integration/api/users/read/users-list.read.test.js
+++ b/test/integration/api/users/read/users-list.read.test.js
@@ -1,10 +1,10 @@
 import { findUsers } from '../../../../../lib/api/entities/users'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/users'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/users')
 
diff --git a/test/integration/api/users/read/users.read.test.js b/test/integration/api/users/read/users.read.test.js
index 87e3bc86..98a2a45a 100644
--- a/test/integration/api/users/read/users.read.test.js
+++ b/test/integration/api/users/read/users.read.test.js
@@ -4,11 +4,11 @@ import {
 import getPermissions from '../../../../../lib/permissions/get-permissions'
 import {
   getSession,
-} from '../../../../../lib/api/auth/iron'
+} from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/users/[...slug]'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/users')
 
diff --git a/test/integration/api/users/write/users.edit.test.js b/test/integration/api/users/write/users.edit.test.js
index 53f67f4b..536c8a7e 100644
--- a/test/integration/api/users/write/users.edit.test.js
+++ b/test/integration/api/users/write/users.edit.test.js
@@ -5,13 +5,13 @@ import {
 
 import { deleteFile } from '../../../../../lib/api/storage'
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/users/[...slug]'
 import request from '../../requestHandler'
 import { sendVerifyEmail } from '../../../../../lib/email'
 
 jest.mock('../../../../../lib/email')
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 jest.mock('../../../../../lib/api/entities/users')
 jest.mock('../../../../../lib/api/storage')
diff --git a/test/integration/api/users/write/users.register.test.js b/test/integration/api/users/write/users.register.test.js
index 3759a424..8f76b1e5 100644
--- a/test/integration/api/users/write/users.register.test.js
+++ b/test/integration/api/users/write/users.register.test.js
@@ -1,9 +1,9 @@
 import getPermissions from '../../../../../lib/permissions/get-permissions'
-import { getSession } from '../../../../../lib/api/auth/iron'
+import { getSession } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/users'
 import request from '../../requestHandler'
 
-jest.mock('../../../../../lib/api/auth/iron')
+jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
 
 jest.mock('../../../../../edge.config', () => ({
diff --git a/tsconfig.json b/tsconfig.json
index 8d369af9..dfb615e9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,6 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "baseUrl": "./",
-    "downlevelIteration": true,
     "paths": {
       "@lib/*": ["lib/*"],
       "@components/*": ["components/*"],
@@ -23,5 +22,5 @@
     }
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "test/integration/api/shopping-cart/shopping-cart.create.test.js"]
 }

From ea52518ff0a6caf514cbff00573784e72d847cb0 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sun, 28 Feb 2021 17:29:33 +0100
Subject: [PATCH 10/26] Adding shopping cart support

---
 .../purchasing-product-form.tsx               | 255 ++++--------------
 components/layout/header/user-header.tsx      |  28 +-
 pages/shopping-cart/[userId].tsx              |  78 ++++++
 .../shopping-cart-detail.read.test.js         | 241 +++++++++++++++++
 4 files changed, 386 insertions(+), 216 deletions(-)
 create mode 100644 pages/shopping-cart/[userId].tsx

diff --git a/components/content/read-content/content-detail-view/purchasing-product-form.tsx b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
index 8112abdd..c2bbc1c7 100644
--- a/components/content/read-content/content-detail-view/purchasing-product-form.tsx
+++ b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
@@ -1,101 +1,9 @@
 import { PurchashingOptionsType, PurchasingVariantType } from '@lib/types/purchasing'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import Button from '@components/generic/button/button'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
 
-type PropTypesVariantItem = {
-  variant: PurchasingVariantType,
-  onChange: (val: PurchasingVariantType) => void,
-  onClickRemove: () => void
-}
-
-function VariantItem({
-  variant,
-  onChange,
-  onClickRemove
-}: PropTypesVariantItem) {
-
-  const onClickRemoveButton = (ev: React.MouseEvent<HTMLButtonElement>)  => {
-    ev.preventDefault()
-    ev.stopPropagation()
-    onClickRemove()
-
-  }
-  return (
-    <>
-      <div className="variant-item">
-        <DynamicFieldEdit
-          name="default"
-          value={variant.default}
-          onChange={(val) => onChange({
-            ...variant,
-            default: val
-          })}
-          field={{
-            name: 'default',
-            type: 'boolean',
-            label: 'This is the default variant',
-          }} />
-        <DynamicFieldEdit
-          name="name"
-          value={variant.name}
-          onChange={(val) => onChange({
-            ...variant,
-            name: val
-          })}
-          field={{
-            name: 'name',
-            type: 'text',
-            placeholder: 'Size M',
-            label: 'name',
-            min: 0
-          }} />
-        <DynamicFieldEdit
-          name="stock"
-          value={variant.stock}
-          onChange={(val) => onChange({
-            ...variant,
-            stock: val
-          })}
-          field={{
-            name: 'stock',
-            type: 'number',
-            label: 'stock',
-            min: 0
-          }} />
-        <DynamicFieldEdit
-          name="price"
-          value={variant.price}
-          onChange={(val) => onChange({
-            ...variant,
-            price: val
-          })}
-          field={{
-            name: 'price',
-            type: 'number',
-            label: 'price',
-            placeholder: 0.4,
-            min: 0.1,
-            max: 10000
-          }} />
-
-          <Button onClick={onClickRemoveButton}>Remove</Button>
-      </div>
-      <style jsx>{
-        `
-        .variant-item {
-          padding: var(--edge-gap);
-          border: 1px solid var(--accents-3);
-          margin: var(--edge-gap);
-        }
-        `
-      }</style>
-    </>
-  )
-}
-
-
 type PropTypes = {
   value: PurchashingOptionsType,
   onChange: (val: PurchashingOptionsType) => void
@@ -108,130 +16,61 @@ export default function PurchasingProductForm({
 }: PropTypes) {
   const [variants, setVariants] = useState([])
 
-  const addVariant = (ev: React.MouseEvent<HTMLButtonElement>)  => {
-    ev.preventDefault()
-    ev.stopPropagation()
+  const [selectedVariant, setSelectedVariant] = useState('')
+  const [amount, setAmount] = useState(1)
 
-    setVariants([...variants, {
-      name: '',
-      price: 0.0,
-      stock: 0,
-      default: false
-    }])
-  }
+  useEffect(() => {
+    setSelectedVariant(value.options.find(i => i.default).name)
+  }, [value])
 
-  const onChangeVariant = (index, value: PurchasingVariantType) => {
-    setVariants(variants.map((item, i) => {
-      return index === i ? {
-        ...value
-      } : {
-          ...item,
-          default: value.default === true ? false: item.default
-        }
-    }))
-  }
+  const variant = selectedVariant ? value.options.find(i => i.name === name): null
+
+  const totalPrice = variant ? variant.price * amount : value.price * amount
+  const currency = '€'
+
+  const addToCart = () => {
 
-  const onRemoveVariant = (index) => {
-    setVariants(variants.filter((item, i) => {
-      return i !== index
-    }))
   }
 
   return (
     <>
-      <div className="purchasing-options">
-        <h3>Purchashing Options</h3>
-        <DynamicFieldEdit
-          name="multiple"
-          value={value.multiple}
-          onChange={(val) => onChange({
-            ...value,
-            multiple: val
-          })}
-          field={{
-            name: 'multiple',
-            type: 'boolean',
-            label: 'Allow multiple items',
-          }} />
-        <DynamicFieldEdit
-          name="sku"
-          value={value.sku}
-          onChange={(val) => onChange({
-            ...value,
-            sku: val
-          })}
-          field={{
-            name: 'sku',
-            type: 'text',
-            label: 'SKU',
-          }} />
-        <DynamicFieldEdit
-          name="stock"
-          value={value.stock}
-          onChange={(val) => onChange({
-            ...value,
-            stock: val
-          })}
-          field={{
-            name: 'stock',
-            type: 'number',
-            label: 'stock',
-            min: 0
-          }} />
-
-        <div className="form-row">
-          <div className="input-wr">
-            <DynamicFieldEdit
-              name="price"
-              value={value.price}
-              onChange={(val) => onChange({
-                ...value,
-                price: val
-              })}
-              field={{
-                name: 'price',
-                type: 'number',
-                label: 'price',
-                min: 0.1,
-                max: 10000
-              }} />
-          </div>
-          <div className="input-wr">
-            <DynamicFieldEdit
-              name="currency"
-              value={value.currency}
-              onChange={(val) => onChange({
-                ...value,
-                currency: val
-              })}
-              field={{
-                name: 'currency',
-                type: 'select',
-                label: 'Currency',
-                options: [{
-                  value: 'euro',
-                  label: '€'
-                }, {
-                  value: 'dollar',
-                  label: '$'
-                }, {
-                  value: 'pound',
-                  label: '£'
-                }],
-                description: 'Note: All values will be transformed to dollars at the moment of the payment.'
-              }} />
-          </div>
+      <div className="purchasing-product-form">
+        <h3>Purchase item</h3>
+        <div className="variant-selector">
+          <DynamicFieldEdit
+            name="variant"
+            value={selectedVariant}
+            onChange={(val) => setSelectedVariant(name)}
+            field={{
+              name: 'Type',
+              type: 'select',
+              label: 'Type',
+              options: value.options.map(i => {
+                return {
+                  label: i.name,
+                  value: i.name
+                }
+              })
+            }} />
+
+          <DynamicFieldEdit
+            name="amount"
+            value={amount}
+            onChange={(val) => setAmount(val)}
+            field={{
+              name: 'Amount',
+              type: 'number',
+              label: 'Amount',
+              min: 1,
+              max: 10000
+            }} />
+        </div>
+        <div className="price">
+          {totalPrice} {currency}
         </div>
 
-        <div className="divider"></div>
-        <h4>Product Variants</h4>
-        <p>You can add diferent options for this product. For example: Sizes S,X,M,L with different prices and stock.</p>
-        {variants.map((item, index) => {
-          return <div className="variant" key={`variant-${index}`}>
-            <VariantItem variant={item} onChange={(val) => onChangeVariant(index, val)} onClickRemove={() => onRemoveVariant(index)} />
-          </div>
-        })}
-        <Button onClick={addVariant}>Add variant</Button>
+        
+        <Button onClick={addToCart}>Add to cart</Button>
       </div>
       <style jsx>{
         `
diff --git a/components/layout/header/user-header.tsx b/components/layout/header/user-header.tsx
index b8cea5b7..018ec9fb 100644
--- a/components/layout/header/user-header.tsx
+++ b/components/layout/header/user-header.tsx
@@ -1,14 +1,14 @@
-import React, { useState, memo } from 'react'
-import Link from 'next/link'
-
+import React, { memo, useState } from 'react'
+import { hasPermission, purchasingPermission } from '@lib/permissions'
 import { useContentTypes, useGroupTypes } from '@lib/client/hooks'
-import { hasPermission } from '@lib/permissions'
+
 import Avatar from '@components/user/avatar/avatar'
 import Button from '@components/generic/button/button'
 import DropdownMenu from '@components/generic/dropdown-menu/dropdown-menu'
-import ThemeSelector from '@components/generic/theme-selector/theme-selector'
+import Link from 'next/link'
 import SiteMenu from '@components/generic/site-menu/site-menu'
 import { SuperSearch } from '@components/generic/super-search'
+import ThemeSelector from '@components/generic/theme-selector/theme-selector'
 
 function UserHeader(props) {
   const user = props.user
@@ -21,9 +21,9 @@ function UserHeader(props) {
     setLoading(true)
 
     // Invalidate caches for service worker
-    await caches.keys().then(function(keyList) {
+    await caches.keys().then(function (keyList) {
       return Promise.all(
-        keyList.map(function(key) {
+        keyList.map(function (key) {
           return caches.delete(key)
         })
       )
@@ -39,10 +39,22 @@ function UserHeader(props) {
       {user && (
         <div className="edge-user-actions-logged">
           {/*User Actions Buttons*/}
+          {
+            purchasingPermission(user, 'buy') && (
+              <div className="edge-user-actions-buttons">
+                <Link href={`/shopping-cart/${user.id}`}>
+                  <a title="Shopping cart">
+                    <i className="las la-shopping-cart"></i>
+                  </a>
+                </Link>
+              </div>
+            )
+
+          }
           <div className="edge-user-actions-buttons">
             <Link href={`/settings/${user.id}`}>
               <a title="Settings">
-                <img src="/icons/icon-configuration.svg" alt="configuration" />
+                <i className="las la-cog"></i>
               </a>
             </Link>
           </div>
diff --git a/pages/shopping-cart/[userId].tsx b/pages/shopping-cart/[userId].tsx
new file mode 100644
index 00000000..d5b091ca
--- /dev/null
+++ b/pages/shopping-cart/[userId].tsx
@@ -0,0 +1,78 @@
+import { Tabs, useTab } from '@components/generic/tabs'
+import { purchasingPermission, userPermission } from '@lib/permissions'
+import { useContentTypes, useGroupTypes, useUser } from '@lib/client/hooks'
+import { useEffect, useMemo } from 'react'
+
+import Button from '@components/generic/button/button'
+import ContentListView from '@components/content/read-content/content-list-view/content-list-view'
+import CoverImage from '@components/user/cover-image/cover-image'
+import GroupListView from '@components/groups/read/group-list-view/group-list-view'
+import Layout from '@components/layout/three-panels/layout'
+import LoadingPage from '@components/generic/loading/loading-page/loading-page'
+import ToolBar from '@components/generic/toolbar/toolbar'
+import UserActivity from '@components/user/activity/activity'
+import UserProfileBox from '@components/user/user-profile-box/user-profile-box'
+import config from '@lib/config'
+import fetch from '@lib/fetcher'
+import { useRouter } from 'next/router'
+import useSWR from 'swr'
+
+const ShoppingCart = () => {
+  const router = useRouter()
+  const { userId } = router.query
+
+  // Check permissions to read
+  const currentUser = useUser()
+
+  const hasPermissionsToRead = currentUser.user && currentUser.user.id === userId as string
+  const canManageOrders = purchasingPermission(currentUser.user, 'orders')
+  const canAccess = hasPermissionsToRead && canManageOrders
+
+  // Load profile data
+  const { data, error } = useSWR(userId ? `/api/shopping-carts/${userId}` : null, fetch)
+
+  // Protect the URL and redirect to 404 if not allowed
+  useEffect(() => {
+    if (currentUser.finished) {
+      if (!canAccess) {
+        // Redirect to 404 if the user is not found
+        router.push('/404')
+      }
+    }
+  }, [canAccess, currentUser])
+
+  return (
+    <Layout title="Shopping Cart" panelUser={<ToolBar />}>
+      {!canAccess ? (
+        <LoadingPage />
+      ) : (
+        <div className="page-wrapper">
+          <h2>My shopping cart</h2>
+          
+          <div className="shopping-cart-wrapper">
+            {!data && <div className="empty-shopping-cart">
+              Your shopping cart is empty. Please, continue shopping.
+            </div>}
+            { data && <div className="shopping-cart">
+              {JSON.stringify(data, null, 2)}
+            </div>}
+          </div>
+
+          <div className="actions">
+            <div className="action-wr">
+              <Button>Continue to checkout</Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <style jsx>
+        {`
+          
+        `}
+      </style>
+    </Layout>
+  )
+}
+
+export default ShoppingCart
diff --git a/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js b/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
index e69de29b..64cdf48a 100644
--- a/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
+++ b/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
@@ -0,0 +1,241 @@
+import {
+  addShoppingCart,
+  findShoppingCarts,
+} from '../../../../lib/api/entities/shopping-carts'
+
+import getPermissions from '../../../../lib/permissions/get-permissions'
+import {
+  getSession,
+} from '../../../../lib/api/auth/token'
+import handler from '../../../../pages/api/shopping-carts/index'
+import request from '../requestHandler'
+
+jest.mock('../../../../lib/api/auth/token')
+jest.mock('../../../../lib/permissions/get-permissions')
+jest.mock('../../../../lib/api/entities/shopping-carts/[id]/index')
+
+jest.mock('../../../../edge.config', () => {
+  const mockInitialPosts = []
+
+  const mockPostContentType = {
+    title: 'product',
+
+    slug: 'product',
+
+    slugGeneration: ['title', 'createdAt'],
+
+    permissions: {
+      read: ['PUBLIC'],
+      create: ['ADMIN', 'USER'],
+      update: ['ADMIN'],
+      delete: ['ADMIN'],
+      admin: ['ADMIN'],
+    },
+
+    publishing: {
+      draftMode: true,
+    },
+
+    purchasing: {
+      enabled: true,
+      permissions: {
+        buy: ['USER'],
+        sell: ['SHOP', 'ADMIN'],
+        orders: ['ADMIN'],
+        admin: ['ADMIN']
+      }
+    },
+
+
+    comments: {
+      enabled: false,
+      permissions: {
+        read: ['PUBLIC'],
+        create: ['USER', 'ADMIN'],
+        update: ['ADMIN'],
+        delete: ['ADMIN'],
+        admin: ['ADMIN'],
+      },
+    },
+
+    fields: [{
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+        minlength: 8,
+        placeholder: 'Title',
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        label: 'Description',
+        minlength: 8,
+        placeholder: 'Description',
+      },
+      {
+        name: 'image',
+        type: 'img',
+        label: 'Image',
+        placeholder: 'Image',
+      },
+      {
+        name: 'file',
+        type: 'file',
+        label: 'File',
+        placeholder: 'File',
+      },
+      {
+        name: 'tags',
+        type: 'tags',
+        label: 'Tags',
+        placeholder: 'Tags',
+      },
+    ],
+  }
+
+  return {
+    __esModule: true,
+    getConfig: jest.fn().mockReturnValue({
+      title: 'A test',
+      description: 'A test',
+      // Content configuration
+      content: {
+        // Different content types defined
+        types: [mockPostContentType],
+        initialContent: mockInitialPosts,
+      },
+
+      user: {
+        roles: [{
+          label: 'user',
+          value: 'USER'
+        }],
+        newUserRoles: ['USER']
+      }
+    }),
+  }
+})
+
+describe('Shopping carts creation', () => {
+  beforeEach(() => {
+    findShoppingCarts.mockReturnValue(Promise.resolve([]))
+    getPermissions.mockReturnValue({
+      'purchasing.buy': ['USER'],
+      'purchasing.admin': ['ADMIN'],
+      'content.product.purchasing.buy': ['USER']
+    })
+  })
+
+  afterEach(() => {
+    getPermissions.mockReset()
+    getSession.mockReset()
+    findShoppingCarts.mockReset()
+  })
+
+  test('Should not allow public users to read shopping carts', async () => {
+
+    getSession.mockReturnValueOnce(null)
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should not allow user to read other users  shopping carts', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: 'xxxxxx'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should not allow user to fetch shopping carts without userId', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(res.statusCode).toBe(401)
+  })
+
+  test('Should  allow ADMIN to fetch shopping carts without userId', async () => {
+
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['ADMIN']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: ''
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    const calls = findShoppingCarts.mock.calls
+    expect(calls[0][0]).not.toHaveProperty('userId')
+    expect(res.statusCode).toBe(200)
+  })
+
+  test('Should allow users to fetch their own shopping carts', async () => {
+    getSession.mockReturnValueOnce({
+      id: 'abc',
+      roles: ['USER']
+    })
+
+    const res = await request(handler, {
+      method: 'GET',
+      query: {
+        userId: 'abc'
+      },
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    });
+
+    expect(findShoppingCarts).toHaveBeenCalledWith({
+      userId: 'abc'
+    }, {
+      from: undefined,
+      limit: undefined,
+      sortBy: undefined,
+      sortOrder: undefined
+    })
+    expect(res.statusCode).toBe(200)
+  })
+})
\ No newline at end of file

From c27248eb00985ad53d908f70a586a88b1c4a1c21 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Mon, 1 Mar 2021 12:21:42 +0100
Subject: [PATCH 11/26] start conceptualizating shipping fees

---
 .../content-form/purchasing-options-form.tsx  |  37 +++++-
 lib/types/purchasing.ts                       |   6 +
 pages/api/shopping-carts/[id]/add-product.ts  | 120 ------------------
 pages/api/shopping-carts/[id]/get-prices.ts   |   1 -
 .../api/shopping-carts/[id]/remove-product.ts |   0
 .../{[id] => [userId]}/index.ts               |  14 +-
 .../shopping-cart-detail.read.test.js         |   2 +-
 7 files changed, 51 insertions(+), 129 deletions(-)
 delete mode 100644 pages/api/shopping-carts/[id]/add-product.ts
 delete mode 100644 pages/api/shopping-carts/[id]/get-prices.ts
 delete mode 100644 pages/api/shopping-carts/[id]/remove-product.ts
 rename pages/api/shopping-carts/{[id] => [userId]}/index.ts (84%)

diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index 20e56b3a..092c4410 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -1,4 +1,4 @@
-import { PurchashingOptionsType, PurchasingVariantType } from '@lib/types/purchasing'
+import { PurchashingOptionsType, PurchasingVariantType, ShippingFeeType } from '@lib/types/purchasing'
 import React, { useState } from 'react'
 
 import Button from '@components/generic/button/button'
@@ -16,7 +16,7 @@ function VariantItem({
   onClickRemove
 }: PropTypesVariantItem) {
 
-  const onClickRemoveButton = (ev: React.MouseEvent<HTMLButtonElement>)  => {
+  const onClickRemoveButton = (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     ev.stopPropagation()
     onClickRemove()
@@ -80,7 +80,7 @@ function VariantItem({
             max: 10000
           }} />
 
-          <Button onClick={onClickRemoveButton}>Remove</Button>
+        <Button onClick={onClickRemoveButton}>Remove</Button>
       </div>
       <style jsx>{
         `
@@ -107,8 +107,9 @@ export default function PurchasingOptionsForm({
   onChange
 }: PropTypes) {
   const [variants, setVariants] = useState([])
+  const [shippingFees, setShippingFees] = useState([])
 
-  const addVariant = (ev: React.MouseEvent<HTMLButtonElement>)  => {
+  const addVariant = (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     ev.stopPropagation()
 
@@ -126,7 +127,7 @@ export default function PurchasingOptionsForm({
         ...value
       } : {
           ...item,
-          default: value.default === true ? false: item.default
+          default: value.default === true ? false : item.default
         }
     }))
   }
@@ -137,6 +138,22 @@ export default function PurchasingOptionsForm({
     }))
   }
 
+  const onChangeShippingFee = (index, value: ShippingFeeType) => {
+    setShippingFees(shippingFees.map((item, i) => {
+      return index === i ? {
+        ...value
+      } : {
+          ...item
+        }
+    }))
+  }
+
+  const onRemoveShippingFee = (index) => {
+    setShippingFees(shippingFees.filter((item, i) => {
+      return i !== index
+    }))
+  }
+
   return (
     <>
       <div className="purchasing-options">
@@ -232,6 +249,16 @@ export default function PurchasingOptionsForm({
           </div>
         })}
         <Button onClick={addVariant}>Add variant</Button>
+
+        <div className="divider"></div>
+        <h4>Shipping Fees</h4>
+        <p>You can specify what countries you will ship too and the prices.</p>
+        {shippingFees.map((item, index) => {
+          return <div className="shipping-fee" key={`shipping-fee-${index}`}>
+            <ShippingFeeItem fee={item} onChange={(val) => onChangeShippingFee(index, val)} onClickRemove={() => onRemoveShippingFee(index)} />
+          </div>
+        })}
+
       </div>
       <style jsx>{
         `
diff --git a/lib/types/purchasing.ts b/lib/types/purchasing.ts
index 4eb6fd35..b2e16ae2 100644
--- a/lib/types/purchasing.ts
+++ b/lib/types/purchasing.ts
@@ -6,6 +6,12 @@ export type PurchasingVariantType = {
   stock: number,
 }
 
+export type ShippingFeeType = {
+  countryCode: string,
+  price: number,
+  name: string
+}
+
 export type PurchashingOptionsType = {
   multiple: boolean,
   stock: number,
diff --git a/pages/api/shopping-carts/[id]/add-product.ts b/pages/api/shopping-carts/[id]/add-product.ts
deleted file mode 100644
index cd53b6d6..00000000
--- a/pages/api/shopping-carts/[id]/add-product.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  addShoppingCart,
-  findShoppingCarts,
-} from '@lib/api/entities/shopping-carts'
-
-import { Request } from '@lib/types'
-import { ShoppingCartType } from '@lib/types/entities/shopping-cart'
-import { connect } from '@lib/api/db'
-import { loadUser } from '@lib/api/middlewares'
-import logger from '@lib/logger'
-import methods from '@lib/api/api-helpers/methods'
-import { purchasingPermission } from '@lib/permissions'
-import runMiddleware from '@lib/api/api-helpers/run-middleware'
-
-function validateShoppingCart(item: ShoppingCartType) {
-  if (item.products.length === 0 ) {
-    return false
-  }
-
-  // TODO: validate data structure. Maybe use yup schema
-}
-
-async function createShoppingCart(req: Request, res) {
-
-  if (!purchasingPermission(req.currentUser, 'buy')) {
-    return res.status(401).json({
-      error: 'Unauthorized'
-    })
-  }
-
-  const shoppingCartObject: ShoppingCartType = {
-    ...req.body,
-  }
-
-  if (!validateShoppingCart(shoppingCartObject)) {
-    return res.status(400).json({
-      error: 'Malformed order entity'
-    })
-  }
-
-  try {
-    const result = await addShoppingCart(shoppingCartObject)
-
-    return res.status(200).json(result)
-  } catch (err) {
-    res.status(500).json({
-      error: 'Error creating shoppign cart ' + err.message
-    })
-  }
-
-
-}
-
-const getShoppingCarts = (req: Request, res) => {
-  const {
-    query: { userId, sortBy, sortOrder, from, limit, id },
-  } = req
-
-  const filterParams = { }
-
-  if (userId) {
-    filterParams['userId'] = userId
-  }
-
-  if (id) {
-    filterParams['id'] = id
-  }
-
-  const canAccessWithBuyerId = (userId && req.currentUser.id === userId) || purchasingPermission(req.currentUser, 'admin')
-  const canManageShoppingCarts = purchasingPermission(req.currentUser, 'admin')
-
-  const canAccess = canManageShoppingCarts || canAccessWithBuyerId
-
-  if (!canAccess) {
-    return res.status(401).json({
-      error: 'Unauthorized'
-    })
-  }
-
-  const paginationParams = {
-    sortBy,
-    sortOrder,
-    from,
-    limit,
-  }
-
-
-  return findShoppingCarts(filterParams, paginationParams)
-    .then(result => {
-      return res.status(200).json(result)
-    })
-}
-
-
-export default async (req: Request, res) => {
-
-  try {
-    // Connect to database
-    await connect()
-  } catch (e) {
-    logger('ERROR', 'Can not connect to db', e)
-    return res.status(500).json({
-      error: e.message,
-    })
-  }
-
-  try {
-    await runMiddleware(req, res, loadUser)
-  } catch (e) {
-    return res.status(500).json({
-      error: e.message,
-    })
-  }
-
-
-  await methods(req, res, {
-    get: getShoppingCarts,
-    post: createShoppingCart,
-  })
-}
diff --git a/pages/api/shopping-carts/[id]/get-prices.ts b/pages/api/shopping-carts/[id]/get-prices.ts
deleted file mode 100644
index 7f9ac507..00000000
--- a/pages/api/shopping-carts/[id]/get-prices.ts
+++ /dev/null
@@ -1 +0,0 @@
-// Fetch product prices and total
\ No newline at end of file
diff --git a/pages/api/shopping-carts/[id]/remove-product.ts b/pages/api/shopping-carts/[id]/remove-product.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/pages/api/shopping-carts/[id]/index.ts b/pages/api/shopping-carts/[userId]/index.ts
similarity index 84%
rename from pages/api/shopping-carts/[id]/index.ts
rename to pages/api/shopping-carts/[userId]/index.ts
index 9ba03ed5..825ee098 100644
--- a/pages/api/shopping-carts/[id]/index.ts
+++ b/pages/api/shopping-carts/[userId]/index.ts
@@ -4,6 +4,7 @@ import {
   addShoppingCart,
   findOneShoppingCart,
   findShoppingCarts,
+  updateOneShoppingCart,
 } from '@lib/api/entities/shopping-carts'
 
 import { Request } from '@lib/types'
@@ -46,7 +47,7 @@ export default async (req: Request, res) => {
   }
 
   const cart = await findOneShoppingCart({
-    id: req.query.id
+    userId: req.query.userId
   })
 
   if (!cart) {
@@ -69,8 +70,17 @@ export default async (req: Request, res) => {
         cart
       })
     },
-    put: function() {
+    put: async function() {
+      const newCartInfo = req.body
 
+      // TODO: Validate body info
+      const result = await updateOneShoppingCart(cart.id, {
+        ...newCartInfo
+      })
+
+      res.status(200).json({
+        cart: result
+      })
     },
   })
 }
diff --git a/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js b/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
index 64cdf48a..82c59145 100644
--- a/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
+++ b/test/integration/api/shopping-cart/shopping-cart-detail.read.test.js
@@ -116,7 +116,7 @@ jest.mock('../../../../edge.config', () => {
   }
 })
 
-describe('Shopping carts creation', () => {
+describe('Shopping carts detail', () => {
   beforeEach(() => {
     findShoppingCarts.mockReturnValue(Promise.resolve([]))
     getPermissions.mockReturnValue({

From 9ff54c1bc6fe7f5594417a4ae38cc6d3551556bd Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Mon, 1 Mar 2021 18:11:13 +0100
Subject: [PATCH 12/26] start working on the shipping fees fields

---
 .../content-form/purchasing-options-form.tsx  | 120 +++++++-
 .../dynamic-field/dynamic-field-view.js       |   5 +-
 .../dynamic-field/fields/input-entity.tsx     |  15 +-
 .../generic/entity-search/entity-search.tsx   |  31 ++-
 lib/constants/countries.ts                    | 259 ++++++++++++++++++
 lib/constants/currencies.ts                   |   5 +
 lib/fetcher.ts                                |   2 +-
 lib/types/purchasing.ts                       |   2 +-
 pages/components.js                           |   4 +-
 9 files changed, 414 insertions(+), 29 deletions(-)
 create mode 100644 lib/constants/countries.ts
 create mode 100644 lib/constants/currencies.ts

diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index 092c4410..339bffc2 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -2,7 +2,9 @@ import { PurchashingOptionsType, PurchasingVariantType, ShippingFeeType } from '
 import React, { useState } from 'react'
 
 import Button from '@components/generic/button/button'
+import { COUNTRIES_LIST } from '@lib/constants/countries'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+import { FIELDS } from '@lib/constants'
 
 type PropTypesVariantItem = {
   variant: PurchasingVariantType,
@@ -34,7 +36,7 @@ function VariantItem({
           })}
           field={{
             name: 'default',
-            type: 'boolean',
+            type: FIELDS.BOOLEAN,
             label: 'This is the default variant',
           }} />
         <DynamicFieldEdit
@@ -46,7 +48,7 @@ function VariantItem({
           })}
           field={{
             name: 'name',
-            type: 'text',
+            type: FIELDS.TEXT,
             placeholder: 'Size M',
             label: 'name',
             min: 0
@@ -60,7 +62,7 @@ function VariantItem({
           })}
           field={{
             name: 'stock',
-            type: 'number',
+            type: FIELDS.NUMBER,
             label: 'stock',
             min: 0
           }} />
@@ -73,7 +75,7 @@ function VariantItem({
           })}
           field={{
             name: 'price',
-            type: 'number',
+            type: FIELDS.NUMBER,
             label: 'price',
             placeholder: 0.4,
             min: 0.1,
@@ -95,6 +97,95 @@ function VariantItem({
   )
 }
 
+type PropTypesShippingCountry = {
+  shippingFee: ShippingFeeType,
+  onChange: (val: ShippingFeeType) => void,
+  onClickRemove: () => void
+}
+
+function ShippingFeeItem({
+  shippingFee,
+  onChange,
+  onClickRemove
+}: PropTypesShippingCountry) {
+
+  const onClickRemoveButton = (ev: React.MouseEvent<HTMLButtonElement>) => {
+    ev.preventDefault()
+    ev.stopPropagation()
+    onClickRemove()
+  }
+
+  return (
+    <>
+      <div className="shipping-fee-item">
+
+        <DynamicFieldEdit
+          name="name"
+          value={shippingFee.name}
+          onChange={(val) => onChange({
+            ...shippingFee,
+            name: val
+          })}
+          field={{
+            name: 'name',
+            type: FIELDS.TEXT,
+            placeholder: 'All Countries',
+            description: 'Use a descriptive name for the shipping fee. For example: Shipping Fee Spain',
+            label: 'Name',
+            min: 0
+          }} />
+        <DynamicFieldEdit
+          name="countryCodes"
+          value={shippingFee.countryCodes}
+          onChange={(val) => onChange({
+            ...shippingFee,
+            countryCodes: val
+          })}
+          field={{
+            name: 'countryCodes',
+            type: FIELDS.ENTITY_SEARCH,
+            label: 'Country Codes',
+            entities: COUNTRIES_LIST.map(i => {
+              return {
+                label: i.name,
+                value: i.code
+              }
+            }),
+            entityNameGetter: (i) => i.label
+          }} />
+
+        <DynamicFieldEdit
+          name="price"
+          value={shippingFee.price}
+          onChange={(val) => onChange({
+            ...shippingFee,
+            price: val
+          })}
+          field={{
+            name: 'price',
+            type: FIELDS.NUMBER,
+            label: 'price',
+            placeholder: 0.4,
+            min: 0,
+            max: 10000,
+            description: 'Set it to 0 for a FREE shipment'
+          }} />
+
+        <Button onClick={onClickRemoveButton}>Remove</Button>
+      </div>
+      <style jsx>{
+        `
+        .shipping-fee-item {
+          padding: var(--edge-gap);
+          border: 1px solid var(--accents-3);
+          margin: var(--edge-gap);
+        }
+        `
+      }</style>
+    </>
+  )
+}
+
 
 type PropTypes = {
   value: PurchashingOptionsType,
@@ -138,6 +229,19 @@ export default function PurchasingOptionsForm({
     }))
   }
 
+
+  const addShippingFee = (ev: React.MouseEvent<HTMLButtonElement>) => {
+    ev.preventDefault()
+    ev.stopPropagation()
+
+    setShippingFees([...shippingFees, {
+      name: '',
+      price: 0.0,
+      countryCodes: []
+    }])
+  }
+
+
   const onChangeShippingFee = (index, value: ShippingFeeType) => {
     setShippingFees(shippingFees.map((item, i) => {
       return index === i ? {
@@ -167,7 +271,7 @@ export default function PurchasingOptionsForm({
           })}
           field={{
             name: 'multiple',
-            type: 'boolean',
+            type: FIELDS.BOOLEAN,
             label: 'Allow multiple items',
           }} />
         <DynamicFieldEdit
@@ -179,7 +283,7 @@ export default function PurchasingOptionsForm({
           })}
           field={{
             name: 'sku',
-            type: 'text',
+            type: FIELDS.TEXT,
             label: 'SKU',
           }} />
         <DynamicFieldEdit
@@ -255,9 +359,11 @@ export default function PurchasingOptionsForm({
         <p>You can specify what countries you will ship too and the prices.</p>
         {shippingFees.map((item, index) => {
           return <div className="shipping-fee" key={`shipping-fee-${index}`}>
-            <ShippingFeeItem fee={item} onChange={(val) => onChangeShippingFee(index, val)} onClickRemove={() => onRemoveShippingFee(index)} />
+            <ShippingFeeItem shippingFee={item} onChange={(val) => onChangeShippingFee(index, val)} onClickRemove={() => onRemoveShippingFee(index)} />
           </div>
         })}
+        <Button onClick={addShippingFee}>Add shipping fee</Button>
+
 
       </div>
       <style jsx>{
diff --git a/components/generic/dynamic-field/dynamic-field-view.js b/components/generic/dynamic-field/dynamic-field-view.js
index 75a40a09..9d29c38f 100644
--- a/components/generic/dynamic-field/dynamic-field-view.js
+++ b/components/generic/dynamic-field/dynamic-field-view.js
@@ -114,9 +114,10 @@ function Field({ field, value, typeDefinition }) {
             <>
               <div className="linked-entities">
                 <b>Linked items:</b>
-                {value && value.length > 0 && value.map(i => (                  <div className="entity-item">
+                {value && value.length > 0 && value.map(i => (                  
+                  <div className="entity-item">
                     <Link href={`/${field.entity}/${field.entityType}/${i.slug}`}>
-                      <a>{i[field.entityName]}`</a>
+                      <a>{field.entityNameGetter(i)}`</a>
                     </Link>
                   </div>
                 ))}
diff --git a/components/generic/dynamic-field/fields/input-entity.tsx b/components/generic/dynamic-field/fields/input-entity.tsx
index cfa17dca..c5e205a4 100644
--- a/components/generic/dynamic-field/fields/input-entity.tsx
+++ b/components/generic/dynamic-field/fields/input-entity.tsx
@@ -1,11 +1,11 @@
-import { useCallback, useEffect, useMemo, useState, memo } from 'react'
-
-import Button from '@components/generic/button/button'
-import EntitySearch from '@components/generic/entity-search/entity-search'
 import {
   ExtendedColumn,
   Table as ReactTable,
 } from '@components/generic/react-table'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+
+import Button from '@components/generic/button/button'
+import EntitySearch from '@components/generic/entity-search/entity-search'
 
 function InputEntity(props) {
   const { value, field, onChange: onChangeCallback } = props
@@ -46,7 +46,7 @@ function InputEntity(props) {
     () => [
       {
         Header: 'Item',
-        Cell: ({ row: { original } }) => original[field.entityName],
+        Cell: ({ row: { original } }) => field.entityNameGetter(original),
       },
       {
         Header: 'Actions',
@@ -59,7 +59,7 @@ function InputEntity(props) {
     ],
     []
   )
-  const entityNameGetter = useCallback((item) => item[field.entityName], [
+  const entityNameGetter = useCallback((item) => field.entityNameGetter(item), [
     field,
   ])
 
@@ -69,7 +69,8 @@ function InputEntity(props) {
         placeholder={props.field.placeholder}
         entity={props.field.entity}
         entityType={props.field.entityType}
-        entityName={entityNameGetter}
+        entityNameGetter={entityNameGetter}
+        entities={props.field.entities}
         onChange={onChange}
       />
 
diff --git a/components/generic/entity-search/entity-search.tsx b/components/generic/entity-search/entity-search.tsx
index 3b8144ff..893e6330 100644
--- a/components/generic/entity-search/entity-search.tsx
+++ b/components/generic/entity-search/entity-search.tsx
@@ -1,11 +1,12 @@
-import { useState, memo } from 'react'
+import { memo, useState } from 'react'
 
 import API from '@lib/api/api-endpoints'
 import { ENTITY_TYPES } from '@lib/constants'
+import { FieldOptionType } from '@lib/types/fields'
 import LoadingSpinner from '@components/generic/loading/loading-spinner/loading-spinner'
 import fetch from '@lib/fetcher'
 
-function ResultItem({ item, onClick = (item) => {}, entityName = (item) => item.id }) {
+function ResultItem({ item, onClick = (item) => {}, entityNameGetter = (item) => item.id }) {
   const [active, setActive] = useState(false)
 
   const onMouseEnter = () => {
@@ -19,7 +20,7 @@ function ResultItem({ item, onClick = (item) => {}, entityName = (item) => item.
   return (
     <>
       <div onClick={() => onClick(item)} className={`result-item ${active ? 'active' : ''}`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        {entityName(item)}
+        {entityNameGetter(item)}
       </div>
       <style jsx>
         {
@@ -45,7 +46,8 @@ type PropTypes = {
   entity: string,
   entityType?: string,
   placeholder?: string,
-  entityName?: (val) => string
+  entityNameGetter?: (val) => string,
+  entities?: FieldOptionType[]
 }
 
 function EntitySearch({
@@ -53,7 +55,8 @@ function EntitySearch({
   entity,
   entityType = '',
   placeholder = 'Search',
-  entityName = (item) => item.id
+  entityNameGetter = (item) => item.id,
+  entities
 }: PropTypes) {
 
   const [resultsOpened, setResultsOpened] = useState(false)
@@ -63,8 +66,7 @@ function EntitySearch({
   const [search, setSearch] = useState('')
 
   const fetchData = (val) => {
-    setLoading(true)
-    setError(false)
+  
 
     let apiRoute = ''
 
@@ -80,14 +82,25 @@ function EntitySearch({
         break;
 
       default:
+
         break;
     }
 
-    if (!apiRoute) {
+    if (!apiRoute && !entities) {
       setError(true)
       return
     }
+    
+    if (entities) {
+      setResults(entities.filter(i => {
+        return new RegExp(i.label).test(search);
+      }))
+      setResultsOpened(true)
+      return
+    }
 
+    setLoading(true)
+    setError(false)
 
     fetch(apiRoute)
       .then(found => {
@@ -127,7 +140,7 @@ function EntitySearch({
           {results.map(result => {
             return (
 
-              <ResultItem key={`${entity}-result-item-${result.id}`} item={result} onClick={onSelectItem} entityName={entityName}/>
+              <ResultItem key={`${entity}-result-item-${result.id || result.value}`} item={result} onClick={onSelectItem} entityNameGetter={entityNameGetter}/>
             )
           })}
         </div>}
diff --git a/lib/constants/countries.ts b/lib/constants/countries.ts
new file mode 100644
index 00000000..6cf3a5b8
--- /dev/null
+++ b/lib/constants/countries.ts
@@ -0,0 +1,259 @@
+import { CURRENCIES } from "./currencies";
+
+export function getCurrencyForCountryCode(countryCode: string) {
+  const item = COUNTRIES_LIST.find(i => i.code === countryCode)
+
+  return !item ? CURRENCIES.USD : (item.currency ? item.currency : CURRENCIES.USD)
+}
+
+export const ALL_COUNTRIES = {
+  name: 'All Countries',
+  code: 'ALL_COUNTRIES'
+}
+
+export const COUNTRIES_LIST = [
+  { name: 'Afghanistan', code: 'AF' },
+  { name: 'Åland Islands', code: 'AX' },
+  { name: 'Albania', code: 'AL' },
+  { name: 'Algeria', code: 'DZ' },
+  { name: 'American Samoa', code: 'AS' },
+  { name: 'Andorra', code: 'AD' },
+  { name: 'Angola', code: 'AO' },
+  { name: 'Anguilla', code: 'AI' },
+  { name: 'Antarctica', code: 'AQ' },
+  { name: 'Antigua and Barbuda', code: 'AG' },
+  { name: 'Argentina', code: 'AR' },
+  { name: 'Armenia', code: 'AM' },
+  { name: 'Aruba', code: 'AW' },
+  { name: 'Australia', code: 'AU' },
+  { name: 'Austria', code: 'AT', currency: CURRENCIES.EUR },
+  { name: 'Azerbaijan', code: 'AZ' },
+  { name: 'Bahamas', code: 'BS' },
+  { name: 'Bahrain', code: 'BH' },
+  { name: 'Bangladesh', code: 'BD' },
+  { name: 'Barbados', code: 'BB' },
+  { name: 'Belarus', code: 'BY' },
+  { name: 'Belgium', code: 'BE', currency: CURRENCIES.EUR },
+  { name: 'Belize', code: 'BZ' },
+  { name: 'Benin', code: 'BJ' },
+  { name: 'Bermuda', code: 'BM' },
+  { name: 'Bhutan', code: 'BT' },
+  { name: 'Bolivia', code: 'BO' },
+  { name: 'Bosnia and Herzegovina', code: 'BA' },
+  { name: 'Botswana', code: 'BW' },
+  { name: 'Bouvet Island', code: 'BV' },
+  { name: 'Brazil', code: 'BR' },
+  { name: 'British Indian Ocean Territory', code: 'IO' },
+  { name: 'Brunei Darussalam', code: 'BN' },
+  { name: 'Bulgaria', code: 'BG' },
+  { name: 'Burkina Faso', code: 'BF' },
+  { name: 'Burundi', code: 'BI' },
+  { name: 'Cambodia', code: 'KH' },
+  { name: 'Cameroon', code: 'CM' },
+  { name: 'Canada', code: 'CA' },
+  { name: 'Cape Verde', code: 'CV' },
+  { name: 'Cayman Islands', code: 'KY' },
+  { name: 'Central African Republic', code: 'CF' },
+  { name: 'Chad', code: 'TD' },
+  { name: 'Chile', code: 'CL' },
+  { name: 'China', code: 'CN' },
+  { name: 'Christmas Island', code: 'CX' },
+  { name: 'Cocos (Keeling) Islands', code: 'CC' },
+  { name: 'Colombia', code: 'CO' },
+  { name: 'Comoros', code: 'KM' },
+  { name: 'Congo', code: 'CG' },
+  { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+  { name: 'Cook Islands', code: 'CK' },
+  { name: 'Costa Rica', code: 'CR' },
+  { name: 'Cote D\'Ivoire', code: 'CI' },
+  { name: 'Croatia', code: 'HR' },
+  { name: 'Cuba', code: 'CU' },
+  { name: 'Cyprus', code: 'CY' , currency: CURRENCIES.EUR},
+  { name: 'Czech Republic', code: 'CZ' },
+  { name: 'Denmark', code: 'DK' },
+  { name: 'Djibouti', code: 'DJ' },
+  { name: 'Dominica', code: 'DM' },
+  { name: 'Dominican Republic', code: 'DO' },
+  { name: 'Ecuador', code: 'EC' },
+  { name: 'Egypt', code: 'EG' },
+  { name: 'El Salvador', code: 'SV' },
+  { name: 'Equatorial Guinea', code: 'GQ' },
+  { name: 'Eritrea', code: 'ER' },
+  { name: 'Estonia', code: 'EE', currency: CURRENCIES.EUR },
+  { name: 'Ethiopia', code: 'ET' },
+  { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+  { name: 'Faroe Islands', code: 'FO' },
+  { name: 'Fiji', code: 'FJ' },
+  { name: 'Finland', code: 'FI', currency: CURRENCIES.EUR },
+  { name: 'France', code: 'FR', currency: CURRENCIES.EUR },
+  { name: 'French Guiana', code: 'GF' },
+  { name: 'French Polynesia', code: 'PF' },
+  { name: 'French Southern Territories', code: 'TF' },
+  { name: 'Gabon', code: 'GA' },
+  { name: 'Gambia', code: 'GM' },
+  { name: 'Georgia', code: 'GE' },
+  { name: 'Germany', code: 'DE' , currency: CURRENCIES.EUR},
+  { name: 'Ghana', code: 'GH' },
+  { name: 'Gibraltar', code: 'GI', currency: CURRENCIES.GBP },
+  { name: 'Greece', code: 'GR' , currency: CURRENCIES.EUR},
+  { name: 'Greenland', code: 'GL' },
+  { name: 'Grenada', code: 'GD' },
+  { name: 'Guadeloupe', code: 'GP' },
+  { name: 'Guam', code: 'GU' },
+  { name: 'Guatemala', code: 'GT' },
+  { name: 'Guernsey', code: 'GG' },
+  { name: 'Guinea', code: 'GN' },
+  { name: 'Guinea-Bissau', code: 'GW' },
+  { name: 'Guyana', code: 'GY' },
+  { name: 'Haiti', code: 'HT' },
+  { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+  { name: 'Holy See (Vatican City State)', code: 'VA' },
+  { name: 'Honduras', code: 'HN' },
+  { name: 'Hong Kong', code: 'HK' },
+  { name: 'Hungary', code: 'HU' },
+  { name: 'Iceland', code: 'IS' },
+  { name: 'India', code: 'IN' },
+  { name: 'Indonesia', code: 'ID' },
+  { name: 'Iran, Islamic Republic Of', code: 'IR' },
+  { name: 'Iraq', code: 'IQ' },
+  { name: 'Ireland', code: 'IE' , currency: CURRENCIES.EUR},
+  { name: 'Isle of Man', code: 'IM' },
+  { name: 'Israel', code: 'IL' },
+  { name: 'Italy', code: 'IT' },
+  { name: 'Jamaica', code: 'JM' },
+  { name: 'Japan', code: 'JP' },
+  { name: 'Jersey', code: 'JE' },
+  { name: 'Jordan', code: 'JO' },
+  { name: 'Kazakhstan', code: 'KZ' },
+  { name: 'Kenya', code: 'KE' },
+  { name: 'Kiribati', code: 'KI' },
+  { name: 'Korea, Democratic People\'S Republic of', code: 'KP' },
+  { name: 'Korea, Republic of', code: 'KR' },
+  { name: 'Kuwait', code: 'KW' },
+  { name: 'Kyrgyzstan', code: 'KG' },
+  { name: 'Lao People\'S Democratic Republic', code: 'LA' },
+  { name: 'Latvia', code: 'LV', currency: CURRENCIES.EUR },
+  { name: 'Lebanon', code: 'LB' },
+  { name: 'Lesotho', code: 'LS' },
+  { name: 'Liberia', code: 'LR' },
+  { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+  { name: 'Liechtenstein', code: 'LI' },
+  { name: 'Lithuania', code: 'LT', currency: CURRENCIES.EUR },
+  { name: 'Luxembourg', code: 'LU' , currency: CURRENCIES.EUR},
+  { name: 'Macao', code: 'MO' },
+  { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+  { name: 'Madagascar', code: 'MG' },
+  { name: 'Malawi', code: 'MW' },
+  { name: 'Malaysia', code: 'MY' },
+  { name: 'Maldives', code: 'MV' },
+  { name: 'Mali', code: 'ML' },
+  { name: 'Malta', code: 'MT', currency: CURRENCIES.EUR },
+  { name: 'Marshall Islands', code: 'MH' },
+  { name: 'Martinique', code: 'MQ' },
+  { name: 'Mauritania', code: 'MR' },
+  { name: 'Mauritius', code: 'MU' },
+  { name: 'Mayotte', code: 'YT' },
+  { name: 'Mexico', code: 'MX' },
+  { name: 'Micronesia, Federated States of', code: 'FM' },
+  { name: 'Moldova, Republic of', code: 'MD' },
+  { name: 'Monaco', code: 'MC' },
+  { name: 'Mongolia', code: 'MN' },
+  { name: 'Montserrat', code: 'MS' },
+  { name: 'Morocco', code: 'MA' },
+  { name: 'Mozambique', code: 'MZ' },
+  { name: 'Myanmar', code: 'MM' },
+  { name: 'Namibia', code: 'NA' },
+  { name: 'Nauru', code: 'NR' },
+  { name: 'Nepal', code: 'NP' },
+  { name: 'Netherlands', code: 'NL' , currency: CURRENCIES.EUR},
+  { name: 'Netherlands Antilles', code: 'AN' },
+  { name: 'New Caledonia', code: 'NC' },
+  { name: 'New Zealand', code: 'NZ' },
+  { name: 'Nicaragua', code: 'NI' },
+  { name: 'Niger', code: 'NE' },
+  { name: 'Nigeria', code: 'NG' },
+  { name: 'Niue', code: 'NU' },
+  { name: 'Norfolk Island', code: 'NF' },
+  { name: 'Northern Mariana Islands', code: 'MP' },
+  { name: 'Norway', code: 'NO' },
+  { name: 'Oman', code: 'OM' },
+  { name: 'Pakistan', code: 'PK' },
+  { name: 'Palau', code: 'PW' },
+  { name: 'Palestinian Territory, Occupied', code: 'PS' },
+  { name: 'Panama', code: 'PA' },
+  { name: 'Papua New Guinea', code: 'PG' },
+  { name: 'Paraguay', code: 'PY' },
+  { name: 'Peru', code: 'PE' },
+  { name: 'Philippines', code: 'PH' },
+  { name: 'Pitcairn', code: 'PN' },
+  { name: 'Poland', code: 'PL' },
+  { name: 'Portugal', code: 'PT', currency: CURRENCIES.EUR },
+  { name: 'Puerto Rico', code: 'PR' },
+  { name: 'Qatar', code: 'QA' },
+  { name: 'Reunion', code: 'RE' },
+  { name: 'Romania', code: 'RO' },
+  { name: 'Russian Federation', code: 'RU' },
+  { name: 'RWANDA', code: 'RW' },
+  { name: 'Saint Helena', code: 'SH' },
+  { name: 'Saint Kitts and Nevis', code: 'KN' },
+  { name: 'Saint Lucia', code: 'LC' },
+  { name: 'Saint Pierre and Miquelon', code: 'PM' },
+  { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+  { name: 'Samoa', code: 'WS' },
+  { name: 'San Marino', code: 'SM' },
+  { name: 'Sao Tome and Principe', code: 'ST' },
+  { name: 'Saudi Arabia', code: 'SA' },
+  { name: 'Senegal', code: 'SN' },
+  { name: 'Serbia and Montenegro', code: 'CS' },
+  { name: 'Seychelles', code: 'SC' },
+  { name: 'Sierra Leone', code: 'SL' },
+  { name: 'Singapore', code: 'SG' },
+  { name: 'Slovakia', code: 'SK', currency: CURRENCIES.EUR },
+  { name: 'Slovenia', code: 'SI', currency: CURRENCIES.EUR },
+  { name: 'Solomon Islands', code: 'SB' },
+  { name: 'Somalia', code: 'SO' },
+  { name: 'South Africa', code: 'ZA' },
+  { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+  { name: 'Spain', code: 'ES', currency: CURRENCIES.EUR },
+  { name: 'Sri Lanka', code: 'LK' },
+  { name: 'Sudan', code: 'SD' },
+  { name: 'Suriname', code: 'SR' },
+  { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+  { name: 'Swaziland', code: 'SZ' },
+  { name: 'Sweden', code: 'SE' },
+  { name: 'Switzerland', code: 'CH' },
+  { name: 'Syrian Arab Republic', code: 'SY' },
+  { name: 'Taiwan, Province of China', code: 'TW' },
+  { name: 'Tajikistan', code: 'TJ' },
+  { name: 'Tanzania, United Republic of', code: 'TZ' },
+  { name: 'Thailand', code: 'TH' },
+  { name: 'Timor-Leste', code: 'TL' },
+  { name: 'Togo', code: 'TG' },
+  { name: 'Tokelau', code: 'TK' },
+  { name: 'Tonga', code: 'TO' },
+  { name: 'Trinidad and Tobago', code: 'TT' },
+  { name: 'Tunisia', code: 'TN' },
+  { name: 'Turkey', code: 'TR' },
+  { name: 'Turkmenistan', code: 'TM' },
+  { name: 'Turks and Caicos Islands', code: 'TC' },
+  { name: 'Tuvalu', code: 'TV' },
+  { name: 'Uganda', code: 'UG' },
+  { name: 'Ukraine', code: 'UA' },
+  { name: 'United Arab Emirates', code: 'AE' },
+  { name: 'United Kingdom', code: 'GB', currency: CURRENCIES.GBP },
+  { name: 'United States', code: 'US', currency: CURRENCIES.USD },
+  { name: 'United States Minor Outlying Islands', code: 'UM' },
+  { name: 'Uruguay', code: 'UY' },
+  { name: 'Uzbekistan', code: 'UZ' },
+  { name: 'Vanuatu', code: 'VU' },
+  { name: 'Venezuela', code: 'VE' },
+  { name: 'Viet Nam', code: 'VN' },
+  { name: 'Virgin Islands, British', code: 'VG' },
+  { name: 'Virgin Islands, U.S.', code: 'VI' },
+  { name: 'Wallis and Futuna', code: 'WF' },
+  { name: 'Western Sahara', code: 'EH' },
+  { name: 'Yemen', code: 'YE' },
+  { name: 'Zambia', code: 'ZM' },
+  { name: 'Zimbabwe', code: 'ZW' }
+]
+
diff --git a/lib/constants/currencies.ts b/lib/constants/currencies.ts
new file mode 100644
index 00000000..2414ac5e
--- /dev/null
+++ b/lib/constants/currencies.ts
@@ -0,0 +1,5 @@
+export const CURRENCIES = {
+  GBP: 'GBP',
+  USD: 'USD',
+  EUR: 'EUR'
+}
diff --git a/lib/fetcher.ts b/lib/fetcher.ts
index adb08a66..afe4288d 100644
--- a/lib/fetcher.ts
+++ b/lib/fetcher.ts
@@ -10,7 +10,7 @@ function checkStatus(response) {
   }
 }
 
-export default async function fetcher(url, options) {
+export default async function fetcher(url, options?) {
   return fetch(url, options)
     .then(checkStatus)
     .then((r) => r.json())
diff --git a/lib/types/purchasing.ts b/lib/types/purchasing.ts
index b2e16ae2..79cac4a9 100644
--- a/lib/types/purchasing.ts
+++ b/lib/types/purchasing.ts
@@ -7,7 +7,7 @@ export type PurchasingVariantType = {
 }
 
 export type ShippingFeeType = {
-  countryCode: string,
+  countryCodes: [string],
   price: number,
   name: string
 }
diff --git a/pages/components.js b/pages/components.js
index 518f3874..ad29e454 100644
--- a/pages/components.js
+++ b/pages/components.js
@@ -387,7 +387,7 @@ const Components = () => {
       label: 'Search user',
       placeholder: 'Search user...',
       multiple: true,
-      entityName: (u) => u.username,
+      entityNameGetter: (u) => u.username,
     },
     {
       type: 'entity_search',
@@ -396,7 +396,7 @@ const Components = () => {
       entityType: 'post',
       label: 'Search posts',
       placeholder: 'Search posts...',
-      entityName: (p) => p.title,
+      entityNameGetter: (p) => p.title,
     },
   ]
 

From b9c378836ee13e0fa5517dbd0defc8721d3c6b8a Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 4 Mar 2021 12:56:41 +0100
Subject: [PATCH 13/26] introduce better admin tables

---
 .../content-table/content-table.tsx           | 36 +++++++++++--------
 .../dynamic-field/dynamic-field-view.js       |  4 ++-
 components/generic/tags-field/tags-field.js   |  8 ++++-
 lib/types/entities/content.ts                 | 34 +++++++++++++-----
 4 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/components/content/admin-content/content-table/content-table.tsx b/components/content/admin-content/content-table/content-table.tsx
index 79911dc9..114704da 100644
--- a/components/content/admin-content/content-table/content-table.tsx
+++ b/components/content/admin-content/content-table/content-table.tsx
@@ -1,3 +1,4 @@
+import { ContentEntityType, ContentTypeDefinition } from '@lib/types'
 import {
   ExtendedColumn,
   Table as ReactTable,
@@ -7,7 +8,7 @@ import React, { memo, useCallback, useMemo, useState } from 'react'
 import API from '@lib/api/api-endpoints'
 import ActionsCell from './actions-cell'
 import Button from '@components/generic/button/button'
-import { ContentEntityType } from '@lib/types'
+import DynamicFieldView from '@components/generic/dynamic-field/dynamic-field-view'
 import Link from 'next/link'
 import fetch from '@lib/fetcher'
 import { format } from 'timeago.js'
@@ -15,7 +16,12 @@ import { useInfinityList } from '@lib/client/hooks'
 
 const limit = 10
 
-function ContentTable({ type }) {
+type Props = {
+  type: ContentTypeDefinition
+}
+
+function ContentTable({ type }: Props) {
+
   const [{ sortBy, sortOrder }, setOrdering] = useState({
     sortBy: 'createdAt',
     sortOrder: 'DESC',
@@ -63,29 +69,29 @@ function ContentTable({ type }) {
         id: name,
         sortable: true,
         Cell: ({ row: { original: item } }) => {
-          const value =
-            typeof item[name] === 'string'
-              ? item[name]
-              : JSON.stringify(item[name])
+          const componentCell = <DynamicFieldView
+            field={type.fields.find(i => i.name === name)}
+            value={item[name]}
+            typeDefinition={type} />
 
           if (index === 0) {
             return (
               <Link href={`/content/${type.slug}/${item.slug}`}>
-                <a>{value}</a>
+                <a title={label || name}>{componentCell}</a>
               </Link>
             )
           }
 
-          return value || '-'
+          return componentCell
         },
       })
     )
 
     columnsConfig.push({
-      Header: 'Created at',
+      Header: 'Created',
       id: 'createdAt',
       accessor: 'createdAt',
-      Cell: ({ value }) => format(value),
+      Cell: ({ value }) => format(value, 'es'),
       sortable: true,
     })
 
@@ -93,7 +99,8 @@ function ContentTable({ type }) {
       columnsConfig.push({
         Header: 'Draft',
         id: 'draft',
-        Cell: ({ value }) => value || '-',
+        accessor: 'draft',
+        Cell: ({ value }) => (value ? 'DRAFT' : '-'),
         sortable: true,
         justifyContent: 'center',
       })
@@ -103,6 +110,7 @@ function ContentTable({ type }) {
       columnsConfig.push({
         Header: 'Comments',
         id: 'comments',
+        accessor: 'comments',
         Cell: ({ value }) => value || '-',
         sortable: false,
         justifyContent: 'center',
@@ -124,7 +132,7 @@ function ContentTable({ type }) {
     })
 
     return columnsConfig
-  }, [])
+  }, [type])
 
   return (
     <div className="content-list">
@@ -142,8 +150,8 @@ function ContentTable({ type }) {
 
       <div className="load-more">
         {!isReachingEnd && (
-          <Button loading={isLoadingMore} big={true} onClick={loadNewItems}>
-            Load More
+          <Button title="Load more" loading={isLoadingMore} big={true} onClick={loadNewItems}>
+            Load more
           </Button>
         )}
       </div>
diff --git a/components/generic/dynamic-field/dynamic-field-view.js b/components/generic/dynamic-field/dynamic-field-view.js
index 9d29c38f..1420aa9b 100644
--- a/components/generic/dynamic-field/dynamic-field-view.js
+++ b/components/generic/dynamic-field/dynamic-field-view.js
@@ -98,7 +98,9 @@ function Field({ field, value, typeDefinition }) {
         return value ? (
           <div data-testid={datatestId}>
             {(Array.isArray(value) ? value : [value]).map((i) => (
-              <span>{field.options.find((o) => o.value === i).label}</span>
+              <span key={i}>
+              {field.options.find((o) => o.value === i) ? field.options.find((o) => o.value === i).label : i.label}
+              </span>
             ))}
             <style jsx>{`
               span {
diff --git a/components/generic/tags-field/tags-field.js b/components/generic/tags-field/tags-field.js
index 4e858f35..8dbe0e13 100644
--- a/components/generic/tags-field/tags-field.js
+++ b/components/generic/tags-field/tags-field.js
@@ -32,7 +32,7 @@ function TagsField({ tags = [], type = {} }) {
     <>
       <div className="tags-field">
         {(tags || []).map((tag) => {
-          return <Tag tag={tag} key={tag.slug} type={type} />
+          return <div className="tag-wr" key={tag.slug}><Tag tag={tag} key={tag.slug} type={type} /></div>
         })}
       </div>
       <style jsx>{`
@@ -41,7 +41,13 @@ function TagsField({ tags = [], type = {} }) {
           flex-wrap: wrap;
           margin-bottom: var(--edge-gap);
           margin-top: var(--edge-gap-double);
+          margin: 0;
         }
+
+        .tag-wr {
+          margin-bottom: 5px;
+        }
+        
       `}</style>
     </>
   )
diff --git a/lib/types/entities/content.ts b/lib/types/entities/content.ts
index 47355f81..f27eeee5 100644
--- a/lib/types/entities/content.ts
+++ b/lib/types/entities/content.ts
@@ -1,12 +1,28 @@
+import { InteractionEntity, UserType } from '@lib/types'
+
 export type ContentEntityType = {
-  id: string;
-  slug: string;
-  type: string;
-  title: string;
-  description: string;
-  draft: boolean;
-  author: string;
-  createdAt: string;
+  id: string
+  slug: string
+  type: string
+  title: string
+  description: string
+  city?: string
+  remote?: string
+  tags?: Array<{ label: string; slug: string }>
+  image?: Array<{ path: string; createdAt: number; name: string }>
+  dateStart?: string
+  timeStart?: string
+  featured?: boolean
+  paymentPointer?: string
+  dateEnd?: string
+  timeEnd?: string
+  draft: boolean
+  author: string
+  user: UserType
+  createdAt: string
   groupType: string
   groupId: string
-}
\ No newline at end of file
+  comments: number
+  interactions: InteractionEntity[],
+  visits: number
+}

From 601dba29b19b7b3ac11f1ac3738c3adef87b472f Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 4 Mar 2021 21:44:06 +0100
Subject: [PATCH 14/26] purchasing option select countries

---
 .../content-form/purchasing-options-form.tsx  | 130 ++++++++++--------
 .../{dropdown-menu.js => dropdown-menu.tsx}   |  38 +++--
 .../generic/entity-search/entity-search.tsx   |   9 +-
 components/layout/header/user-header.tsx      |   8 --
 lib/constants/currencies.ts                   |   2 +
 5 files changed, 112 insertions(+), 75 deletions(-)
 rename components/generic/dropdown-menu/{dropdown-menu.js => dropdown-menu.tsx} (77%)

diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index 339bffc2..9e653d80 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 
 import Button from '@components/generic/button/button'
 import { COUNTRIES_LIST } from '@lib/constants/countries'
+import { CURRENCIES } from '@lib/constants/currencies'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
 import { FIELDS } from '@lib/constants'
 
@@ -27,61 +28,73 @@ function VariantItem({
   return (
     <>
       <div className="variant-item">
-        <DynamicFieldEdit
-          name="default"
-          value={variant.default}
-          onChange={(val) => onChange({
-            ...variant,
-            default: val
-          })}
-          field={{
-            name: 'default',
-            type: FIELDS.BOOLEAN,
-            label: 'This is the default variant',
-          }} />
-        <DynamicFieldEdit
-          name="name"
-          value={variant.name}
-          onChange={(val) => onChange({
-            ...variant,
-            name: val
-          })}
-          field={{
-            name: 'name',
-            type: FIELDS.TEXT,
-            placeholder: 'Size M',
-            label: 'name',
-            min: 0
-          }} />
-        <DynamicFieldEdit
-          name="stock"
-          value={variant.stock}
-          onChange={(val) => onChange({
-            ...variant,
-            stock: val
-          })}
-          field={{
-            name: 'stock',
-            type: FIELDS.NUMBER,
-            label: 'stock',
-            min: 0
-          }} />
-        <DynamicFieldEdit
-          name="price"
-          value={variant.price}
-          onChange={(val) => onChange({
-            ...variant,
-            price: val
-          })}
-          field={{
-            name: 'price',
-            type: FIELDS.NUMBER,
-            label: 'price',
-            placeholder: 0.4,
-            min: 0.1,
-            max: 10000
-          }} />
 
+        <div className="input-wr">
+          <DynamicFieldEdit
+            name="default"
+            value={variant.default}
+            onChange={(val) => onChange({
+              ...variant,
+              default: val
+            })}
+            field={{
+              name: 'default',
+              type: FIELDS.BOOLEAN,
+              label: 'This is the default variant',
+            }} />
+        </div>
+
+        <div className="input-wr">
+          <DynamicFieldEdit
+            name="name"
+            value={variant.name}
+            onChange={(val) => onChange({
+              ...variant,
+              name: val
+            })}
+            field={{
+              name: 'name',
+              type: FIELDS.TEXT,
+              placeholder: 'Size M',
+              label: 'name',
+              min: 0
+            }} />
+        </div>
+        <div className="input-wr">
+
+          <DynamicFieldEdit
+            name="stock"
+            value={variant.stock}
+            onChange={(val) => onChange({
+              ...variant,
+              stock: val
+            })}
+            field={{
+              name: 'stock',
+              type: FIELDS.NUMBER,
+              label: 'stock',
+              min: 0
+            }} />
+        </div>
+
+        <div className="input-wr">
+          <DynamicFieldEdit
+            name="price"
+            value={variant.price}
+            onChange={(val) => onChange({
+              ...variant,
+              price: val
+            })}
+            field={{
+              name: 'price',
+              type: FIELDS.NUMBER,
+              label: 'price',
+              placeholder: 0.4,
+              min: 0.1,
+              max: 10000
+            }} />
+        </div>
+        
         <Button onClick={onClickRemoveButton}>Remove</Button>
       </div>
       <style jsx>{
@@ -144,7 +157,8 @@ function ShippingFeeItem({
           field={{
             name: 'countryCodes',
             type: FIELDS.ENTITY_SEARCH,
-            label: 'Country Codes',
+            label: 'Countries',
+            multiple: true,
             entities: COUNTRIES_LIST.map(i => {
               return {
                 label: i.name,
@@ -330,13 +344,13 @@ export default function PurchasingOptionsForm({
                 type: 'select',
                 label: 'Currency',
                 options: [{
-                  value: 'euro',
+                  value: CURRENCIES.EUR,
                   label: '€'
                 }, {
-                  value: 'dollar',
+                  value: CURRENCIES.USD,
                   label: '$'
                 }, {
-                  value: 'pound',
+                  value: CURRENCIES.GBP,
                   label: '£'
                 }],
                 description: 'Note: All values will be transformed to dollars at the moment of the payment.'
diff --git a/components/generic/dropdown-menu/dropdown-menu.js b/components/generic/dropdown-menu/dropdown-menu.tsx
similarity index 77%
rename from components/generic/dropdown-menu/dropdown-menu.js
rename to components/generic/dropdown-menu/dropdown-menu.tsx
index 193a787a..37f84059 100644
--- a/components/generic/dropdown-menu/dropdown-menu.js
+++ b/components/generic/dropdown-menu/dropdown-menu.tsx
@@ -1,20 +1,37 @@
-import { useState, memo } from 'react'
+import React, { memo, useRef, useState } from 'react'
+
+import useOnClickOutside from '@lib/client/hooks/use-click-away-listener'
 
 function DropDownMenu(props) {
-  const [open, setOpened] = useState(props.open || false)
+  const [open, setOpened] = useState<Boolean>(props.open || false)
   const align = props.align || 'left'
   const toggleMenu = () => {
     setOpened(!open)
   }
 
+  const ref = useRef(null);
+ 
+  useOnClickOutside(ref, () => {
+    setOpened(false)
+  })
+
   return (
     <>
-      <div className="dropdown-menu">
-        <div
-          onClick={toggleMenu}
-          className={`dropdown-menu-indicator ${open ? 'open' : 'closed'}`}
-          aria-label={`${open ? 'close menu' : 'open menu'}`}
-        ></div>
+      <div className={`dropdown-menu ${props.icon ? 'custom-icon' : ''}`} ref={ref}>
+        {props.icon ? (
+          <props.icon
+            width="20px"
+            height="20px"
+            onClick={toggleMenu}
+            aria-label={`${open ? 'close menu' : 'open menu'}`}
+          />
+        ) : (
+          <div
+            onClick={toggleMenu}
+            className={`dropdown-menu-indicator ${open ? 'open' : 'closed'}`}
+            aria-label={`${open ? 'close menu' : 'open menu'}`}
+          />
+        )}
         {open && (
           <div
             className={`dropdown-menu-wrapper ${align}`}
@@ -44,6 +61,11 @@ function DropDownMenu(props) {
           -webkit-touch-callout: none;
         }
 
+        .dropdown-menu.custom-icon {
+          background: transparent;
+          border: none;
+        }
+
         .dropdown-menu-indicator {
           display: flex;
           flex-direction: column;
diff --git a/components/generic/entity-search/entity-search.tsx b/components/generic/entity-search/entity-search.tsx
index 893e6330..c5fc98f6 100644
--- a/components/generic/entity-search/entity-search.tsx
+++ b/components/generic/entity-search/entity-search.tsx
@@ -92,8 +92,15 @@ function EntitySearch({
     }
     
     if (entities) {
+      
+      if (!val.trim()) {
+        setResults([])
+        setResultsOpened(false)
+        return 
+      }
+
       setResults(entities.filter(i => {
-        return new RegExp(i.label).test(search);
+        return new RegExp(val.toLowerCase()).test(i.label.toLowerCase());
       }))
       setResultsOpened(true)
       return
diff --git a/components/layout/header/user-header.tsx b/components/layout/header/user-header.tsx
index 018ec9fb..e94ad516 100644
--- a/components/layout/header/user-header.tsx
+++ b/components/layout/header/user-header.tsx
@@ -64,14 +64,6 @@ function UserHeader(props) {
             </a>
           </Link>
 
-          <div className="user-actions-button">
-            <Link href={`/create/content/post`}>
-              <a>
-                <Button success>Write a post</Button>
-              </a>
-            </Link>
-          </div>
-
           <ul className="navigation">
             <li>
               <DropdownMenu align="right" width={'180px'}>
diff --git a/lib/constants/currencies.ts b/lib/constants/currencies.ts
index 2414ac5e..c74a6387 100644
--- a/lib/constants/currencies.ts
+++ b/lib/constants/currencies.ts
@@ -3,3 +3,5 @@ export const CURRENCIES = {
   USD: 'USD',
   EUR: 'EUR'
 }
+
+

From c9465097a6d43d7dca7494bd86588a7cb24414f3 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 4 Mar 2021 22:24:48 +0100
Subject: [PATCH 15/26] add multilanguage support for static pages and language
 chooser

---
 DOCUMENTATION.md                              |   2 +-
 README.md                                     |   1 +
 components/generic/language-chooser.js        |   8 --
 components/generic/language-chooser/index.tsx |  19 +++
 components/layout/header/user-header.tsx      |   4 +
 lib/client/hooks/loadTranslations.tsx         |  38 ++++++
 next.config.js                                |   4 +-
 package.json                                  |   2 +
 pages/p/[static-page].js                      |  23 +++-
 static-pages/{ => en}/about.md                |   0
 static-pages/{ => en}/copyright-policy.md     |   0
 static-pages/{ => en}/faq.md                  |   0
 static-pages/{ => en}/privacy-policy.md       |   0
 static-pages/{ => en}/terms-of-service.md     |   0
 static-pages/es/about.md                      |   8 ++
 static-pages/es/copyright-policy.md           |  33 +++++
 static-pages/es/faq.md                        |  10 ++
 static-pages/es/privacy-policy.md             | 103 +++++++++++++++
 static-pages/es/terms-of-service.md           | 125 ++++++++++++++++++
 yarn.lock                                     |  34 +++++
 20 files changed, 397 insertions(+), 17 deletions(-)
 delete mode 100644 components/generic/language-chooser.js
 create mode 100644 components/generic/language-chooser/index.tsx
 create mode 100644 lib/client/hooks/loadTranslations.tsx
 rename static-pages/{ => en}/about.md (100%)
 rename static-pages/{ => en}/copyright-policy.md (100%)
 rename static-pages/{ => en}/faq.md (100%)
 rename static-pages/{ => en}/privacy-policy.md (100%)
 rename static-pages/{ => en}/terms-of-service.md (100%)
 create mode 100644 static-pages/es/about.md
 create mode 100644 static-pages/es/copyright-policy.md
 create mode 100644 static-pages/es/faq.md
 create mode 100644 static-pages/es/privacy-policy.md
 create mode 100644 static-pages/es/terms-of-service.md

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index 303df135..13e66c77 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -75,7 +75,7 @@
   - Provided by [next-pwa](https://github.com/shadowwalker/next-pwa)
 - Easy to deploy
   - Deploy on platforms like Vercel in minutes
-- Multilingual support*
+- Multilingual support
   - Based on nextjs i18n 
 
 ## How to start using Edge.
diff --git a/README.md b/README.md
index 0e8b38a6..9abc2799 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ The main features of Edge are:
 - Entities Search (through mongo DB)
 - Web monetization
 - Easy to deploy
+- Internationalization built in
 
 If you want to read about all the features you can check the [Documentation](./DOCUMENTATION.md) or check the [Website Demo](https://edge-next.now.sh/).
 
diff --git a/components/generic/language-chooser.js b/components/generic/language-chooser.js
deleted file mode 100644
index 07fc4287..00000000
--- a/components/generic/language-chooser.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-
-function LanguageChooser(props) {
-  const { t, lang } = useTranslation()
-  return <div className="language-chooser">Active language: {lang}</div>
-}
-
-export default LanguageChooser
diff --git a/components/generic/language-chooser/index.tsx b/components/generic/language-chooser/index.tsx
new file mode 100644
index 00000000..fd68dcc2
--- /dev/null
+++ b/components/generic/language-chooser/index.tsx
@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router'
+
+function LanguageChooser(props) {
+  const router = useRouter()
+
+  const onChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
+    const val = ev.target.value
+    router.push(router.pathname, router.pathname, { locale: val })
+  }
+  
+  return <div className="language-chooser">
+    <select onChange={onChange} value={router.locale}>
+      <option value="en">English</option>
+      <option value="es">Español</option>
+    </select>
+  </div>
+}
+
+export default LanguageChooser
diff --git a/components/layout/header/user-header.tsx b/components/layout/header/user-header.tsx
index e94ad516..9b610eea 100644
--- a/components/layout/header/user-header.tsx
+++ b/components/layout/header/user-header.tsx
@@ -5,6 +5,7 @@ import { useContentTypes, useGroupTypes } from '@lib/client/hooks'
 import Avatar from '@components/user/avatar/avatar'
 import Button from '@components/generic/button/button'
 import DropdownMenu from '@components/generic/dropdown-menu/dropdown-menu'
+import LanguageChooser from '@components/generic/language-chooser'
 import Link from 'next/link'
 import SiteMenu from '@components/generic/site-menu/site-menu'
 import { SuperSearch } from '@components/generic/super-search'
@@ -71,6 +72,9 @@ function UserHeader(props) {
                   <li>
                     <ThemeSelector />
                   </li>
+                  <li>
+                    <LanguageChooser />
+                  </li>
                   <li className="mobile-menu-item">
                     <SiteMenu />
                   </li>
diff --git a/lib/client/hooks/loadTranslations.tsx b/lib/client/hooks/loadTranslations.tsx
new file mode 100644
index 00000000..ee11548b
--- /dev/null
+++ b/lib/client/hooks/loadTranslations.tsx
@@ -0,0 +1,38 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import { useEffect } from 'react'
+import { useRouter } from "next/router";
+
+export default function() {
+
+  i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources: {
+      en: {
+        translation: {
+          "example": "Hello"
+        }
+      },
+      es: {
+        translation: {
+          "example": "Hola"
+        }
+      }
+    },
+    lng: "en",
+    fallbackLng: "en",
+
+    interpolation: {
+      escapeValue: false
+    }
+  });
+
+  const { locale } = useRouter()
+  
+  useEffect(() => {
+    if (locale) {
+      i18n.changeLanguage(locale)
+    }
+  }, [locale])
+} 
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 89a03a23..03b5eb4d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,8 +10,8 @@ module.exports = withPWA({
     NEXT_PUBLIC_GMAPS_API_KEY: process.env.NEXT_PUBLIC_GMAPS_API_KEY,
   },  
   i18n: {
-    locales: ['en-US', 'es'],
-    defaultLocale: 'en-US',
+    locales: ['en', 'es'],
+    defaultLocale: 'en',
   },
   webpack(config) {
     config.resolve.alias['@lib'] = path.join(__dirname, 'lib')
diff --git a/package.json b/package.json
index ec7364ad..aa150cde 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "firebase-admin": "^8.10.0",
     "formidable-serverless": "^1.0.3",
     "gray-matter": "^4.0.2",
+    "i18next": "^19.9.1",
     "isomorphic-unfetch": "^3.0.0",
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "^1.3.0",
@@ -41,6 +42,7 @@
     "react-dom": "latest",
     "react-google-maps": "^9.4.5",
     "react-google-recaptcha-v3": "^1.5.4",
+    "react-i18next": "^11.8.8",
     "react-player": "^2.0.1",
     "react-quill": "1.3.5",
     "react-share": "^4.1.0",
diff --git a/pages/p/[static-page].js b/pages/p/[static-page].js
index 46dac044..a3515beb 100644
--- a/pages/p/[static-page].js
+++ b/pages/p/[static-page].js
@@ -16,26 +16,37 @@ const Page = ({ htmlString, data }) => {
 }
 
 export const getStaticPaths = async () => {
-  const files = fs.readdirSync('static-pages')
+  const filesEnglish = fs.readdirSync('static-pages/en')
+  const filesSpanish = fs.readdirSync('static-pages/es')
 
-  const paths = files.map((filename) => ({
+  const pathsEn = filesEnglish.map((filename) => ({
     params: {
       ['static-page']: filename.replace('.md', ''),
     },
+    locale: 'en'
+  }))
+
+  const pathsEs = filesSpanish.map((filename) => ({
+    params: {
+      ['static-page']: filename.replace('.md', ''),
+    },
+    locale: 'es'
   }))
 
   return {
-    paths,
+    paths: [...pathsEn, ...pathsEs],
     fallback: false,
   }
 }
 
-export const getStaticProps = async ({ params }) => {
-
+export const getStaticProps = async ({ params, locale }) => {
+  
   const slug = params['static-page']
+  // TODO: handle missing route, error reading fs
   const markdownWithMetadata = fs
-    .readFileSync(path.join('static-pages', slug + '.md'))
+    .readFileSync(path.join('static-pages', locale, slug + '.md'))
     .toString()
+
   const parsedMarkdown = matter(markdownWithMetadata)
 
   return {
diff --git a/static-pages/about.md b/static-pages/en/about.md
similarity index 100%
rename from static-pages/about.md
rename to static-pages/en/about.md
diff --git a/static-pages/copyright-policy.md b/static-pages/en/copyright-policy.md
similarity index 100%
rename from static-pages/copyright-policy.md
rename to static-pages/en/copyright-policy.md
diff --git a/static-pages/faq.md b/static-pages/en/faq.md
similarity index 100%
rename from static-pages/faq.md
rename to static-pages/en/faq.md
diff --git a/static-pages/privacy-policy.md b/static-pages/en/privacy-policy.md
similarity index 100%
rename from static-pages/privacy-policy.md
rename to static-pages/en/privacy-policy.md
diff --git a/static-pages/terms-of-service.md b/static-pages/en/terms-of-service.md
similarity index 100%
rename from static-pages/terms-of-service.md
rename to static-pages/en/terms-of-service.md
diff --git a/static-pages/es/about.md b/static-pages/es/about.md
new file mode 100644
index 00000000..06bd5491
--- /dev/null
+++ b/static-pages/es/about.md
@@ -0,0 +1,8 @@
+---
+title: Acerca
+description: "Acerca"
+---
+
+# Acerca
+
+Introduce here the description of your project
diff --git a/static-pages/es/copyright-policy.md b/static-pages/es/copyright-policy.md
new file mode 100644
index 00000000..a23f39b0
--- /dev/null
+++ b/static-pages/es/copyright-policy.md
@@ -0,0 +1,33 @@
+---
+title: Copyright Policy
+description: "Copyright policy"
+---
+
+
+# **[DEVELOPER NAME]** COPYRIGHT POLICY
+
+Last Revised:  **[DATE]**
+
+**[DEVELOPER NAME]** respects the intellectual property rights of others and expects its users to do the same.
+
+In accordance with the Digital Millennium Copyright Act of 1998 ("DMCA"), the text of which may be found on the U.S. Copyright Office website at http://www.copyright.gov/legislation/pl105-304.pdf, and other applicable laws, **[DEVELOPER NAME]** has adopted a policy of terminating, in appropriate circumstances and at our sole discretion, the accounts of users who are deemed to be repeat infringers. **[DEVELOPER NAME]** may also, at its sole discretion, limit access to **[DEVELOPER NAME]**'s website and services (collectively, "Service") and/or terminate the accounts of any users who infringe any intellectual property rights of others, whether or not there is any repeat infringement. **[DEVELOPER NAME]** will respond to claims of copyright infringement committed on the **[DEVELOPER NAME]** website that are reported to **[DEVELOPER NAME]**'s Designated Copyright Agent, identified in the sample notice below.
+
+If you knowingly misrepresent in your notification that the material or activity is infringing, you will be liable for any damages, including costs and attorneys' fees, incurred by us or the alleged infringer as the result of our relying upon such misrepresentation in removing or disabling access to the material or activity claimed to be infringing.
+
+If you are a copyright owner, or are authorized to act on behalf of one, or authorized to act under any exclusive right under copyright, please report alleged copyright infringements taking place on or through the Services by completing the following DMCA Notice of Alleged Infringement and delivering it to **[DEVELOPER NAME]**'s Designated Copyright Agent. Upon receipt of the Notice as described below, **[DEVELOPER NAME]** will take whatever action, in its sole discretion, it deems appropriate, including removal of the challenged material from the Services.
+
+## DMCA Notice of Alleged Infringement ("Notice"):
+
+1. Identify the copyrighted work that you claim has been infringed, or if multiple copyrighted works are covered by this Notice you may provide a representative list of the copyrighted works that you claim have been infringed.
+
+1. Identify the material that you claim is infringing (or to be the subject of infringing activity) and that is to be removed or access to which is to be disabled, and information reasonably sufficient to permit us to locate the material, including at a minimum, if applicable, the URL of the link shown on the Services where such material may be found.
+
+1. Provide your mailing address, telephone number, and, if available, email address.
+
+1. Include both of the following statements in the body of the Notice: (i) "I hereby state that I have a good faith belief that the disputed use of the copyrighted material is not authorized by the copyright owner, its agent, or the law (e.g., as a fair use)"; and (ii) "I hereby state that the information in this Notice is accurate and, under penalty of perjury, that I am the owner, or authorized to act on behalf of the owner, of the copyright or of an exclusive right under the copyright that is allegedly infringed."
+
+1. Provide your full legal name and your electronic or physical signature.
+
+1. Deliver this Notice, with all items completed, to **[DEVELOPER NAME]**'s Designated Copyright Agent:
+
+[INSERT CONTACT INFORMATION FOR DMCA DESIGNATED COPYRIGHT AGENT, INCLUDING NAME, FULL MAILING ADDRESS AND EMAIL ADDRESS. YOU CAN LEARN MORE ABOUT DMCA REGISTRATION AT http://www.copyright.gov/onlinesp/.]
diff --git a/static-pages/es/faq.md b/static-pages/es/faq.md
new file mode 100644
index 00000000..efb797d3
--- /dev/null
+++ b/static-pages/es/faq.md
@@ -0,0 +1,10 @@
+---
+title: FAQ
+description: "Frequently Asked Questions"
+---
+
+# FAQ
+
+## FAQ 1
+
+Introduce here the faqs for your product
\ No newline at end of file
diff --git a/static-pages/es/privacy-policy.md b/static-pages/es/privacy-policy.md
new file mode 100644
index 00000000..a98df34f
--- /dev/null
+++ b/static-pages/es/privacy-policy.md
@@ -0,0 +1,103 @@
+---
+title: Privacy Policy
+description: "Privacy Policy"
+---
+
+# **[DEVELOPER NAME]** PRIVACY POLICY
+
+Last Revised: **[ DATE ]**
+
+Our privacy policy applies to information we collect when you use or access our website, application, or just interact with us. We may change this privacy policy from time to time. Whenever we make changes to this privacy policy, the changes are effective **[TIME PERIOD]** after we post the revised privacy policy (as indicated by revising the date at the top of our privacy policy). We encourage you to review our privacy policy whenever you access our services to stay informed about our information practices and the ways you can help protect your privacy.
+
+## Collection of Information
+
+### Information You Provide to Us
+
+**[CUSTOMIZE AS APPROPRIATE.]**
+
+We collect information you provide directly to us. For example, we collect information when you participate in any interactive features of our services, fill out a form, request customer support, provide any contact or identifying information or otherwise communicate with us. The types of information we may collect include your name, email address, postal address, credit card information and other contact or identifying information you choose to provide.
+
+### Information We Collect Automatically When You Use the Services
+
+When you access or use our services, we automatically collect information about you, including:
+
+**[EDIT THE LIST BELOW BASED ON YOUR APPLICATION AND COMPANY PRACTICES.]**
+
+* **Log Information**: We log information about your use of our services, including the type of browser you use, access times, pages viewed, your IP address and the page you visited before navigating to our services.
+* **Device Information**: We collect information about the computer you use to access our services, including the hardware model, and operating system and version.
+* **Location Information**: We may collect information about the location of your device each time you access or use one of our mobile applications or otherwise consent to the collection of this information.
+* **Information Collected by Cookies and Other Tracking Technologies**: We use various technologies to collect information, and this may include sending cookies to your computer. Cookies are small data files stored on your hard drive or in your device memory that helps us to improve our services and your experience, see which areas and features of our services are popular and count visits. We may also collect information using web beacons (also known as "tracking pixels"). Web beacons are electronic images that may be used in our services or emails and to track count visits or understand usage and campaign effectiveness.
+
+For more details about how we collect information, including details about cookies and how to disable them, please see "Your Information Choices" below.
+
+### Information We Collect From Other Sources
+
+In order to provide you with access to the Service, or to provide you with better service in general, we may combine information obtained from other sources (for example, a third-party service whose application you have authorized or used to sign in) and combine that with information we collect through our services.
+
+## Use of Information
+
+**[EDIT THE LIST BELOW BASED ON YOUR APPLICATION AND COMPANY PRACTICES.]**
+
+We use information about you for various purposes, including to:
+
+* Provide, maintain and improve our services;
+* Provide services you request, process transactions and to send you related information;
+* Send you technical notices, updates, security alerts and support and administrative messages;
+* Respond to your comments, questions and requests and provide customer service;
+* Communicate with you about news and information related to our service;
+* Monitor and analyze trends, usage and activities in connection with our services; and
+* Personalize and improve our services.
+
+By accessing and using our services, you consent to the processing and transfer of your information in and to the United States and other countries.
+
+## Sharing of Information
+
+**[EDIT THE LIST BELOW BASED ON YOUR APPLICATION AND COMPANY PRACTICES.]**
+
+We may share personal information about you as follows:
+
+* With third party vendors and other service providers who need access to your information to carry out work on our behalf, such as **[DESCRIBE TYPES OF THIRD PARTY SERVICE PROVIDERS, IF APPLICABLE]**;
+* If we believe disclosure is reasonably necessary to comply with any applicable law, regulation, legal process or governmental request;
+* To enforce applicable user agreements or policies, including our Terms of Service **[URL FOR TERMS OF SERVICE]**; and to protect us, our users or the public from harm or illegal activities;
+* In connection with any merger, sale of **[DEVELOPER NAME]** assets, financing or acquisition of all or a portion of our business to another company; and
+* If we notify you through our services (or in our privacy policy) that the information you provide will be shared in a particular manner and you provide such information.
+
+We may also share aggregated or anonymized information that does not directly identify you.
+
+## Third Party Analytics
+
+**[INCLUDE/CUSTOMIZE AS APPROPRIATE.]**
+
+We may allow third parties to provide analytics services. These third parties may use cookies, web beacons and other technologies to collect information about your use of the services and other websites, including your IP address, web browser, pages viewed, time spent on pages, links clicked and conversion information. This information may be used by us and third parties to, among other things, analyze and track data, determine the popularity of certain content and other websites and better understand your online activity. Our privacy policy does not apply to, and we are not responsible for, third party cookies, web beacons or other tracking technologies and we encourage you to check the privacy policies of these third parties to learn more about their privacy practices.
+
+## Security
+
+We take reasonable measures to help protect personal information from loss, theft, misuse and unauthorized access, disclosure, alteration and destruction.
+
+## Your Information Choices
+
+**[INCLUDE/CUSTOMIZE AS APPROPRIATE]**
+
+### Location Information
+
+When you first launch any of our mobile applications that collect location information, you will be asked to consent to the application's collection of this information.   If you initially consent to our collection of location information, you can subsequently stop the collection of this information at any time by changing the preferences on your mobile device.  **[If you do so, our mobile applications, or certain features thereof, will no longer function.]**  You may also stop our collection of location information by following the standard uninstall process to remove all of our mobile applications from your device.
+
+### Cookies
+
+Most web browsers are set to accept cookies by default. If you prefer, you can usually choose to set your browser to remove or reject browser cookies. Please note that if you choose to remove or reject cookies, this could affect the availability and functionality of our services.
+
+### Promotional Communications
+
+You may opt out of receiving any promotional emails from us by following the instructions in those emails. If you opt out, we may still send you non-promotional communications, such as those about your account or our ongoing business relations.
+
+### Your California Privacy Rights
+
+**[CERTAIN TYPES OF SERVICES THAT DELIVER DIRECT MARKETING TO USERS AND INTERACT WITH CALIFORNIA RESIDENTS MAY BE SUBJECT TO TERMS IN THIS SECTION. CONSULT WITH LEGAL COUNSEL REGARDING YOUR PRIVACY OBLIGATIONS UNDER CALIFORNIA LAW.]**
+
+California law permits residents of California to request certain details about how their information is shared with third parties for direct marketing purposes.  If you are a California resident and would like to make such a request, please contact us at **[INSERT DESIGNATED MAILING ADDRESS, E-MAIL ADDRESS OR TOLL-FREE TELEPHONE NUMBER OR FACSIMILE NUMBER]**.  However, please note that under the law, Services such as ours that permit California residents to opt in to, or opt out of, this type of sharing are not required to provide such information upon receiving a request, but rather may respond by notifying the user of his or her right to prevent the disclosure.  To opt out of having information about you shared with third parties for direct marketing purposes, please **[INSERT DESCRIPTION OF OPT OUT MECHANISM]**.
+
+## Contact Us
+
+If you have any questions about this privacy policy, please contact us at:  **[INSERT PHYSICAL AND/OR E-MAIL ADDRESS]**.
+
+**[FINAL NOTE: CERTAIN APPLICATION STORES (E.G., APPLE APP STORE, GOOGLE PLAY, ETC.) MAY REQUIRE YOU TO INCLUDE CERTAIN MINIMUM PRIVACY COMMITMENTS IN THIS PRIVACY POLICY AS A CONDITION TO MAKING YOUR APPLICATION AVAILABLE ON SUCH PLATFORM. IF APPLICABLE, REVIEW YOUR AGREEMENT WITH ANY SUCH APPLICATION STORE TO DETERMINE IF ADDITIONAL PROVISIONS ARE REQUIRED.]**
\ No newline at end of file
diff --git a/static-pages/es/terms-of-service.md b/static-pages/es/terms-of-service.md
new file mode 100644
index 00000000..ac1f9b42
--- /dev/null
+++ b/static-pages/es/terms-of-service.md
@@ -0,0 +1,125 @@
+---
+title: Terms Of Service
+description: "Terms Of Service"
+---
+
+# **[DEVELOPER NAME]** TERMS OF SERVICE
+
+Last Updated: **[DATE]**
+
+These terms of service ("Terms") apply to your access and use of **[APP NAME/WEBSITE/OTHER SERVICES]** (the "Service"). Please read them carefully.
+
+## Accepting these Terms
+
+If you access or use the Service, it means you agree to be bound by all of the terms below. So, before you use the Service, please read all of the terms. If you don't agree to all of the terms below, please do not use the Service. Also, if a term does not make sense to you, please let us know by e-mailing **[SUPPORT EMAIL ADDRESS]**.
+
+## Changes to these Terms
+
+We reserve the right to modify these Terms at any time. For instance, we may need to change these Terms if we come out with a new feature or for some other reason.
+
+Whenever we make changes to these Terms, the changes are effective **[TIME PERIOD]** after we post such revised Terms (indicated by revising the date at the top of these Terms) or upon your acceptance if we provide a mechanism for your immediate acceptance of the revised Terms (such as a click-through confirmation or acceptance button). It is your responsibility to check **[APP NAME]** for changes to these Terms.
+
+If you continue to use the Service after the revised Terms go into effect, then you have accepted the changes to these Terms.
+
+## Privacy Policy
+
+For information about how we collect and use information about users of the Service, please check out our privacy policy available at **[INSERT LINK]**.
+
+## Third-Party Services
+
+From time to time, we may provide you with links to third party websites or services that we do not own or control. Your use of the Service may also include the use of applications that are developed or owned by a third party. Your use of such third party applications, websites, and services is governed by that party's own terms of service or privacy policies. We encourage you to read the terms and conditions and privacy policy of any third party application, website or service that you visit or use.
+
+## Creating Accounts
+
+When you create an account or use another service to log in to the Service, you agree to maintain the security of your password and accept all risks of unauthorized access to any data or other information you provide to the Service.
+
+If you discover or suspect any Service security breaches, please let us know as soon as possible.
+
+## Your Content & Conduct
+
+**[CUSTOMIZE THE FOLLOWING SECTION BASED ON THE TYPE OF CONTENT SUBMITTED BY USERS.]**
+
+Our Service allows you and other users to post, link and otherwise make available content. You are responsible for the content that you make available to the Service, including its legality, reliability, and appropriateness.
+
+When you post, link or otherwise make available content to the Service, you grant us the right and license to use, reproduce, modify, publicly perform, publicly display and distribute your content on or through the Service. We may format your content for display throughout the Service, but we will not edit or revise the substance of your content itself.
+
+Aside from our limited right to your content, you retain all of your rights to the content you post, link and otherwise make available on or through the Service.
+
+**[CUSTOMIZE THE FOLLOWING SECTION BASED ON YOUR DATA RETENTION PRACTICES.]**
+
+You can remove the content that you posted by deleting it. Once you delete your content, it will not appear on the Service, but copies of your deleted content may remain in our system or backups for some period of time. We will retain web server access logs for a maximum of **[TIME PERIOD]** and then delete them.
+
+You may not post, link and otherwise make available on or through the Service any of the following:
+
+**[INCLUDE ANY OTHER CONTENT RESTRICTIONS THAT MAY BE UNIQUE TO YOUR COMPANY.]**
+
+* Content that is libelous, defamatory, bigoted, fraudulent or deceptive;
+* Content that is illegal or unlawful, that would otherwise create liability;
+* Content that may infringe or violate any patent, trademark, trade secret, copyright, right of privacy, right of publicity or other intellectual or other right of any party;
+* Mass or repeated promotions, political campaigning or commercial messages directed at users who do not follow you (SPAM);
+* Private information of any third party (e.g., addresses, phone numbers, email addresses, Social Security numbers and credit card numbers); and
+* Viruses, corrupted data or other harmful, disruptive or destructive files or code.
+
+Also, you agree that you will not do any of the following in connection with the Service or other users:
+
+* Use the Service in any manner that could interfere with, disrupt, negatively affect or inhibit other users from fully enjoying the Service or that could damage, disable, overburden or impair the functioning of the Service;
+* Impersonate or post on behalf of any person or entity or otherwise misrepresent your affiliation with a person or entity;
+* Collect any personal information about other users, or intimidate, threaten, stalk or otherwise harass other users of the Service;
+* Create an account or post any content if you are not over 13 years of age years of age; and
+* Circumvent or attempt to circumvent any filtering, security measures, rate limits or other features designed to protect the Service, users of the Service, or third parties.
+
+## **[DEVELOPER NAME]** Materials
+
+We put a lot of effort into creating the Service including, the logo and all designs, text, graphics, pictures, information and other content (excluding your content). This property is owned by us or our licensors and it is protected by U.S. and international copyright laws. We grant you the right to use it.
+
+However, unless we expressly state otherwise, your rights do not include: (i) publicly performing or publicly displaying the Service; (ii) modifying or otherwise making any derivative uses of the Service or any portion thereof; (iii) using any data mining, robots or similar data gathering or extraction methods; (iv) downloading (other than page caching) of any portion of the Service or any information contained therein; (v) reverse engineering or accessing the Service in order to build a competitive product or service; or (vi) using the Service other than for its intended purposes. If you do any of this stuff, we may terminate your use of the Service.
+
+## Hyperlinks and Third Party Content
+
+You may create a hyperlink to the Service. But, you may not use, frame or utilize framing techniques to enclose any of our trademarks, logos or other proprietary information without our express written consent.
+
+**[DEVELOPER NAME]** makes no claim or representation regarding, and accepts no responsibility for third party websites accessible by hyperlink from the Service or websites linking to the Service. When you leave the Service, you should be aware that these Terms and our policies no longer govern.
+
+If there is any content on the Service from you and others, we don't review, verify or authenticate it, and it may include inaccuracies or false information. We make no representations, warranties, or guarantees relating to the quality, suitability, truth, accuracy or completeness of any content contained in the Service. You acknowledge sole responsibility for and assume all risk arising from your use of or reliance on any content.
+
+## Unavoidable Legal Stuff
+
+THE SERVICE AND ANY OTHER SERVICE AND CONTENT INCLUDED ON OR OTHERWISE MADE AVAILABLE TO YOU THROUGH THE SERVICE ARE PROVIDED TO YOU ON AN AS IS OR AS AVAILABLE BASIS WITHOUT ANY REPRESENTATIONS OR WARRANTIES OF ANY KIND. WE DISCLAIM ANY AND ALL WARRANTIES AND REPRESENTATIONS (EXPRESS OR IMPLIED, ORAL OR WRITTEN) WITH RESPECT TO THE SERVICE AND CONTENT INCLUDED ON OR OTHERWISE MADE AVAILABLE TO YOU THROUGH THE SERVICE WHETHER ALLEGED TO ARISE BY OPERATION OF LAW, BY REASON OF CUSTOM OR USAGE IN THE TRADE, BY COURSE OF DEALING OR OTHERWISE.
+
+IN NO EVENT WILL **[DEVELOPER NAME]** BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY SPECIAL, INDIRECT, INCIDENTAL, EXEMPLARY OR CONSEQUENTIAL DAMAGES OF ANY KIND ARISING OUT OF OR IN CONNECTION WITH THE SERVICE OR ANY OTHER SERVICE AND/OR CONTENT INCLUDED ON OR OTHERWISE MADE AVAILABLE TO YOU THROUGH THE SERVICE, REGARDLESS OF THE FORM OF ACTION, WHETHER IN CONTRACT, TORT, STRICT LIABILITY OR OTHERWISE, EVEN IF WE HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES OR ARE AWARE OF THE POSSIBILITY OF SUCH DAMAGES. OUR TOTAL LIABILITY FOR ALL CAUSES OF ACTION AND UNDER ALL THEORIES OF LIABILITY WILL BE LIMITED TO THE AMOUNT YOU PAID TO **[DEVELOPER NAME]**. THIS SECTION WILL BE GIVEN FULL EFFECT EVEN IF ANY REMEDY SPECIFIED IN THIS AGREEMENT IS DEEMED TO HAVE FAILED OF ITS ESSENTIAL PURPOSE.
+
+You agree to defend, indemnify and hold us harmless from and against any and all costs, damages, liabilities, and expenses (including attorneys' fees, costs, penalties, interest and disbursements) we incur in relation to, arising from, or for the purpose of avoiding, any claim or demand from a third party relating to your use of the Service or the use of the Service by any person using your account, including any claim that your use of the Service violates any applicable law or regulation, or the rights of any third party, and/or your violation of these Terms.
+
+## Copyright Complaints
+
+**[IF YOUR APPLICATION WILL PERMIT USER GENERATED CONTENT, CONSULT WITH LEGAL COUNSEL REGARDING DMCA COMPLIANCE PROCEDURES AND INCLUDE THIS SECTION AND A COPYRIGHT POLICY.]**
+
+We take intellectual property rights seriously. In accordance with the Digital Millennium Copyright Act ("DMCA") and other applicable law, we have adopted a policy of terminating, in appropriate circumstances and, at our sole discretion, access to the service for users who are deemed to be repeat infringers. **[LINK TO FULL COPYRIGHT POLICY IF APPLICABLE.]**
+
+## Governing Law
+
+**[PLEASE NOTE THAT THIS TEMPLATE INCORPORATES TERMS AND SECTIONS THAT ARE INTENDED FOR U.S-BASED SERVICES. CONSULT WITH LEGAL COUNSEL TO DETERMINE THE APPROPRIATE GOVERNING LAW FOR YOUR TERMS AND WHETHER YOU ARE SUBJECT TO ANY ADDITIONAL LEGAL REQUIREMENTS BASED ON HOW AND WHERE YOUR SERVICE OPERATES.]**
+
+The validity of these Terms and the rights, obligations, and relations of the parties under these Terms will be construed and determined under and in accordance with the laws of the **[U.S. STATE NAME OR OTHER JURISDICTION]**, without regard to conflicts of law principles.
+
+## Jurisdiction
+
+You expressly agree that exclusive jurisdiction for any dispute with the Service or relating to your use of it, resides in the courts of the **[STATE NAME OR JURISDICTION]** and you further agree and expressly consent to the exercise of personal jurisdiction in the courts of the **[STATE NAME OR JURISDICTION]** located in **[CITY AND STATE IF APPLICABLE]** in connection with any such dispute including any claim involving Service. You further agree that you and Service will not commence against the other a class action, class arbitration or other representative action or proceeding.
+
+## Termination
+
+If you breach any of these Terms, we have the right to suspend or disable your access to or use of the Service.
+
+## Entire Agreement
+
+These Terms constitute the entire agreement between you and **[DEVELOPER NAME]** regarding the use of the Service, superseding any prior agreements between you and **[DEVELOPER NAME]** relating to your use of the Service.
+
+## Feedback
+
+Please let us know what you think of the Service, these Terms and, in general, **[APP NAME]**. When you provide us with any feedback, comments or suggestions about the Service, these Terms and, in general, **[APP NAME]**, you irrevocably assign to us all of your right, title and interest in and to your feedback, comments and suggestions.
+
+## Questions & Contact Information
+
+Questions or comments about the Service may be directed to us at the email address **[SUPPORT EMAIL ADDRESS]**.
+
+**[FINAL NOTE: CERTAIN APPLICATION STORES (E.G., APPLE APP STORE, GOOGLE PLAY, ETC.) MAY REQUIRE YOU TO INCLUDE ADDITIONAL TERMS AND CONDITIONS IN THESE TERMS OF SERVICE AS A CONDITION TO MAKING YOUR APPLICATION AVAILABLE ON SUCH PLATFORM. IF APPLICABLE, REVIEW YOUR AGREEMENT WITH ANY SUCH APPLICATION STORE TO DETERMINE IF ADDITIONAL TERMS ARE REQUIRED.]**
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ed119b7b..4f4b3168 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -912,6 +912,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.6":
+  version "7.13.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.9.tgz#97dbe2116e2630c489f22e0656decd60aaa1fcee"
+  integrity sha512-aY2kU+xgJ3dJ1eU6FMB9EH8dIe8dmusF1xEku52joLvw6eAFN0AI+WxCLDnpev2LEejWBAy2sBvBOBAjI3zmvA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -5277,6 +5284,13 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-parse-stringify2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 htmlparser2@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-5.0.1.tgz#7daa6fc3e35d6107ac95a4fc08781f091664f6e7"
@@ -5350,6 +5364,13 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+i18next@^19.9.1:
+  version "19.9.1"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.1.tgz#7a072b75daf677aa51fd4ce55214f21702af3ffd"
+  integrity sha512-9Azzyb3DvMJUMd7sPhwVEs6PQcogvdHmLQTjMQ+P+h3XwW4O66/8lgZTmYShgkjPOCqTw4Fwl5LOp/VhZgPo5A==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8349,6 +8370,14 @@ react-google-recaptcha-v3@^1.5.4:
   dependencies:
     hoist-non-react-statics "3.3.2"
 
+react-i18next@^11.8.8:
+  version "11.8.8"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.8.8.tgz#23d34518c784f2ada7cec41cfe439ac4ae51875c"
+  integrity sha512-Z8Daifh+FRpcQsCp48mWQViYSlojv0WiL2bf6e9DOzpfVMDaTT6qsYRbHCjLEeDeEioxoaWHMiWu2JPTW3Ni4w==
+  dependencies:
+    "@babel/runtime" "^7.13.6"
+    html-parse-stringify2 "^2.0.1"
+
 react-is@16.13.1, react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10291,6 +10320,11 @@ vm-browserify@1.1.2, vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

From 96a0d6d91a4c97a641dee7abb9726f3c0d2ab6b4 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Fri, 5 Mar 2021 09:18:36 +0100
Subject: [PATCH 16/26] store purchasing and shipping fees

---
 .../content-form/purchasing-options-form.tsx  | 76 ++++++++++++++-----
 lib/types/purchasing.ts                       |  3 +-
 2 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index 9e653d80..2ef5d45f 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -152,7 +152,7 @@ function ShippingFeeItem({
           value={shippingFee.countryCodes}
           onChange={(val) => onChange({
             ...shippingFee,
-            countryCodes: val
+            countryCodes: val.map(i => i.value)
           })}
           field={{
             name: 'countryCodes',
@@ -218,29 +218,50 @@ export default function PurchasingOptionsForm({
     ev.preventDefault()
     ev.stopPropagation()
 
-    setVariants([...variants, {
+    const newVariants = [...variants, {
       name: '',
       price: 0.0,
       stock: 0,
       default: false
-    }])
+    }]
+
+    setVariants(newVariants)
+
+    onChange({
+      ...value,
+      variants: newVariants
+    })
   }
 
-  const onChangeVariant = (index, value: PurchasingVariantType) => {
-    setVariants(variants.map((item, i) => {
+  const onChangeVariant = (index, variant: PurchasingVariantType) => {
+    const newVariants = variants.map((item, i) => {
       return index === i ? {
-        ...value
+        ...variant
       } : {
           ...item,
-          default: value.default === true ? false : item.default
+          default: variant.default === true ? false : item.default
         }
-    }))
+    })
+    setVariants(newVariants)
+
+    onChange({
+      ...value,
+      variants: newVariants
+    })
+    
   }
 
   const onRemoveVariant = (index) => {
-    setVariants(variants.filter((item, i) => {
+    const newVariants = variants.filter((item, i) => {
       return i !== index
-    }))
+    })
+
+    setVariants(newVariants)
+
+    onChange({
+      ...value,
+      variants: newVariants
+    })
   }
 
 
@@ -248,28 +269,47 @@ export default function PurchasingOptionsForm({
     ev.preventDefault()
     ev.stopPropagation()
 
-    setShippingFees([...shippingFees, {
+    const newShippingFees = [...shippingFees, {
       name: '',
       price: 0.0,
       countryCodes: []
-    }])
+    }]
+
+    setShippingFees(newShippingFees)
+    onChange({
+      ...value,
+      shippingFees: newShippingFees
+    })
   }
 
 
-  const onChangeShippingFee = (index, value: ShippingFeeType) => {
-    setShippingFees(shippingFees.map((item, i) => {
+  const onChangeShippingFee = (index, shippingFee: ShippingFeeType) => {
+    const newShippingFees = shippingFees.map((item, i) => {
       return index === i ? {
-        ...value
+        ...shippingFee
       } : {
           ...item
         }
-    }))
+    })
+    
+    setShippingFees(newShippingFees)
+
+    onChange({
+      ...value,
+      shippingFees: newShippingFees
+    })
   }
 
   const onRemoveShippingFee = (index) => {
-    setShippingFees(shippingFees.filter((item, i) => {
+    const newShippingFees = shippingFees.filter((item, i) => {
       return i !== index
-    }))
+    })
+    
+    setShippingFees(newShippingFees)
+    onChange({
+      ...value,
+      shippingFees: newShippingFees
+    })
   }
 
   return (
diff --git a/lib/types/purchasing.ts b/lib/types/purchasing.ts
index 79cac4a9..056c0a31 100644
--- a/lib/types/purchasing.ts
+++ b/lib/types/purchasing.ts
@@ -18,5 +18,6 @@ export type PurchashingOptionsType = {
   sku: string,
   currency: string,
   price: number,
-  options?: PurchasingVariantType[]
+  variants: PurchasingVariantType[],
+  shippingFees: ShippingFeeType[]
 }
\ No newline at end of file

From 22be4e00b362afe80f32e7a4e4ac64c4c06af726 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sun, 7 Mar 2021 11:07:43 +0100
Subject: [PATCH 17/26] refactor user context and add shopping cart context

---
 .../comments/comment-form/comment-form.tsx    | 171 +-----------------
 .../content-detail-view.tsx                   |   8 +-
 .../purchasing-product-form.tsx               |  18 +-
 components/generic/button/button.tsx          |   4 +-
 components/generic/cookies/index.tsx          |   2 +-
 components/generic/language-chooser/index.tsx |   5 +-
 components/generic/modal/index.tsx            |  90 +++++++++
 components/layout/header/user-header.tsx      |  31 ++--
 .../{cookies.tsx => cookies-context.tsx}      |   0
 lib/client/contexts/edge-user.tsx             |  62 -------
 lib/client/contexts/modal-context.tsx         |  49 +++++
 lib/client/contexts/shopping-cart-context.tsx |  89 +++++++++
 lib/client/contexts/user-context.tsx          |  42 +++++
 lib/client/hooks/loadTranslations.tsx         |   8 +-
 lib/client/hooks/use-user.ts                  |  22 ++-
 lib/types/entities/content.ts                 |   5 +-
 lib/types/entities/shopping-cart.ts           |   2 -
 pages/_app.tsx                                |  19 +-
 pages/content/[type]/[slug].tsx               |   3 +
 test/unit/client/header/header.test.js        |   6 +-
 test/unit/client/index.test.js                |   6 +-
 21 files changed, 350 insertions(+), 292 deletions(-)
 create mode 100644 components/generic/modal/index.tsx
 rename lib/client/contexts/{cookies.tsx => cookies-context.tsx} (100%)
 delete mode 100644 lib/client/contexts/edge-user.tsx
 create mode 100644 lib/client/contexts/modal-context.tsx
 create mode 100644 lib/client/contexts/shopping-cart-context.tsx
 create mode 100644 lib/client/contexts/user-context.tsx

diff --git a/components/comments/comment-form/comment-form.tsx b/components/comments/comment-form/comment-form.tsx
index 3ebdc10f..73bdecba 100644
--- a/components/comments/comment-form/comment-form.tsx
+++ b/components/comments/comment-form/comment-form.tsx
@@ -125,176 +125,7 @@ function CommentForm({
                 target="_blank"
                 title="Add gifs"
               >
-                <svg
-                  width="29.999999999999996"
-                  height="34"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <g>
-                    <title>background</title>
-                    <rect
-                      fill="none"
-                      id="canvas_background"
-                      height="36"
-                      width="32"
-                      y="-1"
-                      x="-1"
-                    />
-                    <g
-                      display="none"
-                      overflow="visible"
-                      y="0"
-                      x="0"
-                      height="100%"
-                      width="100%"
-                      id="canvasGrid"
-                    >
-                      <rect
-                        fill="url(#gridpattern)"
-                        stroke-width="0"
-                        y="0"
-                        x="0"
-                        height="100%"
-                        width="100%"
-                      />
-                    </g>
-                  </g>
-                  <g>
-                    <title>Layer 1</title>
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_1"
-                      y2="214.972057"
-                      x2="152.5"
-                      y1="169.85"
-                      x1="152.5"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_2"
-                      y2="28.104927"
-                      x2="3.950712"
-                      y1="3.939585"
-                      x1="3.950712"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_3"
-                      y2="28.104927"
-                      x2="3.950712"
-                      y1="3.939585"
-                      x1="3.950712"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_5"
-                      y2="27.468997"
-                      x2="25.254971"
-                      y1="27.468997"
-                      x1="4.268677"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <line
-                      stroke="#000"
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_6"
-                      y2="4.098568"
-                      x2="17.792048"
-                      y1="4.098568"
-                      x1="4.268677"
-                      stroke-width="1.5"
-                      fill="none"
-                    />
-                    <line
-                      stroke="#000"
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_8"
-                      y2="10.608374"
-                      x2="25.095386"
-                      y1="27.468998"
-                      x1="25.095386"
-                      fill-opacity="null"
-                      stroke-opacity="null"
-                      stroke-width="1.5"
-                      fill="none"
-                    />
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_9"
-                      y2="11.597758"
-                      x2="24.963416"
-                      y1="4.098568"
-                      x1="17.464225"
-                      fill-opacity="null"
-                      stroke-opacity="null"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_10"
-                      y2="12.206676"
-                      x2="16.669313"
-                      y1="12.206676"
-                      x1="25.413351"
-                      fill-opacity="null"
-                      stroke-opacity="null"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <line
-                      stroke-linecap="undefined"
-                      stroke-linejoin="undefined"
-                      id="svg_11"
-                      y2="13.003088"
-                      x2="17.305243"
-                      y1="4.575515"
-                      x1="17.305243"
-                      fill-opacity="null"
-                      stroke-opacity="null"
-                      stroke-width="1.5"
-                      stroke="#000"
-                      fill="none"
-                    />
-                    <text
-                      font-weight="bold"
-                      text-anchor="start"
-                      font-family="Helvetica, Arial, sans-serif"
-                      font-size="7"
-                      id="svg_15"
-                      y="20"
-                      x="8"
-                      fill-opacity="null"
-                      stroke-opacity="null"
-                      stroke-width="0"
-                      stroke="#000"
-                      fill="#000000"
-                    >
-                      GIF
-                    </text>
-                  </g>
-                </svg>
+                <i className="las la-hat-wizard" style={{fontSize: '18px'}}></i>
               </a>
             </div>
             <div className="action">
diff --git a/components/content/read-content/content-detail-view/content-detail-view.tsx b/components/content/read-content/content-detail-view/content-detail-view.tsx
index bc169c4c..f8f11c2a 100644
--- a/components/content/read-content/content-detail-view/content-detail-view.tsx
+++ b/components/content/read-content/content-detail-view/content-detail-view.tsx
@@ -6,11 +6,11 @@ import Button from '@components/generic/button/button'
 import CommentForm from '../../../comments/comment-form/comment-form'
 import CommentsFeed from '../../../comments/comments-feed/comments-feed'
 import ContentActions from '../../content-actions/content-actions'
+import { ContentEntityType } from '@lib/types'
 import ContentSummaryView from '../content-summary-view/content-summary-view'
 import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
-import FollowButton from '@components/user/follow-button/follow-button'
 import { Interaction } from '@components/generic/interactions'
-import ReactionCounter from '@components/generic/reaction-counter/reaction-counter'
+import PurchasingProductForm from './purchasing-product-form'
 import SocialShare from '@components/generic/social-share/social-share'
 import { format } from 'timeago.js'
 import { purchasingPermission } from '@lib/permissions'
@@ -19,7 +19,7 @@ import { usePermission } from '@lib/client/hooks'
 import { useUser } from '@lib/client/hooks'
 
 interface Props {
-  content: any
+  content: ContentEntityType
   type: ContentTypeDefinition
   summary?: boolean
   showActions?: boolean
@@ -158,7 +158,7 @@ function ContentDetailView(props: Props) {
           />
         </div>
               
-        {purchasingPermission(user, 'buy', props.type.slug) && <PurchasingProductForm product={props.content} /> }
+        {purchasingPermission(user, 'buy', props.type.slug) && props.content.purchasingOptions && <PurchasingProductForm value={props.content.purchasingOptions} /> }
 
         <footer className="edge-item-card-footer">
           <ul className="edge-item-card-stats">
diff --git a/components/content/read-content/content-detail-view/purchasing-product-form.tsx b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
index c2bbc1c7..e531c25c 100644
--- a/components/content/read-content/content-detail-view/purchasing-product-form.tsx
+++ b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
@@ -5,25 +5,27 @@ import Button from '@components/generic/button/button'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
 
 type PropTypes = {
-  value: PurchashingOptionsType,
-  onChange: (val: PurchashingOptionsType) => void
+  value: PurchashingOptionsType
 }
 
 
 export default function PurchasingProductForm({
-  value,
-  onChange
+  value
 }: PropTypes) {
-  const [variants, setVariants] = useState([])
 
   const [selectedVariant, setSelectedVariant] = useState('')
   const [amount, setAmount] = useState(1)
 
   useEffect(() => {
-    setSelectedVariant(value.options.find(i => i.default).name)
+    if (value) {
+      const defaultVariant = value.variants.find(i => i.default) || value.variants[0]
+      if (value.variants.length > 0) {
+        setSelectedVariant(defaultVariant.name)
+      }
+    }
   }, [value])
 
-  const variant = selectedVariant ? value.options.find(i => i.name === name): null
+  const variant = selectedVariant ? value.variants.find(i => i.name === name): null
 
   const totalPrice = variant ? variant.price * amount : value.price * amount
   const currency = '€'
@@ -45,7 +47,7 @@ export default function PurchasingProductForm({
               name: 'Type',
               type: 'select',
               label: 'Type',
-              options: value.options.map(i => {
+              options: value.variants.map(i => {
                 return {
                   label: i.name,
                   value: i.name
diff --git a/components/generic/button/button.tsx b/components/generic/button/button.tsx
index 1f9b5a27..4bf84268 100644
--- a/components/generic/button/button.tsx
+++ b/components/generic/button/button.tsx
@@ -1,7 +1,6 @@
-import { memo } from 'react'
 import Link from 'next/link'
-
 import LoadingSpinner from '../loading/loading-spinner/loading-spinner'
+import { memo } from 'react'
 
 type Props = {
   children?: any
@@ -64,6 +63,7 @@ function Button({
   const buttonItem = (
     <>
       <button
+        title={title}
         className={classNames}
         {...restProps}
         ref={reference}
diff --git a/components/generic/cookies/index.tsx b/components/generic/cookies/index.tsx
index e205fb8c..dba4fd97 100644
--- a/components/generic/cookies/index.tsx
+++ b/components/generic/cookies/index.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react'
 
 import Button from '@components/generic/button/button'
-import { CookiesContext } from '@lib/client/contexts/cookies'
+import { CookiesContext } from '@lib/client/contexts/cookies-context'
 
 export default function Cookies() {
   const { accepted, accept } = useContext(CookiesContext)
diff --git a/components/generic/language-chooser/index.tsx b/components/generic/language-chooser/index.tsx
index fd68dcc2..36d596ce 100644
--- a/components/generic/language-chooser/index.tsx
+++ b/components/generic/language-chooser/index.tsx
@@ -5,7 +5,10 @@ function LanguageChooser(props) {
 
   const onChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
     const val = ev.target.value
-    router.push(router.pathname, router.pathname, { locale: val })
+    router.push({
+      pathname: router.pathname,
+      query: {...router.query},
+    }, router.pathname, { locale: val })
   }
   
   return <div className="language-chooser">
diff --git a/components/generic/modal/index.tsx b/components/generic/modal/index.tsx
new file mode 100644
index 00000000..c64a822f
--- /dev/null
+++ b/components/generic/modal/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+
+export type ModalOptions = {
+  canClose: boolean
+}
+
+type PropTypes = {
+  onClickClose: () => void,
+  children: any,
+  modalOptions: ModalOptions
+}
+
+export default function Modal ({ onClickClose = () => {}, children, modalOptions }: PropTypes) {
+  return (
+    <>
+      <div className="modal-wrapper">
+        <div className="modal-container" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-header">
+            {modalOptions.canClose && <div className="modal-close" onClick={onClickClose}>
+              <i className="la la-times"></i>
+            </div>}
+          </div>
+          <div className="modal-content">{children}</div>
+        </div>
+      </div>
+      <style jsx>{`
+        .modal-wrapper {
+          position: fixed;
+          top: 0;
+          left: 0;
+          background: rgba(0, 0, 0, 0.3);
+          width: 100%;
+          height: 100%;
+          z-index: var(--z-index-modal);
+        }
+
+        .modal-container {
+          background: var(--edge-background-light);
+          border-radius: var(--edge-radius);
+          position: absolute;
+          left: 50%;
+          transform: translate(-50%, -5vh);
+          min-width: 40vw;
+          max-width: 90vw;
+          overflow-x: auto;
+          overflow-y: auto;
+          top:100px;
+          max-height: 90%;
+        }
+
+        .modal-header {
+          padding: 20px 20px 0 20px;
+          position: sticky;
+          top: 0;
+          right: 0;
+          display: flex;
+          justify-content: flex-end;
+          z-index: var(--z-index-modal);
+        }
+
+        .modal-content {
+          padding: 20px;
+        }
+
+        .modal-close {
+          width: 25px;
+          height: 25px;
+          border: 1px solid var(--accents-3);
+          color: var(--accents-6);
+          border-radius: 40px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        @media (max-width: 600px) {
+
+          .modal-container {
+            top: 10vh;
+            width: 90vw;
+          }
+          .modal-content {
+            padding: 20px;
+          }
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/components/layout/header/user-header.tsx b/components/layout/header/user-header.tsx
index 9b610eea..bb3364ee 100644
--- a/components/layout/header/user-header.tsx
+++ b/components/layout/header/user-header.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react'
+import React, { memo, useContext, useState } from 'react'
 import { hasPermission, purchasingPermission } from '@lib/permissions'
 import { useContentTypes, useGroupTypes } from '@lib/client/hooks'
 
@@ -7,32 +7,27 @@ import Button from '@components/generic/button/button'
 import DropdownMenu from '@components/generic/dropdown-menu/dropdown-menu'
 import LanguageChooser from '@components/generic/language-chooser'
 import Link from 'next/link'
+import { ShoppingCartContext } from '@lib/client/contexts/shopping-cart-context'
 import SiteMenu from '@components/generic/site-menu/site-menu'
 import { SuperSearch } from '@components/generic/super-search'
 import ThemeSelector from '@components/generic/theme-selector/theme-selector'
+import { UserContext } from '@lib/client/contexts/user-context'
+import { useTranslation } from 'react-i18next'
 
 function UserHeader(props) {
   const user = props.user
   const contentTypes = useContentTypes(['create', 'admin'])
   const groupTypes = useGroupTypes(['create', 'admin'])
-
+  const { onLogout } = useContext(UserContext)
   const [loading, setLoading] = useState(false)
-
+  const { openShoppingCart } = useContext(ShoppingCartContext)
   const onClickLogout = async () => {
     setLoading(true)
-
-    // Invalidate caches for service worker
-    await caches.keys().then(function (keyList) {
-      return Promise.all(
-        keyList.map(function (key) {
-          return caches.delete(key)
-        })
-      )
-    })
-
-    window.location.href = '/api/auth/logout'
+    onLogout()
   }
 
+  const { t } = useTranslation()
+
   return (
     <div className="edge-user-actions">
       <SuperSearch user={user} />
@@ -43,11 +38,9 @@ function UserHeader(props) {
           {
             purchasingPermission(user, 'buy') && (
               <div className="edge-user-actions-buttons">
-                <Link href={`/shopping-cart/${user.id}`}>
-                  <a title="Shopping cart">
-                    <i className="las la-shopping-cart"></i>
-                  </a>
-                </Link>
+                <Button padding={'10px'} alt onClick={openShoppingCart} title={t('purchasing.shoppingCart.open')}>
+                  <i className="las la-shopping-cart" style={{fontSize: '18px'}}></i>
+                </Button>
               </div>
             )
 
diff --git a/lib/client/contexts/cookies.tsx b/lib/client/contexts/cookies-context.tsx
similarity index 100%
rename from lib/client/contexts/cookies.tsx
rename to lib/client/contexts/cookies-context.tsx
diff --git a/lib/client/contexts/edge-user.tsx b/lib/client/contexts/edge-user.tsx
deleted file mode 100644
index 40ee071f..00000000
--- a/lib/client/contexts/edge-user.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Dispatch, useContext, useEffect, useReducer } from 'react'
-
-import { UserType } from '@lib/types'
-import fetch from '../../fetcher'
-import useSWR from 'swr'
-
-const EdgeStateContext = React.createContext<{
-  user: UserType | null
-  loaded?: boolean
-  error?: boolean
-}>({
-  user: null,
-})
-const EdgeDispatchContext = React.createContext<Dispatch<any>>(() => null)
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'USER':
-      return { ...state, user: action.payload, error: false, loaded: true }
-    case 'NOT_USER':
-      return { ...state, user: null, error: true, loaded: true }
-
-    default:
-      throw new Error(`Unknown action: ${action.type}`)
-  }
-}
-
-export const EdgeUserProvider = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, {
-    user: null,
-  })
-
-  const { data, error } = useSWR(`/api/users/me`, fetch, { errorRetryCount: 2 })
-
-  const finished = Boolean(data) || Boolean(error)
-
-  useEffect(() => {
-    if (finished) {
-      if (data) {
-        dispatch({
-          type: 'USER',
-          payload: data,
-        })
-      } else {
-        dispatch({
-          type: 'NOT_USER',
-        })
-      }
-    }
-  }, [finished, data, error])
-
-  return (
-    <EdgeDispatchContext.Provider value={dispatch}>
-      <EdgeStateContext.Provider value={state}>
-        {children}
-      </EdgeStateContext.Provider>
-    </EdgeDispatchContext.Provider>
-  )
-}
-
-export const useUserState = () => useContext(EdgeStateContext)
-export const useDispatchUserState = () => useContext(EdgeDispatchContext)
diff --git a/lib/client/contexts/modal-context.tsx b/lib/client/contexts/modal-context.tsx
new file mode 100644
index 00000000..191dba99
--- /dev/null
+++ b/lib/client/contexts/modal-context.tsx
@@ -0,0 +1,49 @@
+import Modal, { ModalOptions } from '@components/generic/modal'
+import React, { ReactNode, useState } from 'react'
+
+interface ContextProps {
+  readonly modalOpened: boolean
+  readonly setModalOpened: (val: boolean) => void
+  readonly content: any
+  readonly setModalContent: (item: any) => void
+  readonly setModalOptions: (opts: ModalOptions) => void
+}
+
+export const ModalContext = React.createContext<ContextProps>({
+  modalOpened: false,
+  setModalOpened: (val: boolean) => null,
+  content: null,
+  setModalContent: (item: ReactNode) => null,
+  setModalOptions: (opts: ModalOptions) => null
+})
+
+type PropTypes = {
+  children: ReactNode
+}
+
+export const ModalProvider = ({ children }: PropTypes) => {
+  const [modalOpened, setModalOpened] = useState(false)
+  const [content, setModalContent] = useState(null)
+  const [modalOptions, setModalOptions] = useState<ModalOptions>({
+    canClose: true
+  })
+
+  const openCloseModal = (val: boolean ) => {
+    setModalOpened(val)
+    if (!val) {
+      setModalContent(null)
+    }
+  }
+
+
+  return (
+    <ModalContext.Provider value={{ modalOpened, setModalOpened: openCloseModal, content, setModalContent, setModalOptions }}>
+      {modalOpened && content &&  (
+        <Modal modalOptions={modalOptions} onClickClose={() => openCloseModal(false)}>
+          <div className="content-modal-items">{content}</div>
+        </Modal>
+      )}
+      {children}
+    </ModalContext.Provider>
+  )
+}
diff --git a/lib/client/contexts/shopping-cart-context.tsx b/lib/client/contexts/shopping-cart-context.tsx
new file mode 100644
index 00000000..53d0ac8d
--- /dev/null
+++ b/lib/client/contexts/shopping-cart-context.tsx
@@ -0,0 +1,89 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { ShoppingCartProductType, ShoppingCartType } from '@lib/types'
+
+import Button from '@components/generic/button/button'
+import { UserContext } from './user-context'
+import { useTranslation } from 'react-i18next'
+
+export const ShoppingCartContext = createContext<{
+  shoppingCart: ShoppingCartType | null,
+  addProduct: (i: ShoppingCartProductType) => void,
+  removeProduct: (productId: string) => void,
+  openShoppingCart: () => void
+}>({
+  shoppingCart: null,
+  addProduct: (i) => null,
+  removeProduct: (i) => null,
+  openShoppingCart: () => null
+})
+
+export const ShoopingCartProvider = ({ children }: any) => {
+  const [shoppingCartOpened, setShoppingCartOpened] = useState(false)
+
+  const [shoppingCart, setShoppingCart] = useState<ShoppingCartType>({
+    userId: '',
+    products: [],
+    createdAt: 0,
+  })
+
+  const { user } = useContext(UserContext)
+
+  const addProduct = (prodcut: ShoppingCartProductType) => {
+    // TODO
+  }
+
+  const removeProduct = (productId: string) => {
+    // TODO
+  }
+
+  const updateProduct = (productId: string, product: ShoppingCartProductType) => {
+    // TODO
+  }
+
+  // TODO Load Shopping cart from API
+
+  // TODO Sync shopping cart with API
+
+  const { t } = useTranslation()
+  
+  return (
+    <ShoppingCartContext.Provider value={{
+      shoppingCart, addProduct, removeProduct, openShoppingCart: () => {
+        setShoppingCartOpened(true)
+      }
+    }}>
+      {children}
+      {shoppingCartOpened && <>
+        <div className="shopping-cart-layer">
+          <div className="shopping-cart-layer-top">
+            <div className="shopping-cart-layer-top-title">
+              <h1>Shopping Cart</h1>
+            </div>
+            <div className="shopping-cart-layer-top-actions">
+              <Button title={t('purchasing.shoppingCart.close')}
+               onClick={() => setShoppingCartOpened(false)}><i className="las la-times"></i></Button>
+            </div>
+          </div>
+
+          {JSON.stringify(shoppingCart, null, 2)}
+        </div>
+        <style jsx>{
+          `
+        .shopping-cart-layer {
+          position: fixed;
+          right: 0;
+          top: 0;
+          width: 50%;
+          background: var(--edge-background);
+          height: 100vh;
+          z-index: 1000;
+          padding: var(--edge-gap);
+          transition: all 300ms linear;
+          
+        }
+        `
+        }</style>
+      </>}
+    </ShoppingCartContext.Provider>
+  )
+}
diff --git a/lib/client/contexts/user-context.tsx b/lib/client/contexts/user-context.tsx
new file mode 100644
index 00000000..cf4ae237
--- /dev/null
+++ b/lib/client/contexts/user-context.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { UserType } from '@lib/types'
+import fetch from '../../fetcher'
+import useSWR from 'swr'
+
+export const UserContext = React.createContext<{
+  user: UserType | null
+  loaded?: boolean
+  error?: any,
+  onLogout: () => void
+}>({
+  user: null,
+  onLogout: () => null
+})
+
+export const UserProvider = ({ children }) => {
+
+  const { data, error } = useSWR(`/api/users/me`, fetch, { errorRetryCount: 2 })
+
+  const loaded = Boolean(data) || Boolean(error)
+
+  const onLogout = async () => {
+
+    // Invalidate caches for service worker
+    await caches.keys().then(function (keyList) {
+      return Promise.all(
+        keyList.map(function (key) {
+          return caches.delete(key)
+        })
+      )
+    })
+
+    window.location.href = '/api/auth/logout'
+  }
+
+
+  return (
+    <UserContext.Provider value={{ onLogout, user: data, loaded, error }}>
+      {children}
+    </UserContext.Provider>
+  )
+}
diff --git a/lib/client/hooks/loadTranslations.tsx b/lib/client/hooks/loadTranslations.tsx
index ee11548b..9dee6464 100644
--- a/lib/client/hooks/loadTranslations.tsx
+++ b/lib/client/hooks/loadTranslations.tsx
@@ -11,7 +11,13 @@ export default function() {
     resources: {
       en: {
         translation: {
-          "example": "Hello"
+          "example": "Hello",
+          "purchasing": {
+            "shoppingCart": {
+              "open": "Open shopping cart",
+              "close": "Close shopping cart"
+            }
+          }
         }
       },
       es: {
diff --git a/lib/client/hooks/use-user.ts b/lib/client/hooks/use-user.ts
index f9af5421..0655b549 100644
--- a/lib/client/hooks/use-user.ts
+++ b/lib/client/hooks/use-user.ts
@@ -1,7 +1,8 @@
+import { useContext, useEffect } from 'react'
+
 import Router from 'next/router'
+import { UserContext } from '../contexts/user-context'
 import { UserType } from '@lib/types'
-import { useEffect } from 'react'
-import { useUserState } from '../contexts/edge-user'
 
 declare type UseUserResponse = {
   user: UserType
@@ -15,23 +16,24 @@ export default function useUser({
   redirectTo = '',
   redirectIfFound = false,
 } = {}): UseUserResponse {
-  const userState = useUserState()
+
+  const { user, loaded, error } = useContext(UserContext)
 
   useEffect(() => {
-    if (!redirectTo || !userState.loaded) return
+    if (!redirectTo || !loaded) return
     if (
       // If redirectTo is set, redirect if the user was not found.
-      (redirectTo && !redirectIfFound && !userState.user) ||
+      (redirectTo && !redirectIfFound && !user) ||
       // If redirectIfFound is also set, redirect if the user was found
-      (redirectIfFound && userState.user)
+      (redirectIfFound && user)
     ) {
       Router.push(redirectTo)
     }
-  }, [redirectTo, redirectIfFound, userState.loaded, userState.user])
+  }, [redirectTo, redirectIfFound, loaded, user])
 
   return {
-    user: userState.user,
-    error: userState.error,
-    finished: userState.loaded,
+    user: user,
+    error: error,
+    finished: loaded,
   }
 }
diff --git a/lib/types/entities/content.ts b/lib/types/entities/content.ts
index f27eeee5..6dbedfd9 100644
--- a/lib/types/entities/content.ts
+++ b/lib/types/entities/content.ts
@@ -1,5 +1,7 @@
 import { InteractionEntity, UserType } from '@lib/types'
 
+import { PurchashingOptionsType } from '../purchasing'
+
 export type ContentEntityType = {
   id: string
   slug: string
@@ -24,5 +26,6 @@ export type ContentEntityType = {
   groupId: string
   comments: number
   interactions: InteractionEntity[],
-  visits: number
+  visits: number,
+  purchasingOptions?: PurchashingOptionsType
 }
diff --git a/lib/types/entities/shopping-cart.ts b/lib/types/entities/shopping-cart.ts
index 72a9a830..5747d341 100644
--- a/lib/types/entities/shopping-cart.ts
+++ b/lib/types/entities/shopping-cart.ts
@@ -1,5 +1,3 @@
-import { TDate } from "timeago.js";
-
 export type ShoppingCartProductType = {
   productId: string,
   productContentType: string,
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1876b2be..1631bbfd 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,11 +7,14 @@ import withEdgeTheme, {
   EdgeThemeContext,
 } from '@lib/client/contexts/edge-theme'
 
-import { CookiesProvider } from '@lib/client/contexts/cookies'
-import { EdgeUserProvider } from '@lib/client/contexts/edge-user'
+import { CookiesProvider } from '@lib/client/contexts/cookies-context'
 import Head from 'next/head'
+import { ModalProvider } from '@lib/client/contexts/modal-context'
 import Router from 'next/router'
+import { ShoopingCartProvider } from '@lib/client/contexts/shopping-cart-context'
+import { UserProvider } from '@lib/client/contexts/user-context'
 import { isClient } from '@lib/client/utils'
+import loadTranslations from '@lib/client/hooks/loadTranslations'
 import { useContext } from 'react'
 
 // Store navigation events on Google analytics
@@ -21,6 +24,8 @@ if (isClient()) {
 
 function MyApp({ Component, pageProps }) {
   const { mode } = useContext(EdgeThemeContext)
+  
+  loadTranslations()
 
   return (
     <>
@@ -31,11 +36,15 @@ function MyApp({ Component, pageProps }) {
         />
       </Head>
       <div id="app-container" className={mode}>
-        <EdgeUserProvider>
+        <UserProvider>
           <CookiesProvider>
-            <Component {...pageProps} />
+            <ShoopingCartProvider>
+              <ModalProvider>
+                <Component {...pageProps} />
+              </ModalProvider>
+            </ShoopingCartProvider>
           </CookiesProvider>
-        </EdgeUserProvider>
+        </UserProvider>
       </div>
       <style jsx global>{`
         // Global variables
diff --git a/pages/content/[type]/[slug].tsx b/pages/content/[type]/[slug].tsx
index 8f26e6e2..dee984af 100644
--- a/pages/content/[type]/[slug].tsx
+++ b/pages/content/[type]/[slug].tsx
@@ -18,6 +18,7 @@ export const getServerSideProps: GetServerSideProps = async ({
   req,
   res,
   query,
+  locale
 }) => {
   const contentTypeDefinition = getContentTypeDefinition(query.type)
 
@@ -111,6 +112,8 @@ export const getServerSideProps: GetServerSideProps = async ({
       pageTitle: contentTitle,
       contentType: contentTypeDefinition,
       monetizationMeta: monetizationMeta || '',
+      query,
+      locale
     },
   }
 }
diff --git a/test/unit/client/header/header.test.js b/test/unit/client/header/header.test.js
index be063273..721d29e9 100644
--- a/test/unit/client/header/header.test.js
+++ b/test/unit/client/header/header.test.js
@@ -1,6 +1,6 @@
-import { EdgeUserProvider } from '../../../../lib/client/contexts/edge-user'
 import Index from '../../../../components/layout/header/header'
 import React from 'react'
+import { UserProvider } from '../../../../lib/client/contexts/edge-user'
 import { render } from '@testing-library/react'
 
 describe('header test suite', () => {
@@ -20,9 +20,9 @@ describe('header test suite', () => {
 
   test('renders login link in header', () => {
     const { getByText } = render(
-      <EdgeUserProvider>
+      <UserProvider>
         <Index />
-      </EdgeUserProvider>
+      </UserProvider>
     )
     const linkElement = getByText(/Login/)
     expect(linkElement).toBeInTheDocument()
diff --git a/test/unit/client/index.test.js b/test/unit/client/index.test.js
index 79784e19..daddf30f 100644
--- a/test/unit/client/index.test.js
+++ b/test/unit/client/index.test.js
@@ -1,6 +1,6 @@
-import { EdgeUserProvider } from '../../../lib/client/contexts/edge-user'
 import Index from '../../../pages/index'
 import React from 'react'
+import { UserProvider } from '../../../lib/client/contexts/edge-user'
 import { render } from '@testing-library/react'
 
 describe('Home page', () => {
@@ -19,9 +19,9 @@ describe('Home page', () => {
   })
   test('renders login link', () => {
     const { getAllByText } = render(
-      <EdgeUserProvider>
+      <UserProvider>
         <Index />
-      </EdgeUserProvider>
+      </UserProvider>
     )
     const linkElements = getAllByText(/Login/)
   

From 9fa3fd380d9e8584d42360f1d2d343990b39daa4 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sun, 7 Mar 2021 11:31:20 +0100
Subject: [PATCH 18/26] purchasing counter

---
 .../purchasing-product-form.tsx               | 33 +++++++++++++------
 .../generic/badge/{badge.js => badge.tsx}     | 13 ++++++--
 components/layout/header/user-header.tsx      | 10 +++++-
 lib/client/contexts/shopping-cart-context.tsx |  8 +++--
 lib/client/hooks/loadTranslations.tsx         |  6 ++--
 pages/content/[type]/[slug].tsx               |  2 --
 6 files changed, 53 insertions(+), 19 deletions(-)
 rename components/generic/badge/{badge.js => badge.tsx} (92%)

diff --git a/components/content/read-content/content-detail-view/purchasing-product-form.tsx b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
index e531c25c..dc52811b 100644
--- a/components/content/read-content/content-detail-view/purchasing-product-form.tsx
+++ b/components/content/read-content/content-detail-view/purchasing-product-form.tsx
@@ -1,8 +1,10 @@
 import { PurchashingOptionsType, PurchasingVariantType } from '@lib/types/purchasing'
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import Button from '@components/generic/button/button'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+import { ShoppingCartContext } from '@lib/client/contexts/shopping-cart-context'
+import { useTranslation } from 'react-i18next'
 
 type PropTypes = {
   value: PurchashingOptionsType
@@ -15,31 +17,40 @@ export default function PurchasingProductForm({
 
   const [selectedVariant, setSelectedVariant] = useState('')
   const [amount, setAmount] = useState(1)
+  const { addProduct } = useContext(ShoppingCartContext)
 
   useEffect(() => {
-    if (value) {
+    if (value && value.variants && value.variants.length > 0) {
       const defaultVariant = value.variants.find(i => i.default) || value.variants[0]
-      if (value.variants.length > 0) {
-        setSelectedVariant(defaultVariant.name)
-      }
+      setSelectedVariant(defaultVariant.name)
+      
     }
   }, [value])
 
-  const variant = selectedVariant ? value.variants.find(i => i.name === name): null
+  const variant = selectedVariant ? value.variants.find(i => i.name === name) : null
 
   const totalPrice = variant ? variant.price * amount : value.price * amount
   const currency = '€'
 
   const addToCart = () => {
+    addProduct({
+      amount,
+      productContentType: 'a',
+      productId: 'a',
+      sellerId: 'a',
+      variant: selectedVariant,
+    })
 
   }
 
+  const { t } = useTranslation()
+
   return (
     <>
       <div className="purchasing-product-form">
         <h3>Purchase item</h3>
         <div className="variant-selector">
-          <DynamicFieldEdit
+          { value.variants && value.variants.length > 0 && <DynamicFieldEdit
             name="variant"
             value={selectedVariant}
             onChange={(val) => setSelectedVariant(name)}
@@ -53,7 +64,7 @@ export default function PurchasingProductForm({
                   value: i.name
                 }
               })
-            }} />
+            }} />}
 
           <DynamicFieldEdit
             name="amount"
@@ -67,12 +78,14 @@ export default function PurchasingProductForm({
               max: 10000
             }} />
         </div>
+
+        
         <div className="price">
           {totalPrice} {currency}
         </div>
 
-        
-        <Button onClick={addToCart}>Add to cart</Button>
+
+        <Button title={t('purchasing.shoppingCart.add')} onClick={addToCart}>{t('purchasing.shoppingCart.add')}</Button>
       </div>
       <style jsx>{
         `
diff --git a/components/generic/badge/badge.js b/components/generic/badge/badge.tsx
similarity index 92%
rename from components/generic/badge/badge.js
rename to components/generic/badge/badge.tsx
index 0d22f48a..5fe7bcdd 100644
--- a/components/generic/badge/badge.js
+++ b/components/generic/badge/badge.tsx
@@ -1,6 +1,15 @@
-import { memo } from 'react'
+import { ReactNode, memo } from 'react'
+
+type PropTypes = {
+  children: ReactNode,
+  featured?: boolean,
+  secondary?: boolean,
+  warning?: boolean,
+  alert?: boolean,
+  success?: boolean
+}
 
-function Badge({ children, featured, success, secondary, warning, alert }) {
+function Badge({ children, featured, success, secondary, warning, alert }: PropTypes) {
   return (
     <>
       <div
diff --git a/components/layout/header/user-header.tsx b/components/layout/header/user-header.tsx
index bb3364ee..6ac9b0b8 100644
--- a/components/layout/header/user-header.tsx
+++ b/components/layout/header/user-header.tsx
@@ -3,6 +3,7 @@ import { hasPermission, purchasingPermission } from '@lib/permissions'
 import { useContentTypes, useGroupTypes } from '@lib/client/hooks'
 
 import Avatar from '@components/user/avatar/avatar'
+import Badge from '@components/generic/badge/badge'
 import Button from '@components/generic/button/button'
 import DropdownMenu from '@components/generic/dropdown-menu/dropdown-menu'
 import LanguageChooser from '@components/generic/language-chooser'
@@ -20,7 +21,7 @@ function UserHeader(props) {
   const groupTypes = useGroupTypes(['create', 'admin'])
   const { onLogout } = useContext(UserContext)
   const [loading, setLoading] = useState(false)
-  const { openShoppingCart } = useContext(ShoppingCartContext)
+  const { openShoppingCart, shoppingCart } = useContext(ShoppingCartContext)
   const onClickLogout = async () => {
     setLoading(true)
     onLogout()
@@ -40,6 +41,13 @@ function UserHeader(props) {
               <div className="edge-user-actions-buttons">
                 <Button padding={'10px'} alt onClick={openShoppingCart} title={t('purchasing.shoppingCart.open')}>
                   <i className="las la-shopping-cart" style={{fontSize: '18px'}}></i>
+                  <span className="products" style={{
+                    position: 'absolute',
+                    bottom: '-5px',
+                    right: '-5px'
+                  }}>
+                    <Badge success={true} >{shoppingCart.products.length}</Badge> 
+                  </span>
                 </Button>
               </div>
             )
diff --git a/lib/client/contexts/shopping-cart-context.tsx b/lib/client/contexts/shopping-cart-context.tsx
index 53d0ac8d..17b2adf5 100644
--- a/lib/client/contexts/shopping-cart-context.tsx
+++ b/lib/client/contexts/shopping-cart-context.tsx
@@ -28,8 +28,12 @@ export const ShoopingCartProvider = ({ children }: any) => {
 
   const { user } = useContext(UserContext)
 
-  const addProduct = (prodcut: ShoppingCartProductType) => {
+  const addProduct = (product: ShoppingCartProductType) => {
     // TODO
+    setShoppingCart({
+      ...shoppingCart,
+      products: [product, ...shoppingCart.products]
+    })
   }
 
   const removeProduct = (productId: string) => {
@@ -57,7 +61,7 @@ export const ShoopingCartProvider = ({ children }: any) => {
         <div className="shopping-cart-layer">
           <div className="shopping-cart-layer-top">
             <div className="shopping-cart-layer-top-title">
-              <h1>Shopping Cart</h1>
+              <h1>{t('purchasing.shoppingCart.title')}</h1>
             </div>
             <div className="shopping-cart-layer-top-actions">
               <Button title={t('purchasing.shoppingCart.close')}
diff --git a/lib/client/hooks/loadTranslations.tsx b/lib/client/hooks/loadTranslations.tsx
index 9dee6464..5b264e29 100644
--- a/lib/client/hooks/loadTranslations.tsx
+++ b/lib/client/hooks/loadTranslations.tsx
@@ -11,11 +11,13 @@ export default function() {
     resources: {
       en: {
         translation: {
-          "example": "Hello",
           "purchasing": {
             "shoppingCart": {
+              "title": "Shopping Cart",
               "open": "Open shopping cart",
-              "close": "Close shopping cart"
+              "close": "Close shopping cart",
+              "add": "Add to cart",
+              "remove": "Remove from cart"
             }
           }
         }
diff --git a/pages/content/[type]/[slug].tsx b/pages/content/[type]/[slug].tsx
index dee984af..f389565c 100644
--- a/pages/content/[type]/[slug].tsx
+++ b/pages/content/[type]/[slug].tsx
@@ -112,8 +112,6 @@ export const getServerSideProps: GetServerSideProps = async ({
       pageTitle: contentTitle,
       contentType: contentTypeDefinition,
       monetizationMeta: monetizationMeta || '',
-      query,
-      locale
     },
   }
 }

From d4a41b7db638cc0f0ba9dc261e85f7de349b6a9a Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Mon, 8 Mar 2021 08:21:07 +0100
Subject: [PATCH 19/26] move slug to seo form

---
 .../content-table/actions-cell.tsx            |  2 +-
 .../content-table/content-table.tsx           |  2 +-
 .../content-actions/content-actions.tsx       |  4 +--
 .../content-detail-view.tsx                   |  6 ++--
 .../write-content/content-form/seo-form.tsx   |  0
 .../dynamic-field/dynamic-field-view.js       |  2 +-
 .../generic/super-search/components/list.tsx  | 11 ++++----
 .../groups-table/actions-cell.tsx             |  2 +-
 .../groups-table/groups-table.tsx             |  2 +-
 .../groups/group-actions/group-actions.tsx    |  5 ++--
 .../group-summary-view/group-summary-view.tsx | 16 +++++------
 .../groups/read/group-tabs/group-tabs.tsx     | 11 ++++----
 .../groups/write/group-form/group-form.tsx    | 14 +++++-----
 lib/api/hooks/content.hooks.ts                |  4 +--
 lib/api/hooks/group.hooks.ts                  | 28 +++++++++++--------
 lib/email/index.ts                            | 12 ++++----
 lib/types/entities/content.ts                 |  3 +-
 lib/types/entities/group.ts                   |  3 +-
 lib/types/seo.ts                              |  5 ++++
 pages/api/content/[type]/[slug].ts            |  2 +-
 pages/api/groups/[type]/[slug].ts             |  9 +++---
 pages/api/groups/[type]/[slug]/users.ts       |  7 ++---
 .../groups/[type]/[slug]/users/[userId].ts    |  7 +++--
 pages/content/[type]/[slug].tsx               |  2 +-
 pages/group/[type]/[slug].tsx                 |  2 +-
 25 files changed, 86 insertions(+), 75 deletions(-)
 create mode 100644 components/content/write-content/content-form/seo-form.tsx
 create mode 100644 lib/types/seo.ts

diff --git a/components/content/admin-content/content-table/actions-cell.tsx b/components/content/admin-content/content-table/actions-cell.tsx
index 024dcd2b..b4ed5db1 100644
--- a/components/content/admin-content/content-table/actions-cell.tsx
+++ b/components/content/admin-content/content-table/actions-cell.tsx
@@ -43,7 +43,7 @@ function ActionsCell({ slug, deleteRequest, item }: Props) {
         <ul>
           {!success && (
             <li>
-              <Button fullWidth title="Edit" href={`/edit/content/${slug}/${item.slug}`}>Edit</Button>
+              <Button fullWidth title="Edit" href={`/edit/content/${slug}/${item.seo.slug}`}>Edit</Button>
             </li>
           )}
           {!success && (
diff --git a/components/content/admin-content/content-table/content-table.tsx b/components/content/admin-content/content-table/content-table.tsx
index 114704da..2a84c3bf 100644
--- a/components/content/admin-content/content-table/content-table.tsx
+++ b/components/content/admin-content/content-table/content-table.tsx
@@ -76,7 +76,7 @@ function ContentTable({ type }: Props) {
 
           if (index === 0) {
             return (
-              <Link href={`/content/${type.slug}/${item.slug}`}>
+              <Link href={`/content/${type.slug}/${item.seo.slug}`}>
                 <a title={label || name}>{componentCell}</a>
               </Link>
             )
diff --git a/components/content/content-actions/content-actions.tsx b/components/content/content-actions/content-actions.tsx
index fdbce806..aae55cf4 100644
--- a/components/content/content-actions/content-actions.tsx
+++ b/components/content/content-actions/content-actions.tsx
@@ -1,9 +1,9 @@
 import React, { memo } from 'react'
 
 import Button from '@components/generic/button/button'
+import { ContentEntityType } from '@lib/types'
 import { contentPermission } from '@lib/permissions'
 import { useUser } from '@lib/client/hooks'
-import { ContentEntityType } from '@lib/types'
 
 type Props = {
   content?: Partial<ContentEntityType>
@@ -23,7 +23,7 @@ function ContentActions({ content = {}, className }: Props) {
   return (
     <div className={`content-actions ${className}`}>
       {canEdit && (
-        <Button href={`/edit/content/${content.type}/${content.slug}`}>
+        <Button href={`/edit/content/${content.type}/${content.seo.slug}`}>
           Edit
         </Button>
       )}
diff --git a/components/content/read-content/content-detail-view/content-detail-view.tsx b/components/content/read-content/content-detail-view/content-detail-view.tsx
index f8f11c2a..827d263b 100644
--- a/components/content/read-content/content-detail-view/content-detail-view.tsx
+++ b/components/content/read-content/content-detail-view/content-detail-view.tsx
@@ -38,7 +38,7 @@ function ContentDetailView(props: Props) {
   const shareUrl =
     typeof window !== 'undefined'
       ? `${String(window.location)}/content/${props.type.slug}/${
-          props.content.slug
+          props.content.seo.slug
         }`
       : ''
   const [showComments, setShowComments] = useState(!!props.showComments)
@@ -97,7 +97,7 @@ function ContentDetailView(props: Props) {
               </p>
 
               <Button
-                href={`/content/${props.type.slug}/${props.content.slug}`}
+                href={`/content/${props.type.slug}/${props.content.seo.slug}`}
               >
                 See full content
               </Button>
@@ -135,7 +135,7 @@ function ContentDetailView(props: Props) {
             {(canEditComment.available || isContentOwner) && (
               <div className="header-item-action">
                 <Button
-                  href={`/edit/content/${props.content.type}/${props.content.slug}`}
+                  href={`/edit/content/${props.content.type}/${props.content.seo.slug}`}
                   round
                   aria-label="round button"
                 >
diff --git a/components/content/write-content/content-form/seo-form.tsx b/components/content/write-content/content-form/seo-form.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/components/generic/dynamic-field/dynamic-field-view.js b/components/generic/dynamic-field/dynamic-field-view.js
index 1420aa9b..140c56f4 100644
--- a/components/generic/dynamic-field/dynamic-field-view.js
+++ b/components/generic/dynamic-field/dynamic-field-view.js
@@ -118,7 +118,7 @@ function Field({ field, value, typeDefinition }) {
                 <b>Linked items:</b>
                 {value && value.length > 0 && value.map(i => (                  
                   <div className="entity-item">
-                    <Link href={`/${field.entity}/${field.entityType}/${i.slug}`}>
+                    <Link href={`/${field.entity}/${field.entityType}/${i.seo.slug}`}>
                       <a>{field.entityNameGetter(i)}`</a>
                     </Link>
                   </div>
diff --git a/components/generic/super-search/components/list.tsx b/components/generic/super-search/components/list.tsx
index 94db8756..c9c3955f 100644
--- a/components/generic/super-search/components/list.tsx
+++ b/components/generic/super-search/components/list.tsx
@@ -1,17 +1,16 @@
-import React, { memo, useMemo, Fragment, useRef } from 'react'
-
 import {
   ContentTypeDefinition,
   GroupEntityType,
   SuperSearchResponse,
   UserType,
 } from '@lib/types'
-import { useOnScreen } from '@lib/client/hooks'
-import ArrowDown from '@icons/arrow-down.svg'
+import React, { Fragment, memo, useMemo, useRef } from 'react'
 
-import UserItem from './user-item'
+import ArrowDown from '@icons/arrow-down.svg'
 import ContentItems from './content-items'
 import GroupItem from './group-item'
+import UserItem from './user-item'
+import { useOnScreen } from '@lib/client/hooks'
 
 interface Props {
   data: SuperSearchResponse[]
@@ -69,7 +68,7 @@ function List({ data, isLoading }: Props) {
               <Fragment key={name}>
                 {!!groupData.length &&
                   (groupData as Partial<GroupEntityType>[]).map((group) => (
-                    <GroupItem key={group.slug} group={group} />
+                    <GroupItem key={group.seo.slug} group={group} />
                   ))}
               </Fragment>
             ))}
diff --git a/components/groups/admin-groups/groups-table/actions-cell.tsx b/components/groups/admin-groups/groups-table/actions-cell.tsx
index 8f071d7e..15958eb8 100644
--- a/components/groups/admin-groups/groups-table/actions-cell.tsx
+++ b/components/groups/admin-groups/groups-table/actions-cell.tsx
@@ -43,7 +43,7 @@ function ActionsCell({ slug, deleteRequest, item }: Props) {
         <ul>
           {!success && (
             <li>
-              <Button fullWidth title="Edit" href={`/edit/group/${slug}/${item.slug}`}>Edit</Button>
+              <Button fullWidth title="Edit" href={`/edit/group/${slug}/${item.seo.slug}`}>Edit</Button>
             </li>
           )}
           {!success && (
diff --git a/components/groups/admin-groups/groups-table/groups-table.tsx b/components/groups/admin-groups/groups-table/groups-table.tsx
index df028514..de286ca6 100644
--- a/components/groups/admin-groups/groups-table/groups-table.tsx
+++ b/components/groups/admin-groups/groups-table/groups-table.tsx
@@ -75,7 +75,7 @@ function GroupsTable({ type }: Props) {
 
           if (index === 0) {
             return (
-              <Link href={`/group/${type.slug}/${item.slug}`}>
+              <Link href={`/group/${type.slug}/${item.seo.slug}`}>
                 <a>{value}</a>
               </Link>
             )
diff --git a/components/groups/group-actions/group-actions.tsx b/components/groups/group-actions/group-actions.tsx
index e197f81e..1008a435 100644
--- a/components/groups/group-actions/group-actions.tsx
+++ b/components/groups/group-actions/group-actions.tsx
@@ -1,8 +1,7 @@
-import { memo } from 'react'
-
 import Button from '@components/generic/button/button'
 import { GroupEntityType } from '@lib/types'
 import { groupPermission } from '@lib/permissions'
+import { memo } from 'react'
 import { useUser } from '@lib/client/hooks'
 
 interface Props {
@@ -21,7 +20,7 @@ function GroupActions(props: Props) {
         {canEdit && (
           <a
             className="edit-button"
-            href={`/edit/group/${group.type}/${group.slug}`}
+            href={`/edit/group/${group.type}/${group.seo.slug}`}
           >
             <img
               style={{ width: '15px' }}
diff --git a/components/groups/read/group-summary-view/group-summary-view.tsx b/components/groups/read/group-summary-view/group-summary-view.tsx
index f7ac1355..90950b03 100644
--- a/components/groups/read/group-summary-view/group-summary-view.tsx
+++ b/components/groups/read/group-summary-view/group-summary-view.tsx
@@ -1,17 +1,17 @@
+import { GroupEntityType, GroupTypeDefinition } from '@lib/types'
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { cypheredFieldPermission, groupUserPermission } from '@lib/permissions'
 
-import { GroupEntityType, GroupTypeDefinition } from '@lib/types'
 import API from '@lib/api/api-endpoints'
 import Button from '@components/generic/button/button'
 import DynamicFieldView from '@components/generic/dynamic-field/dynamic-field-view'
 import { FIELDS } from '@lib/constants'
 import GroupMembers from '@components/groups/group-members/group-members'
+import { Interaction } from '@components/generic/interactions'
 import Link from 'next/link'
 import fetch from '@lib/fetcher'
-import { cypheredFieldPermission, groupUserPermission } from '@lib/permissions'
-import { useUser } from '@lib/client/hooks'
-import { Interaction } from '@components/generic/interactions'
 import { getInteractionsDefinition } from '@lib/config'
+import { useUser } from '@lib/client/hooks'
 
 interface Props {
   linkToDetail?: boolean
@@ -90,7 +90,7 @@ function SummaryView({
   const handleJoinRequest = useCallback(() => {
     setIsLoading(true)
 
-    fetch(`${API.groups[group.type]}/${group.slug}/users`, {
+    fetch(`${API.groups[group.type]}/${group.seo.slug}/users`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(currentUser.user),
@@ -101,7 +101,7 @@ function SummaryView({
       })
       .catch(() => setError(true))
       .finally(() => setIsLoading(false))
-  }, [currentUser, group.type, group.slug])
+  }, [currentUser, group.type, group.seo.slug])
 
   const interactionsConfig = getInteractionsDefinition('group', type.slug)
   const isGroupCreation = useMemo(() => !group?.id, [group?.id])
@@ -120,7 +120,7 @@ function SummaryView({
                     key={`${field.name}-${group.id}`}
                   >
                     {linkToDetail && (
-                      <Link href={`/group/${type.slug}/${group.slug}`}>
+                      <Link href={`/group/${type.slug}/${group.seo.slug}`}>
                         <a>{group[field.name]}</a>
                       </Link>
                     )}
@@ -141,7 +141,7 @@ function SummaryView({
               return (
                 <div className="description" key={`${field.name}-${group.id}`}>
                   {shouldAddLink(field) && (
-                    <Link href={`/group/${type.slug}/${group.slug}`}>
+                    <Link href={`/group/${type.slug}/${group.seo.slug}`}>
                       <a title="Go to item detail">
                         <DynamicFieldView
                           field={field}
diff --git a/components/groups/read/group-tabs/group-tabs.tsx b/components/groups/read/group-tabs/group-tabs.tsx
index c2c78f14..fc275a82 100644
--- a/components/groups/read/group-tabs/group-tabs.tsx
+++ b/components/groups/read/group-tabs/group-tabs.tsx
@@ -1,15 +1,14 @@
 import React, { memo, useMemo } from 'react'
-
 import { Tabs, useTab } from '@components/generic/tabs'
 import { getContentTypeDefinition, getGroupTypeDefinition } from '@lib/config'
-import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
-import { GroupEntityType } from '@lib/types/entities/group'
 import { groupContentPermission, groupUserPermission } from '@lib/permissions'
-import { useUser } from '@lib/client/hooks'
-import ContentListView from '@components/content/read-content/content-list-view/content-list-view'
 
+import ContentListView from '@components/content/read-content/content-list-view/content-list-view'
+import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
+import { GroupEntityType } from '@lib/types/entities/group'
 import MembersTab from './members-tab'
 import PendingMembersTab from './pending-members-tab'
+import { useUser } from '@lib/client/hooks'
 
 interface Props {
   id: string
@@ -45,7 +44,7 @@ function GroupTabs({ id, group }: Props) {
 
   const canUpdate = groupUserPermission(
     currentUser.user,
-    groupType,
+    groupType.slug,
     'update',
     group
   )
diff --git a/components/groups/write/group-form/group-form.tsx b/components/groups/write/group-form/group-form.tsx
index 7dfbcf7e..13f60c6a 100644
--- a/components/groups/write/group-form/group-form.tsx
+++ b/components/groups/write/group-form/group-form.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useState, memo, useCallback } from 'react'
-import Link from 'next/link'
-import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldType, GroupEntityType, GroupTypeDefinition } from '@lib/types'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 
 import API from '@lib/api/api-endpoints'
 import Button from '@components/generic/button/button'
 import DynamicField from '@components/generic/dynamic-field/dynamic-field-edit'
-import Toggle from '@components/generic/toggle/toggle'
-import fetch from '@lib/fetcher'
 import { FIELDS } from '@lib/constants'
-import { FieldType, GroupEntityType, GroupTypeDefinition } from '@lib/types'
 import GroupSummaryView from '../../read/group-summary-view/group-summary-view'
+import Link from 'next/link'
+import Toggle from '@components/generic/toggle/toggle'
+import fetch from '@lib/fetcher'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
 
 type Props = {
   type: GroupTypeDefinition
@@ -185,7 +185,7 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
           {success && (
             <div className="success-message">
               Saved: You can see it{' '}
-              <Link href={`/group/${type.slug}/${group.slug}`}>
+              <Link href={`/group/${type.slug}/${group.seo.slug}`}>
                 <a title="View Content">here</a>
               </Link>
             </div>
diff --git a/lib/api/hooks/content.hooks.ts b/lib/api/hooks/content.hooks.ts
index d96b030e..8f2fc56f 100644
--- a/lib/api/hooks/content.hooks.ts
+++ b/lib/api/hooks/content.hooks.ts
@@ -45,7 +45,7 @@ export function onContentAdded(content: ContentEntityType, user: UserType) {
       type: ACTIVITY_TYPES.CONTENT_ADDED,
       meta: {
         contentId: content.id,
-        contentSlug: content.slug,
+        contentSlug: content.seo.slug,
         contentTitle: content.title, // This will not work with dynamic fields
         contentType: content.type,
         groupType: content.groupType,
@@ -63,7 +63,7 @@ export function onContentUpdated(content: ContentEntityType, user:UserType) {
       type: ACTIVITY_TYPES.CONTENT_UPDATED,
       meta: {
         contentId: content.id,
-        contentSlug: content.slug,
+        contentSlug: content.seo.slug,
         contentTitle: content.title, // This will not work with dynamic fields
         contentType: content.type,
         groupType: content.groupType,
diff --git a/lib/api/hooks/group.hooks.ts b/lib/api/hooks/group.hooks.ts
index ba0a5e58..9c2b13b8 100644
--- a/lib/api/hooks/group.hooks.ts
+++ b/lib/api/hooks/group.hooks.ts
@@ -1,3 +1,4 @@
+import { GroupEntityType, GroupTypeDefinition, UserType } from '@lib/types'
 import {
   addActivity,
   deleteActivity,
@@ -14,13 +15,14 @@ import { deleteFile } from '@lib/api/storage'
 import {
   deleteInteractions,
 } from '@lib/api/entities/interactions'
+import { findOneUser } from '../entities/users'
 import logger from '@lib/logger'
 import {
   onContentDeleted,
 } from './content.hooks'
 import { sendRequestToJoinToGroupEmail } from '@lib/email'
 
-export function onGroupAdded(group, user) {
+export function onGroupAdded(group:GroupEntityType, user: UserType) {
   if (config.activity.enabled && group) {
     addActivity({
       author: user.id,
@@ -28,7 +30,7 @@ export function onGroupAdded(group, user) {
       type: ACTIVITY_TYPES.GROUP_ADDED,
       meta: {
         groupId: group.id,
-        groupSlug: group.slug,
+        groupSlug: group.seo.slug,
         groupTitle: group.title, // This will not work with dynamic fields
         groupType: group.type,
       },
@@ -36,7 +38,7 @@ export function onGroupAdded(group, user) {
   }
 }
 
-export function onGroupUpdated(data, user) {
+export function onGroupUpdated(data: GroupEntityType, user: UserType) {
   if (config.activity.enabled && data) {
     addActivity({
       author: user.id,
@@ -44,7 +46,7 @@ export function onGroupUpdated(data, user) {
       type: ACTIVITY_TYPES.GROUP_UPDATED,
       meta: {
         groupId: data.id,
-        groupSlug: data.slug,
+        groupSlug: data.seo.slug,
         groupTitle: data.title, // This will not work with dynamic fields
         groupType: data.type,
       },
@@ -52,16 +54,16 @@ export function onGroupUpdated(data, user) {
   }
 }
 
-export function onGroupJoinDisapprove(data, user) {
+export function onGroupJoinDisapprove(data: GroupEntityType, userId: string, user: UserType) {
   if (config.activity.enabled && data) {
     addActivity({
       author: user.id,
       role: 'user',
       type: ACTIVITY_TYPES.GROUP_MEMBER_JOIN_DISAPPROVE,
       meta: {
-        userId: data.userId,
+        userId: userId,
         groupId: data.id,
-        groupSlug: data.slug,
+        groupSlug: data.seo.slug,
         groupTitle: data.title, // This will not work with dynamic fields
         groupType: data.type,
       },
@@ -69,7 +71,8 @@ export function onGroupJoinDisapprove(data, user) {
   }
 }
 
-export function onGroupJoinRequest(group, user, groupAuthorEmail, groupType) {
+export async function onGroupJoinRequest(group: GroupEntityType, user: UserType) {
+
   if (config.activity.enabled && group) {
     addActivity({
       author: user.id,
@@ -77,7 +80,7 @@ export function onGroupJoinRequest(group, user, groupAuthorEmail, groupType) {
       type: ACTIVITY_TYPES.GROUP_MEMBER_JOIN_REQUEST,
       meta: {
         groupId: group.id,
-        groupSlug: group.slug,
+        groupSlug: group.seo.slug,
         groupTitle: group.title,
         groupType: group.type,
         userId: user.id,
@@ -85,10 +88,13 @@ export function onGroupJoinRequest(group, user, groupAuthorEmail, groupType) {
     })
   }
 
-  sendRequestToJoinToGroupEmail(groupAuthorEmail, groupType, group)
+  const { email } = await findOneUser({ id: group.author })
+
+
+  sendRequestToJoinToGroupEmail(email, group.type, group)
 }
 
-export async function onGroupDeleted(group, user, groupType) {
+export async function onGroupDeleted(group: GroupEntityType, user: UserType, groupType: GroupTypeDefinition) {
   // Delete group files
   try {
     groupType.fields.forEach(async (field) => {
diff --git a/lib/email/index.ts b/lib/email/index.ts
index 0ec53a68..8e530f97 100644
--- a/lib/email/index.ts
+++ b/lib/email/index.ts
@@ -1,6 +1,6 @@
 import { EmailCreationType } from '@lib/types/entities/email'
+import { GroupEntityType } from '@lib/types'
 import Markdown from '@lib/markdown'
-import { UserType } from '@lib/types'
 import callToActionTemplate from './email-templates/call-to-action.template'
 import config from '../config'
 import sendEmail from './sender'
@@ -12,7 +12,7 @@ const md = Markdown({
 })
 
 // Send an email to verify the new email address
-export const sendVerifyEmail = (to, token) => {
+export const sendVerifyEmail = (to: string, token: string) => {
   const linkToVerifyEmail = `${
     process.env.BASE_URL
     }/auth/verify?email=${to}&date=${Date.now()}&token=${token}`
@@ -33,7 +33,7 @@ export const sendVerifyEmail = (to, token) => {
 }
 
 // Send an email to update password
-export const sendResetPassworEmail = (to, token) => {
+export const sendResetPassworEmail = (to: string, token: string) => {
   const linkToResetPassword = `${
     process.env.BASE_URL
     }/auth/reset-password-verify?email=${to}&date=${Date.now()}&token=${token}`
@@ -53,8 +53,8 @@ export const sendResetPassworEmail = (to, token) => {
 }
 
 // send an email after user send request that he want to join to the group.
-export function sendRequestToJoinToGroupEmail(to, type, group) {
-  const linkToGroup = `${process.env.BASE_URL}/group/${type}/${group.slug}`
+export function sendRequestToJoinToGroupEmail(to: string, type: string, group: GroupEntityType) {
+  const linkToGroup = `${process.env.BASE_URL}/group/${type}/${group.seo.slug}`
 
   const textMessage = `A user wants to join ${group.title}. Go to the user's administration page to approve or deny the membership`
   const subject = `A user wants to join ${group.title}`
@@ -68,7 +68,7 @@ export function sendRequestToJoinToGroupEmail(to, type, group) {
   return sendEmail({ from: config.emails.from, to, subject, text: textMessage, html })
 }
 
-export function sendStandardEmail(email: EmailCreationType, user: UserType) {
+export function sendStandardEmail(email: EmailCreationType) {
   const htmlString = email.html ? email.html : md.render(email.text)
 
   const html = standardEmailTemplate({
diff --git a/lib/types/entities/content.ts b/lib/types/entities/content.ts
index 6dbedfd9..72967e42 100644
--- a/lib/types/entities/content.ts
+++ b/lib/types/entities/content.ts
@@ -1,10 +1,11 @@
 import { InteractionEntity, UserType } from '@lib/types'
 
 import { PurchashingOptionsType } from '../purchasing'
+import { SEOPropertiesType } from '../seo'
 
 export type ContentEntityType = {
   id: string
-  slug: string
+  seo: SEOPropertiesType
   type: string
   title: string
   description: string
diff --git a/lib/types/entities/group.ts b/lib/types/entities/group.ts
index d055949d..2a3e9e41 100644
--- a/lib/types/entities/group.ts
+++ b/lib/types/entities/group.ts
@@ -1,5 +1,6 @@
 import { InteractionEntity } from './interaction'
 import { PermissionsType } from '../permissions'
+import { SEOPropertiesType } from '../seo'
 
 export type MemberType = {
   id: string
@@ -10,7 +11,7 @@ export type MemberType = {
 
 export declare type GroupEntityType = {
   id: string
-  slug: string
+  seo: SEOPropertiesType,
   type: string
   title: string
   description: string
diff --git a/lib/types/seo.ts b/lib/types/seo.ts
new file mode 100644
index 00000000..2343c256
--- /dev/null
+++ b/lib/types/seo.ts
@@ -0,0 +1,5 @@
+export type SEOPropertiesType = {
+  slug: string,
+  title: string,
+  description: string
+}
\ No newline at end of file
diff --git a/pages/api/content/[type]/[slug].ts b/pages/api/content/[type]/[slug].ts
index 2156a92b..00ca6ff7 100644
--- a/pages/api/content/[type]/[slug].ts
+++ b/pages/api/content/[type]/[slug].ts
@@ -44,7 +44,7 @@ const loadContentItemMiddleware = async (req: Request, res, cb) => {
   if (req.query.field === 'id') {
     searchOptions['id'] = req.query.slug
   } else {
-    searchOptions['slug'] = req.query.slug
+    searchOptions['seo.slug'] = req.query.slug
   }
 
   findOneContent(type.slug, searchOptions)
diff --git a/pages/api/groups/[type]/[slug].ts b/pages/api/groups/[type]/[slug].ts
index 26ac261c..b8a0a97d 100644
--- a/pages/api/groups/[type]/[slug].ts
+++ b/pages/api/groups/[type]/[slug].ts
@@ -10,16 +10,17 @@ import {
   findOneContent,
   updateOneContent,
 } from '@lib/api/entities/content'
-import { groupUserPermission } from '@lib/permissions'
 import { onGroupDeleted, onGroupUpdated } from '@lib/api/hooks/group.hooks'
+
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { Request } from '@lib/types'
+import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 import { connect } from '@lib/api/db'
+import { groupUserPermission } from '@lib/permissions'
 import { groupValidations } from '@lib/validations/group'
 import methods from '@lib/api/api-helpers/methods'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 import { uploadFiles } from '@lib/api/api-helpers/dynamic-file-upload'
-import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
 
 // disable the default body parser to be able to use file upload
 export const config = {
@@ -39,7 +40,7 @@ const loadGroupItemMiddleware = async (req: Request, res, cb) => {
   if (req.query.field === 'id') {
     searchOptions['id'] = req.query.slug
   } else {
-    searchOptions['slug'] = req.query.slug
+    searchOptions['seo.slug'] = req.query.slug
   }
 
   return findOneContent(type.slug, searchOptions)
diff --git a/pages/api/groups/[type]/[slug]/users.ts b/pages/api/groups/[type]/[slug]/users.ts
index d37fd96b..721f8aa7 100644
--- a/pages/api/groups/[type]/[slug]/users.ts
+++ b/pages/api/groups/[type]/[slug]/users.ts
@@ -5,8 +5,9 @@ import {
 } from '@lib/api/middlewares'
 import { onGroupJoinRequest, onGroupUpdated } from '@lib/api/hooks/group.hooks'
 
-import { connect } from '@lib/api/db'
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { Request } from '@lib/types'
+import { connect } from '@lib/api/db'
 import { findOneUser } from '@lib/api/entities/users'
 import { getGroupTypeDefinition } from '@lib/config'
 import { getPermittedFields } from '@lib/validations/group/users'
@@ -15,7 +16,6 @@ import methods from '@lib/api/api-helpers/methods'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 import uniqBy from '@lib/uniqBy'
 import { updateOneContent } from '@lib/api/entities/content'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
 
 const getUsers = async (
   { item: group, currentUser, groupType }: Request,
@@ -79,9 +79,8 @@ async function addUsers(req: Request, res) {
     res.status(200).json(group)
   }
   const pendingMembersCallback = async (data) => {
-    const { email } = await findOneUser({ id: author })
 
-    onGroupJoinRequest(data, currentUser, email, type)
+    onGroupJoinRequest(data, currentUser)
 
     const group = formGroupItem(slug, fields, data, currentUser)
 
diff --git a/pages/api/groups/[type]/[slug]/users/[userId].ts b/pages/api/groups/[type]/[slug]/users/[userId].ts
index 2d9cab31..fdbc4ee4 100644
--- a/pages/api/groups/[type]/[slug]/users/[userId].ts
+++ b/pages/api/groups/[type]/[slug]/users/[userId].ts
@@ -3,20 +3,21 @@ import {
   loadGroupItemMiddleware,
   loadUser,
 } from '@lib/api/middlewares'
+import methods, { getAction } from '@lib/api/api-helpers/methods'
 import {
   onGroupJoinDisapprove,
   onGroupUpdated,
 } from '@lib/api/hooks/group.hooks'
+
+import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { Request } from '@lib/types'
 import { UPDATE_GROUP_USER_ACTIONS } from '@lib/constants'
 import { connect } from '@lib/api/db'
 import { getPermittedFields } from '@lib/validations/group/users'
 import { groupUserPermission } from '@lib/permissions'
-import methods, { getAction } from '@lib/api/api-helpers/methods'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
 import uniqBy from '@lib/uniqBy'
 import { updateOneContent } from '@lib/api/entities/content'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
 
 async function updateUsers({ type, id, data, callback, res }) {
   return updateOneContent(type, id, data)
@@ -46,7 +47,7 @@ async function removeUser(req: Request, res) {
     res,
     id,
     callback: (data) => {
-      onGroupJoinDisapprove({ ...data, userId }, currentUser)
+      onGroupJoinDisapprove(data, userId, currentUser)
 
       return res.status(200).json(data)
     },
diff --git a/pages/content/[type]/[slug].tsx b/pages/content/[type]/[slug].tsx
index f389565c..8a0390b4 100644
--- a/pages/content/[type]/[slug].tsx
+++ b/pages/content/[type]/[slug].tsx
@@ -36,7 +36,7 @@ export const getServerSideProps: GetServerSideProps = async ({
           id: query.slug,
         }
       : {
-          slug: query.slug,
+          'seo.slug': query.slug,
         }
 
   const item = await findOneContent(query.type, searchOptions)
diff --git a/pages/group/[type]/[slug].tsx b/pages/group/[type]/[slug].tsx
index 36bba8c9..613e174f 100644
--- a/pages/group/[type]/[slug].tsx
+++ b/pages/group/[type]/[slug].tsx
@@ -36,7 +36,7 @@ export const getServerSideProps: GetServerSideProps = async ({
           id: query.slug,
         }
       : {
-          slug: query.slug,
+          'seo.slug': query.slug,
         }
 
   const item = await findOneContent(query.type, searchOptions)

From 5e5ac4f11b75b6a71eb7522d747b3cf76d0b94b3 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Mon, 8 Mar 2021 14:34:59 +0100
Subject: [PATCH 20/26] maintenance mode

---
 .../admin/maintenance-mode-form/index.tsx     | 70 ++++++++++++++
 .../content-form/content-form.tsx             | 41 +++++---
 .../write-content/content-form/seo-form.tsx   | 81 ++++++++++++++++
 components/layout/header/admin-sub-header.tsx | 31 +++---
 lib/api/api-endpoints.ts                      |  3 +-
 .../{content.utils.js => content.utils.ts}    | 10 +-
 lib/client/contexts/maintenance-context.tsx   | 37 ++++++++
 lib/client/hooks/loadTranslations.tsx         | 11 +++
 lib/client/services/toast.ts                  | 29 ++++++
 package.json                                  |  1 +
 pages/_app.tsx                                | 17 ++--
 pages/admin/index.tsx                         |  9 +-
 pages/api/maintenance.ts                      | 95 +++++++++++++++++++
 pages/maintenance.tsx                         | 23 +++++
 yarn.lock                                     | 12 +++
 15 files changed, 430 insertions(+), 40 deletions(-)
 create mode 100644 components/admin/maintenance-mode-form/index.tsx
 rename lib/api/entities/content/{content.utils.js => content.utils.ts} (72%)
 create mode 100644 lib/client/contexts/maintenance-context.tsx
 create mode 100644 lib/client/services/toast.ts
 create mode 100644 pages/api/maintenance.ts
 create mode 100644 pages/maintenance.tsx

diff --git a/components/admin/maintenance-mode-form/index.tsx b/components/admin/maintenance-mode-form/index.tsx
new file mode 100644
index 00000000..80b38271
--- /dev/null
+++ b/components/admin/maintenance-mode-form/index.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react'
+
+import API from '@lib/api/api-endpoints'
+import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+import { FIELDS } from '@lib/constants'
+import LoadingSpinner from '@components/generic/loading/loading-spinner/loading-spinner'
+import fetch from '@lib/fetcher'
+import toast from '@lib/client/services/toast'
+import useSWR from 'swr'
+
+export default function MaintenanceModeForm() {
+  const [enabled, setEnabled] = useState(false)
+
+  const [saving, setSaving] = useState(false)
+
+  const { data } = useSWR(
+    API.maintenance,
+    fetch
+  )
+
+  const changeMode = (value) => {
+    setEnabled(value)
+    setSaving(true)
+    return fetch(API.maintenance, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        enabled: value
+      }),
+    })
+      .then(() => {
+        setSaving(false)
+        toast.success('Maintenance mode updated')
+      })
+      .catch(() => {
+        setSaving(false)
+        setEnabled(!value)
+        toast.error('Error updating maintenance mode')
+      })
+
+  }
+
+  useEffect(() => {
+    if (data) {
+      setEnabled(data.enabled)
+    }
+  }, [data])
+
+  return (
+    <>
+      <div className="maintenance-mode-form">
+        <div className="field-row">
+          <DynamicFieldEdit
+            name="description"
+            value={enabled}
+            onChange={changeMode}
+            field={{
+              name: 'maintenance',
+              type: FIELDS.BOOLEAN,
+              description: `Enable to block access to all non-admin users`,
+              label: 'Maintenance mode'
+            }} />
+        </div>
+        {saving && <LoadingSpinner />}
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/content/write-content/content-form/content-form.tsx b/components/content/write-content/content-form/content-form.tsx
index 3b6adf20..f5c04455 100644
--- a/components/content/write-content/content-form/content-form.tsx
+++ b/components/content/write-content/content-form/content-form.tsx
@@ -10,9 +10,10 @@ import GroupSummaryView from '@components/groups/read/group-summary-view/group-s
 import Link from 'next/link'
 import { PurchashingOptionsType } from '@lib/types/purchasing'
 import PurchasingOptionsForm from './purchasing-options-form'
+import SEOForm from './seo-form'
+import { SEOPropertiesType } from '@lib/types/seo'
 import Toggle from '@components/generic/toggle/toggle'
 import fetch from '@lib/fetcher'
-import hasPermission from '@lib/permissions/has-permission'
 import { purchasingPermission } from '@lib/permissions'
 import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
 
@@ -28,13 +29,21 @@ function ContentForm(props) {
     stock: 1,
     currency: '',
     price: 0.0,
-    options: []
+    variants: [],
+    shippingFees: []
+  }
+
+  const defaultSeoOptions: SEOPropertiesType = {
+    slug: '',
+    title: '',
+    description: ''
   }
 
   // used to store values
   const [state, setState] = useState({
     draft: false,
-    purchasingOptions: defaultShoppingOptions
+    purchasingOptions: defaultShoppingOptions,
+    seo: defaultSeoOptions
   })
 
   useEffect(() => {
@@ -47,6 +56,7 @@ function ContentForm(props) {
         .map((f) => f.name)
         .concat('draft')
         .concat('purchasingOptions')
+        .concat('seo')
 
       allowedKeys.map((k) => {
         filteredData[k] = props.content[k]
@@ -55,7 +65,8 @@ function ContentForm(props) {
       setState({
         ...state,
         ...filteredData,
-        purchasingOptions: filteredData['purchasingOptions'] || defaultShoppingOptions
+        purchasingOptions: filteredData['purchasingOptions'] || defaultShoppingOptions,
+        seo: filteredData['seo'] || defaultSeoOptions
       })
     }
   }, [props.content, props.type])
@@ -72,11 +83,10 @@ function ContentForm(props) {
     const groupParamsString = props.group
       ? `groupId=${props.group.id}&groupType=${props.group.type}`
       : ''
-    const url = `${API.content[props.type.slug]}${
-      props.content.id
+    const url = `${API.content[props.type.slug]}${props.content.id
         ? `/${props.content.id}?field=id&${groupParamsString}`
         : `?${groupParamsString}`
-    }`
+      }`
 
     return fetch(url, {
       method: props.content.id ? 'PUT' : 'POST',
@@ -191,13 +201,18 @@ function ContentForm(props) {
               />
             ))}
 
-          {purchasingPermission(props.currentUser, 'sell', props.type.slug)  && <div className="purchasing-options-wrapper">
-              <PurchasingOptionsForm value={state['purchasingOptions']} onChange={(val) => setState({
-                ...state,
-                purchasingOptions: val
-              })} />
+          {purchasingPermission(props.currentUser, 'sell', props.type.slug) && <div className="purchasing-options-wrapper">
+            <PurchasingOptionsForm value={state['purchasingOptions']} onChange={(val) => setState({
+              ...state,
+              purchasingOptions: val
+            })} />
           </div>}
 
+          <SEOForm value={props.content.seo} onChange={(val) => setState({
+            ...state,
+            seo: val
+          })} />
+
           <div className="actions">
             <Button loading={loading} alt={true} type="submit">
               Save
@@ -206,7 +221,7 @@ function ContentForm(props) {
           {success && (
             <div className="success-message">
               Saved: You can see it{' '}
-              <Link href={`/content/${props.type.slug}/${props.content.slug}`}>
+              <Link href={`/content/${props.type.slug}/${props.content.seo.slug}`}>
                 <a title="View content">here</a>
               </Link>
             </div>
diff --git a/components/content/write-content/content-form/seo-form.tsx b/components/content/write-content/content-form/seo-form.tsx
index e69de29b..466e54f2 100644
--- a/components/content/write-content/content-form/seo-form.tsx
+++ b/components/content/write-content/content-form/seo-form.tsx
@@ -0,0 +1,81 @@
+import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+import { FIELDS } from '@lib/constants'
+import React from 'react'
+import { SEOPropertiesType } from '@lib/types/seo'
+
+type PropTypes = {
+  value: SEOPropertiesType,
+  onChange: (val: SEOPropertiesType) => void
+}
+
+export default function SEOForm({
+  value,
+  onChange
+}: PropTypes) {
+  return (
+    <>
+      <div className="seo-form">
+        <h4>Search Engine Preview</h4>
+        <div className="field-row">
+          <DynamicFieldEdit
+            name="slug"
+            value={value.slug}
+            onChange={(val) => onChange({
+              ...value,
+              slug: val
+            })}
+            field={{
+              name: 'slug',
+              type: FIELDS.TEXT,
+              placeholder: 'Slug',
+              description: `${value.slug.length} of 255 characters`,
+              label: 'Slug',
+              minLength: 0,
+              maxLength: 255
+            }} />
+        </div>
+        <div className="field-row">
+          <DynamicFieldEdit
+            name="title"
+            value={value.title}
+            onChange={(val) => onChange({
+              ...value,
+              title: val
+            })}
+            field={{
+              name: 'title',
+              type: FIELDS.TEXT,
+              placeholder: 'Search engine title',
+              description: `${value.title.length} of 70 characters`,
+              label: 'Title',
+              minLength: 0,
+              maxLength: 70
+            }} />
+        </div>
+        <div className="field-row">
+          <DynamicFieldEdit
+            name="description"
+            value={value.description}
+            onChange={(val) => onChange({
+              ...value,
+              description: val
+            })}
+            field={{
+              name: 'description',
+              type: FIELDS.TEXTAREA,
+              placeholder: 'Search engine description',
+              description: `${value.description.length} of 255 characters`,
+              label: 'description',
+              minLength: 0,
+              maxLength: 255
+            }} />
+        </div>
+      </div>
+      <style jsx>{
+        `
+        
+        `
+      }</style>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/layout/header/admin-sub-header.tsx b/components/layout/header/admin-sub-header.tsx
index 9456e26f..ad55b101 100644
--- a/components/layout/header/admin-sub-header.tsx
+++ b/components/layout/header/admin-sub-header.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import React from 'react'
 import { UserType } from '@lib/types'
 import { hasPermission } from '@lib/permissions'
+import { useTranslation } from 'react-i18next'
 
 type PropTypes = {
   user: UserType
@@ -40,6 +41,8 @@ export default function AdminSubHeader({ user }: PropTypes) {
     }
   })
 
+  const { t } = useTranslation() 
+
   return (
     <>
       <div className="admin-sub-header">
@@ -47,9 +50,9 @@ export default function AdminSubHeader({ user }: PropTypes) {
           <ul className="admin-navigation">
             {hasPermission(user, `admin.stats`) && <li>
               <Link href="/admin">
-                <a title="Admin">
+                <a title={t('admin.menu.administration')}>
                   <i className="las la-cog"></i>
-                  <span>Administration</span>
+                  <span>{t('admin.menu.administration')}</span>
                 </a>
               </Link>
             </li>}
@@ -57,9 +60,9 @@ export default function AdminSubHeader({ user }: PropTypes) {
 
             {hasPermission(user, `user.admin`) && <li>
               <Link href="/admin/users">
-                <a title="Admin">
+                <a title={t('admin.menu.users')}>
                   <i className="las la-users-cog"></i>
-                  <span>Users</span>
+                  <span>{t('admin.menu.users')}</span>
                 </a>
               </Link>
             </li>}
@@ -67,17 +70,17 @@ export default function AdminSubHeader({ user }: PropTypes) {
 
             {hasPermission(user, `admin.email`) && <li>
               <Link href="/admin/emails">
-                <a title="Admin">
+                <a title={t('admin.menu.emails')}>
                   <i className="las la-envelope"></i>
-                  <span>Emails</span>
+                  <span>{t('admin.menu.emails')}</span>
                 </a>
               </Link>
             </li>}
 
             {hasPermission(user, 'admin.access') && <li className="view-more">
-              <a title="Content">
+              <a title={t('admin.menu.content')}>
                 <i className="las la-file"></i>
-                <span>Content</span>
+                <span>{t('admin.menu.content')}</span>
               </a>
               <ul>
                 {contentLinks.map(link => {
@@ -96,9 +99,9 @@ export default function AdminSubHeader({ user }: PropTypes) {
             </li>
             }
             {hasPermission(user, 'admin.access') && <li className="view-more">
-              <a title="Groups">
+              <a title={t('admin.menu.groups')}>
                 <i className="las la-users"></i>
-                <span>Groups</span>
+                <span>{t('admin.menu.groups')}</span>
               </a>
               <ul>
                 {groupLinks.map(link => {
@@ -118,16 +121,16 @@ export default function AdminSubHeader({ user }: PropTypes) {
 
             {(hasPermission(user, 'purchasing.orders') || hasPermission(user, 'purchasing.sell')) && <li>
               <Link href="/orders">
-                <a title="Orders">
+                <a title={t('admin.menu.orders')}>
                   <i className="las la-cubes"></i>
-                  <span>Orders</span>
+                  <span>{t('admin.menu.orders')}</span>
                 </a>
               </Link>
             </li>}
             <li className="view-more">
-              <a title="Create">
+              <a title={t('admin.menu.create')}>
                 <i className="las la-plus-circle"></i>
-                <span>Create</span>
+                <span>{t('admin.menu.create')}</span>
               </a>
               <ul>
                 {createContentTypeLinks.map(link => {
diff --git a/lib/api/api-endpoints.ts b/lib/api/api-endpoints.ts
index 1bbc116b..332834b7 100644
--- a/lib/api/api-endpoints.ts
+++ b/lib/api/api-endpoints.ts
@@ -29,5 +29,6 @@ export default {
   superSearch: '/api/super-search',
   interactions: '/api/interactions',
   email: '/api/email',
-  statistic: '/api/statistic'
+  statistic: '/api/statistic',
+  maintenance: '/api/maintenance'
 }
diff --git a/lib/api/entities/content/content.utils.js b/lib/api/entities/content/content.utils.ts
similarity index 72%
rename from lib/api/entities/content/content.utils.js
rename to lib/api/entities/content/content.utils.ts
index eb942962..00675f47 100644
--- a/lib/api/entities/content/content.utils.js
+++ b/lib/api/entities/content/content.utils.ts
@@ -1,6 +1,8 @@
+import { ContentEntityType, ContentTypeDefinition, UserType } from '@lib/types'
+
 import slugify from 'slugify'
 
-export function fillContentWithDefaultData(contentType, content, user) {
+export function fillContentWithDefaultData(contentType: ContentTypeDefinition, content: ContentEntityType, user: UserType) {
   try {
     const defaultEmptyFields = {}
 
@@ -30,10 +32,12 @@ export function fillContentWithDefaultData(contentType, content, user) {
     )
 
     const extraFields = {
-      slug: slug,
+      seo: {
+        slug
+      }
     }
 
-    return Object.assign({}, newContent, extraFields)
+    return Object.assign({}, extraFields, newContent )
   } catch (err) {
     throw new Error('Invalid slug or default data generation ' + err.message)
   }
diff --git a/lib/client/contexts/maintenance-context.tsx b/lib/client/contexts/maintenance-context.tsx
new file mode 100644
index 00000000..bb437116
--- /dev/null
+++ b/lib/client/contexts/maintenance-context.tsx
@@ -0,0 +1,37 @@
+import React, { createContext, useEffect, useState } from 'react'
+
+import API from '@lib/api/api-endpoints'
+import fetch from '@lib/fetcher'
+import hasPermission from '@lib/permissions/has-permission';
+import { useRouter } from 'next/router';
+import useSWR from "swr";
+import useUser from '../hooks/use-user';
+
+export const MaintenanceContext = createContext<{enabled: boolean}>({
+  enabled: false
+})
+
+export const MaintenanceProvider = ({ children } : any) => {
+  const { user, finished } = useUser()
+  
+  const { data } = useSWR(finished ? API.maintenance : null, fetch)
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (data && data.enabled) {
+      if (!hasPermission(user, 'admin.access') && router.pathname !== '/maintenance' && router.pathname !== '/auth/login' && router.pathname !== '/auth/reset-password') {
+        router.push({
+          pathname: '/maintenance',
+          query: {...router.query},
+        }, '/maintenance')
+      }
+    }
+  }, [data, router.pathname])
+
+  return (
+    <MaintenanceContext.Provider value={{ enabled: data ? data.enabled: false }}>
+      { data && children }
+    </MaintenanceContext.Provider>
+  )
+}
diff --git a/lib/client/hooks/loadTranslations.tsx b/lib/client/hooks/loadTranslations.tsx
index 5b264e29..8b5807d7 100644
--- a/lib/client/hooks/loadTranslations.tsx
+++ b/lib/client/hooks/loadTranslations.tsx
@@ -11,6 +11,17 @@ export default function() {
     resources: {
       en: {
         translation: {
+          "admin": {
+            "menu": {
+              "administration": "Administration",
+              "users": "Users",
+              "emails": "Emails",
+              "content": "Content",
+              "groups": "Groups",
+              "orders": "Orders",
+              "create": "Create"
+            }
+          },
           "purchasing": {
             "shoppingCart": {
               "title": "Shopping Cart",
diff --git a/lib/client/services/toast.ts b/lib/client/services/toast.ts
new file mode 100644
index 00000000..595f1821
--- /dev/null
+++ b/lib/client/services/toast.ts
@@ -0,0 +1,29 @@
+import { ToastOptions, toast } from 'react-toastify';
+
+export const toastOptions:ToastOptions = {
+  position: "top-right",
+  autoClose: 3000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  progress: undefined,
+}
+
+export default {
+  success: (val: any) => {
+    toast.success(val, toastOptions)
+  },
+  warn: (val: any) => {
+    toast.warn(val, toastOptions)
+  },
+  default: (val: any) => {
+    toast(val, toastOptions)
+  },
+  error: (val: any) => {
+    toast.error(val, toastOptions)
+  },
+  info: (val: any) => {
+    toast.info(val, toastOptions)
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index aa150cde..fcd88f73 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react-quill": "1.3.5",
     "react-share": "^4.1.0",
     "react-table": "7.5.0",
+    "react-toastify": "^7.0.3",
     "react-web-monetization": "^0.0.13",
     "sass": "^1.26.3",
     "serialize-javascript": "^4.0.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1631bbfd..cdd63e85 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,6 +9,7 @@ import withEdgeTheme, {
 
 import { CookiesProvider } from '@lib/client/contexts/cookies-context'
 import Head from 'next/head'
+import { MaintenanceProvider } from '@lib/client/contexts/maintenance-context'
 import { ModalProvider } from '@lib/client/contexts/modal-context'
 import Router from 'next/router'
 import { ShoopingCartProvider } from '@lib/client/contexts/shopping-cart-context'
@@ -37,13 +38,15 @@ function MyApp({ Component, pageProps }) {
       </Head>
       <div id="app-container" className={mode}>
         <UserProvider>
-          <CookiesProvider>
-            <ShoopingCartProvider>
-              <ModalProvider>
-                <Component {...pageProps} />
-              </ModalProvider>
-            </ShoopingCartProvider>
-          </CookiesProvider>
+          <MaintenanceProvider>
+            <CookiesProvider>
+              <ShoopingCartProvider>
+                <ModalProvider>
+                  <Component {...pageProps} />
+                </ModalProvider>
+              </ShoopingCartProvider>
+            </CookiesProvider>
+          </MaintenanceProvider>
         </UserProvider>
       </div>
       <style jsx global>{`
diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
index 1ecf2963..5d0ee400 100644
--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -6,11 +6,13 @@ import {
 
 import API from '@lib/api/api-endpoints'
 import Layout from '@components/layout/admin/layout-admin'
+import MaintenanceModeForm from '@components/admin/maintenance-mode-form'
 import { StatisticResponse } from '@lib/types'
 import { Widget } from '@components/statistic'
 import fetcher from '@lib/fetcher'
 import { format } from 'timeago.js'
 import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
 
 function AdminPage() {
   const { user } = useUser({ redirectTo: '/home' })
@@ -27,13 +29,14 @@ function AdminPage() {
   const usersData = data?.data.users || []
   const contentData = data?.data.content || []
   const groupsData = data?.data.groups || []
-
+  
+  const { t } = useTranslation()
   
   return (
     <>
       <Layout title="Stats" loading={!available || !user || isValidating}>
         <header className="admin-title">
-          <h1>Administration</h1>
+          <h1>{t('admin.menu.administration')}</h1>
           <small className="login-date">
             Last login: {format(user?.metadata.lastLogin)}
           </small>
@@ -57,6 +60,8 @@ function AdminPage() {
           ))}
         </section>
 
+        <MaintenanceModeForm />
+
         
       </Layout>
 
diff --git a/pages/api/maintenance.ts b/pages/api/maintenance.ts
new file mode 100644
index 00000000..a3cf493b
--- /dev/null
+++ b/pages/api/maintenance.ts
@@ -0,0 +1,95 @@
+import { NextApiResponse } from 'next'
+import { Request } from '@lib/types'
+import { connect } from '@lib/api/db'
+import { getDB } from '@lib/api/db'
+import hasPermission from '@lib/permissions/has-permission'
+import { loadUser } from '@lib/api/middlewares'
+import methods from '@lib/api/api-helpers/methods'
+import runMiddleware from '@lib/api/api-helpers/run-middleware'
+
+type MaintenanceResponse = {
+  enabled: boolean
+}
+
+export default async (
+  request: Request,
+  response: NextApiResponse<{ data: MaintenanceResponse } | { error: string }>
+) => {
+  try {
+    await connect()
+  } catch (e) {
+    return response.status(500).json({
+      error: e.message,
+    })
+  }
+
+  try {
+    await runMiddleware(request, response, loadUser)
+  } catch (e) {
+    return response.status(500).json({
+      error: e.message,
+    })
+  }
+
+ 
+  await methods(request, response, {
+    get: async (request: Request, response: NextApiResponse) => {
+      const item = await getMaintenanceMode()
+      response.status(200).json({
+        enabled: item.value
+      })
+    },
+    // Update the maintenance mode
+    put: async (request: Request, response: NextApiResponse) => {
+      const { currentUser } = request
+
+      if (!hasPermission(currentUser, ['admin.access'])) {
+        return response.status(401).json({
+          error: 'Access forbidden.',
+        })
+      }
+
+      
+      const db = getDB()
+
+      const previousConfig = await db.collection('config').findOne({
+        config: 'maintenance'
+      })
+
+      const newValue = !!request.body.enabled
+
+      if (!previousConfig) {
+        await db.collection('config').add({
+          ...defaultConfiguration,
+          value: newValue
+        })
+      } else {
+        await db.collection('config').doc(previousConfig.id).set({
+          value: newValue
+        })
+      }
+
+      response.status(200).json({
+        enabled: newValue
+      })
+    },
+
+  })
+}
+
+const defaultConfiguration = {
+  config: 'maintenance',
+  value: false
+}
+
+export async function getMaintenanceMode() {
+  const db = getDB()
+
+  const previousConfig = await db.collection('config').findOne({
+    config: 'maintenance'
+  }) || defaultConfiguration
+
+  return previousConfig
+}
+
+
diff --git a/pages/maintenance.tsx b/pages/maintenance.tsx
new file mode 100644
index 00000000..364fd622
--- /dev/null
+++ b/pages/maintenance.tsx
@@ -0,0 +1,23 @@
+import Layout from '@components/layout/normal/layout'
+import config from '@lib/config'
+
+const Maintenance = () => {
+  return (
+    <>
+      <Layout
+        title={`${config.title} - ${config.slogan}`}
+        description={config.description}
+        
+      >
+        <h1>Site under maintenace <i className="las la-tools"></i></h1>
+        
+        <p>Please, come back soon.</p>
+      </Layout>
+      <style jsx>{`
+        
+      `}</style>
+    </>
+  )
+}
+
+export default Maintenance
diff --git a/yarn.lock b/yarn.lock
index 4f4b3168..b9213ac0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3145,6 +3145,11 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -8429,6 +8434,13 @@ react-table@7.5.0:
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.5.0.tgz#87326d92cdffbbf970f49b395bcafc3f84989ddf"
   integrity sha512-hLsbNqLJkkYiATVteM8mthP8y5vnLPB2qdi9FeGZjsvb2m5vxj6cavIgk35oulvBmYD6Kox0HFfI332HPZpC7w==
 
+react-toastify@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-7.0.3.tgz#93804c777ecf918872ba3b5be9c654db14547f85"
+  integrity sha512-cxZ5rfurC8LzcZQMTYc8RHIkQTs+BFur18Pzk6Loz6uS8OXUWm6nXVlH/wqglz4Z7UAE8xxcF5mRjfE13487uQ==
+  dependencies:
+    clsx "^1.1.1"
+
 react-web-monetization@^0.0.13:
   version "0.0.13"
   resolved "https://registry.yarnpkg.com/react-web-monetization/-/react-web-monetization-0.0.13.tgz#2a36e8b543fa9ba8f67cff96db09ae8361a04fa4"

From cb81503bca3fb76e7b43327db338097070b4f541 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Mon, 8 Mar 2021 15:24:46 +0100
Subject: [PATCH 21/26] minor fixes on seo form

---
 .../content-form/content-form.tsx             | 12 +++++--
 .../content-form/purchasing-options-form.tsx  | 16 +++++++---
 .../write-content/content-form/seo-form.tsx   | 11 +++++--
 .../entities => }/content/content.utils.ts    | 31 ++++++++++---------
 pages/api/content/[type].ts                   |  2 +-
 pages/api/groups/[type].ts                    | 11 ++++---
 6 files changed, 53 insertions(+), 30 deletions(-)
 rename lib/{api/entities => }/content/content.utils.ts (61%)

diff --git a/components/content/write-content/content-form/content-form.tsx b/components/content/write-content/content-form/content-form.tsx
index f5c04455..73617e95 100644
--- a/components/content/write-content/content-form/content-form.tsx
+++ b/components/content/write-content/content-form/content-form.tsx
@@ -65,8 +65,14 @@ function ContentForm(props) {
       setState({
         ...state,
         ...filteredData,
-        purchasingOptions: filteredData['purchasingOptions'] || defaultShoppingOptions,
-        seo: filteredData['seo'] || defaultSeoOptions
+        purchasingOptions: {
+          ...defaultShoppingOptions,
+          ...(filteredData['purchasingOptions'] || {})
+        },
+        seo: {
+          ...defaultSeoOptions,
+          ...(filteredData['seo'] || {})
+        }
       })
     }
   }, [props.content, props.type])
@@ -208,7 +214,7 @@ function ContentForm(props) {
             })} />
           </div>}
 
-          <SEOForm value={props.content.seo} onChange={(val) => setState({
+          <SEOForm value={state.seo} onChange={(val) => setState({
             ...state,
             seo: val
           })} />
diff --git a/components/content/write-content/content-form/purchasing-options-form.tsx b/components/content/write-content/content-form/purchasing-options-form.tsx
index 2ef5d45f..a4328158 100644
--- a/components/content/write-content/content-form/purchasing-options-form.tsx
+++ b/components/content/write-content/content-form/purchasing-options-form.tsx
@@ -101,8 +101,8 @@ function VariantItem({
         `
         .variant-item {
           padding: var(--edge-gap);
-          border: 1px solid var(--accents-3);
-          margin: var(--edge-gap);
+          border: 1px solid var(--light-border-color);
+          margin-bottom: var(--edge-gap);
         }
         `
       }</style>
@@ -191,8 +191,8 @@ function ShippingFeeItem({
         `
         .shipping-fee-item {
           padding: var(--edge-gap);
-          border: 1px solid var(--accents-3);
-          margin: var(--edge-gap);
+          border: 1px solid var(--light-border-color);
+          margin-bottom: var(--edge-gap);
         }
         `
       }</style>
@@ -425,7 +425,9 @@ export default function PurchasingOptionsForm({
         .purchasing-options {
           padding: var(--edge-gap);
           border: 1px solid;
-          
+          border-radius: var(--edge-radius);
+          border-color: var(--light-border-color);
+          margin-bottom: var(--edge-gap);
         }
 
         .form-row {
@@ -435,6 +437,10 @@ export default function PurchasingOptionsForm({
         .form-row .input-wr {
           width: 50%;
         }
+
+        h4 {
+          margin-top: var(--edge-gap);
+        }
         `
       }</style>
     </>
diff --git a/components/content/write-content/content-form/seo-form.tsx b/components/content/write-content/content-form/seo-form.tsx
index 466e54f2..3d699bb8 100644
--- a/components/content/write-content/content-form/seo-form.tsx
+++ b/components/content/write-content/content-form/seo-form.tsx
@@ -9,7 +9,7 @@ type PropTypes = {
 }
 
 export default function SEOForm({
-  value,
+  value ,
   onChange
 }: PropTypes) {
   return (
@@ -73,7 +73,14 @@ export default function SEOForm({
       </div>
       <style jsx>{
         `
-        
+        .seo-form {
+          padding: var(--edge-gap);
+          border: 1px solid;
+          border-radius: var(--edge-radius);
+          border-color: var(--light-border-color);
+          margin-bottom: var(--edge-gap);
+        }
+
         `
       }</style>
     </>
diff --git a/lib/api/entities/content/content.utils.ts b/lib/content/content.utils.ts
similarity index 61%
rename from lib/api/entities/content/content.utils.ts
rename to lib/content/content.utils.ts
index 00675f47..e1b9e494 100644
--- a/lib/api/entities/content/content.utils.ts
+++ b/lib/content/content.utils.ts
@@ -2,6 +2,21 @@ import { ContentEntityType, ContentTypeDefinition, UserType } from '@lib/types'
 
 import slugify from 'slugify'
 
+export function generateSlug(contentType: ContentTypeDefinition, content: ContentEntityType, user: UserType): string {
+  const slug = slugify(
+    contentType.slugGeneration.reduce(
+      (prev, next) =>
+        prev + ' ' + (next !== 'userId' ? content[next] : user.id),
+      ''
+    ),
+    {
+      lower: true,
+      strict: true,
+    }
+  )
+  return slug
+}
+
 export function fillContentWithDefaultData(contentType: ContentTypeDefinition, content: ContentEntityType, user: UserType) {
   try {
     const defaultEmptyFields = {}
@@ -19,25 +34,13 @@ export function fillContentWithDefaultData(contentType: ContentTypeDefinition, c
       ...content,
     }
 
-    const slug = slugify(
-      contentType.slugGeneration.reduce(
-        (prev, next) =>
-          prev + ' ' + (next !== 'userId' ? newContent[next] : user.id),
-        ''
-      ),
-      {
-        lower: true,
-        strict: true,
-      }
-    )
-
     const extraFields = {
       seo: {
-        slug
+        slug: generateSlug(contentType, newContent, user)
       }
     }
 
-    return Object.assign({}, extraFields, newContent )
+    return Object.assign({}, extraFields, newContent)
   } catch (err) {
     throw new Error('Invalid slug or default data generation ' + err.message)
   }
diff --git a/pages/api/content/[type].ts b/pages/api/content/[type].ts
index 662a3cf9..13455af9 100644
--- a/pages/api/content/[type].ts
+++ b/pages/api/content/[type].ts
@@ -15,7 +15,7 @@ import Cypher from '@lib/api/api-helpers/cypher-fields'
 import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 import { connect } from '@lib/api/db'
 import { contentValidations } from '@lib/validations/content'
-import { fillContentWithDefaultData } from '@lib/api/entities/content/content.utils'
+import { fillContentWithDefaultData } from '@lib/content/content.utils'
 import logger from '@lib/logger'
 import methods from '@lib/api/api-helpers/methods'
 import { onContentAdded } from '@lib/api/hooks/content.hooks'
diff --git a/pages/api/groups/[type].ts b/pages/api/groups/[type].ts
index 74d0e7c9..d1b1e92b 100644
--- a/pages/api/groups/[type].ts
+++ b/pages/api/groups/[type].ts
@@ -1,19 +1,20 @@
+import { ANY_OBJECT, Request } from '@lib/types'
 import { addContent, findContent } from '@lib/api/entities/content'
 import {
   hasPermissionsForGroup,
   isValidGroupType,
   loadUser,
 } from '@lib/api/middlewares'
-import { groupPermission } from '@lib/permissions'
-import { ANY_OBJECT, Request } from '@lib/types'
+
+import Cypher from '@lib/api/api-helpers/cypher-fields'
+import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
 import { connect } from '@lib/api/db'
-import { fillContentWithDefaultData } from '@lib/api/entities/content/content.utils'
+import { fillContentWithDefaultData } from '@lib/content/content.utils'
+import { groupPermission } from '@lib/permissions'
 import { groupValidations } from '@lib/validations/group'
 import methods from '@lib/api/api-helpers/methods'
 import { onGroupAdded } from '@lib/api/hooks/group.hooks'
 import runMiddleware from '@lib/api/api-helpers/run-middleware'
-import { appendInteractions } from '@lib/api/entities/interactions/interactions.utils'
-import Cypher from '@lib/api/api-helpers/cypher-fields'
 
 const getGroups = (filterParams, paginationParams, member) => async (
   req: Request,

From ad1c64fd80f221bb67713f2a4fb43aca314ea18a Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Wed, 10 Mar 2021 20:05:37 +0100
Subject: [PATCH 22/26] fixes on token and group form

---
 .../groups/write/group-form/group-form.tsx    | 31 ++++++++++++++++---
 lib/api/auth/token.ts                         | 14 ++++++---
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/components/groups/write/group-form/group-form.tsx b/components/groups/write/group-form/group-form.tsx
index 13f60c6a..6297f932 100644
--- a/components/groups/write/group-form/group-form.tsx
+++ b/components/groups/write/group-form/group-form.tsx
@@ -7,6 +7,8 @@ import DynamicField from '@components/generic/dynamic-field/dynamic-field-edit'
 import { FIELDS } from '@lib/constants'
 import GroupSummaryView from '../../read/group-summary-view/group-summary-view'
 import Link from 'next/link'
+import SEOForm from '@components/content/write-content/content-form/seo-form'
+import { SEOPropertiesType } from '@lib/types/seo'
 import Toggle from '@components/generic/toggle/toggle'
 import fetch from '@lib/fetcher'
 import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
@@ -24,8 +26,16 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
   const [success, setSuccess] = useState<boolean>(false)
   const [error, setError] = useState<boolean>(false)
 
-  // used to store values
-  const [state, setState] = useState<Partial<GroupEntityType>>({})
+
+  const defaultSeoOptions: SEOPropertiesType = {
+    slug: '',
+    title: '',
+    description: ''
+  }
+  
+  const [state, setState] = useState<Partial<GroupEntityType>>({
+    seo: defaultSeoOptions
+  })
 
   useEffect(() => {
     // Preload the form values
@@ -35,13 +45,19 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
       // additional information
       const allowedKeys = permittedFields
         .map((f) => f.name)
-        .concat('draft', 'members')
+        .concat('draft', 'members', 'seo')
 
       allowedKeys.map((k) => {
         filteredData[k] = group[k]
       })
 
-      setState(filteredData)
+      setState({
+        ...filteredData,
+        seo: {
+          ...defaultSeoOptions,
+          ...(filteredData['seo'] || {})
+        }
+      })
     }
   }, [group, type])
 
@@ -177,8 +193,13 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
             />
           ))}
 
+          <SEOForm value={state.seo} onChange={(val) => setState({
+            ...state,
+            seo: val
+          })} />
+
           <div className="actions">
-            <Button loading={loading} alt type="submit">
+            <Button title="Save" loading={loading} alt type="submit">
               Save
             </Button>
           </div>
diff --git a/lib/api/auth/token.ts b/lib/api/auth/token.ts
index e26cd290..675f93d8 100644
--- a/lib/api/auth/token.ts
+++ b/lib/api/auth/token.ts
@@ -14,11 +14,15 @@ export function encryptSession(session) {
 
 export async function getSession(req) {
   const token = getTokenCookie(req)
-  
-  if (token) {
-    return jwt.verify(token, TOKEN_SECRET)
-  } else if (req.headers['authorization']) {
-    return jwt.verify(req.headers['authorization'].replace('Bearer ', ''), TOKEN_SECRET)
+  try {
+    if (token) {
+      return jwt.verify(token, TOKEN_SECRET)
+    } else if (req.headers['authorization']) {
+      return jwt.verify(req.headers['authorization'].replace('Bearer ', ''), TOKEN_SECRET)
+    }
+
+  } catch (e) {
+    return null
   }
 
   return null

From be4f18424f3715b3734524c0cfd7b121b7aca614 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 11 Mar 2021 16:21:28 +0100
Subject: [PATCH 23/26] Keep working on the SEO form

---
 .env.build                                    |  3 +
 .../content-form/content-form.tsx             | 14 +++--
 .../write-content/content-form/seo-form.tsx   |  7 +++
 .../dynamic-field/dynamic-field-edit.tsx      | 27 +++++++++
 .../dynamic-field/dynamic-field-view.js       | 32 ++++++----
 .../dynamic-field/fields/input-text.tsx       |  6 +-
 .../groups/write/group-form/group-form.tsx    | 12 ++--
 edge.config.ts                                |  4 --
 lib/api/entities/content/index.ts             |  6 +-
 lib/config/config.schema.ts                   |  3 -
 lib/config/load-config.ts                     |  3 -
 lib/fetcher.ts                                |  6 ++
 lib/logger/index.ts                           |  4 +-
 lib/types/config.ts                           |  5 +-
 lib/validations/content/index.ts              | 23 ++++++-
 pages/api/content/[type].ts                   | 13 +++-
 .../api/content/write/content.create.test.js  | 60 +++++++++++++++++++
 .../write/content.purchasing.create.test.js   |  3 -
 18 files changed, 179 insertions(+), 52 deletions(-)

diff --git a/.env.build b/.env.build
index c0dbb4d6..b1e0db53 100644
--- a/.env.build
+++ b/.env.build
@@ -1,6 +1,9 @@
 # Base url for linking emails to the site and oauth callbacks
 BASE_URL=http://localhost:3000
 
+# Log level (DEBUG, WARNING, ERROR)
+LOG_LEVEL=DEBUG
+
 # Secret token for authorization
 AUTH_TOKEN_SECRET=this-is-a-secret-value-with-at-least-32-characters
 
diff --git a/components/content/write-content/content-form/content-form.tsx b/components/content/write-content/content-form/content-form.tsx
index 73617e95..2d5fb00e 100644
--- a/components/content/write-content/content-form/content-form.tsx
+++ b/components/content/write-content/content-form/content-form.tsx
@@ -21,7 +21,7 @@ function ContentForm(props) {
   // Saving states
   const [loading, setLoading] = useState(false)
   const [success, setSuccess] = useState(false)
-  const [error, setError] = useState(false)
+  const [error, setError] = useState('')
 
   const defaultShoppingOptions: PurchashingOptionsType = {
     multiple: false,
@@ -110,6 +110,7 @@ function ContentForm(props) {
         }
       )
     })
+   
   }
 
   const onSubmit = () => {
@@ -147,22 +148,23 @@ function ContentForm(props) {
 
     setLoading(true)
     setSuccess(false)
-    setError(false)
+    setError('')
 
     submitRequest(formData, jsonData)
       .then((result) => {
         setLoading(false)
         setSuccess(true)
-        setError(false)
+        setError('')
 
         if (props.onSave) {
           props.onSave(result)
         }
       })
       .catch((err) => {
+        
         setLoading(false)
         setSuccess(false)
-        setError(true)
+        setError(err.error ? err.error : err)
       })
   }
 
@@ -227,12 +229,12 @@ function ContentForm(props) {
           {success && (
             <div className="success-message">
               Saved: You can see it{' '}
-              <Link href={`/content/${props.type.slug}/${props.content.seo.slug}`}>
+              <Link href={`/content/${props.type.slug}/${state.seo.slug}`}>
                 <a title="View content">here</a>
               </Link>
             </div>
           )}
-          {error && <div className="error-message">Error saving </div>}
+          {error && <div className="error-message">Error saving: {error} </div>}
         </form>
 
         <div className="preview-wrapper">
diff --git a/components/content/write-content/content-form/seo-form.tsx b/components/content/write-content/content-form/seo-form.tsx
index 3d699bb8..f1a79b5d 100644
--- a/components/content/write-content/content-form/seo-form.tsx
+++ b/components/content/write-content/content-form/seo-form.tsx
@@ -2,6 +2,7 @@ import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-ed
 import { FIELDS } from '@lib/constants'
 import React from 'react'
 import { SEOPropertiesType } from '@lib/types/seo'
+import slugify from 'slugify'
 
 type PropTypes = {
   value: SEOPropertiesType,
@@ -24,6 +25,12 @@ export default function SEOForm({
               ...value,
               slug: val
             })}
+            onBlur={() => {
+              onChange({
+                ...value,
+                slug: slugify(value.slug.toLowerCase())
+              })
+            }}
             field={{
               name: 'slug',
               type: FIELDS.TEXT,
diff --git a/components/generic/dynamic-field/dynamic-field-edit.tsx b/components/generic/dynamic-field/dynamic-field-edit.tsx
index d3077981..0f9ccf52 100644
--- a/components/generic/dynamic-field/dynamic-field-edit.tsx
+++ b/components/generic/dynamic-field/dynamic-field-edit.tsx
@@ -36,6 +36,13 @@ function Field(props) {
     [setError, onChangeHandler]
   )
 
+  const { onBlur : onBlurHandler } = props
+  const onBlur = () => {
+    if (onBlurHandler) {
+      onBlurHandler()
+    }
+  }
+
   const getInput = (field) => {
     const datatestId = `${field.type}-${field.name}`
     switch (field.type) {
@@ -47,6 +54,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -58,6 +66,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -69,6 +78,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -80,6 +90,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -91,6 +102,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -102,6 +114,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
       case FIELDS.TIME:
@@ -112,6 +125,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
       case FIELDS.DATETIME:
@@ -122,6 +136,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -134,6 +149,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -144,6 +160,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -155,6 +172,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -166,6 +184,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
       case FIELDS.EMAILS:
@@ -176,6 +195,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
       case FIELDS.SELECT:
@@ -186,6 +206,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -197,6 +218,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
@@ -208,6 +230,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
             pattern={'https?://.+'}
           />
         )
@@ -217,6 +240,7 @@ function Field(props) {
           <textarea
             name={field.name}
             onChange={onChange}
+            onBlur={onBlur}
             disabled={props.disabled}
             value={JSON.stringify(props.value)}
             data-testid={datatestId}
@@ -231,12 +255,14 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
           />
         )
 
       case FIELDS.RICH_TEXT:
         return (
           <RichEditor field={field} value={props.value} onChange={onChange} />
+          
         )
 
       default:
@@ -247,6 +273,7 @@ function Field(props) {
             disabled={props.disabled}
             data-testid={datatestId}
             onChange={onChange}
+            onBlur={onBlur}
             pattern={field.pattern ? field.pattern : null}
           />
         )
diff --git a/components/generic/dynamic-field/dynamic-field-view.js b/components/generic/dynamic-field/dynamic-field-view.js
index 140c56f4..33d980e0 100644
--- a/components/generic/dynamic-field/dynamic-field-view.js
+++ b/components/generic/dynamic-field/dynamic-field-view.js
@@ -15,9 +15,12 @@ function Field({ field, value, typeDefinition }) {
     switch (field.type) {
       case FIELDS.TEXTAREA:
         return (
-          <p data-testid={datatestId} style={{ wordBreak: 'break-all' }}>
-            {value}
-          </p>
+          <div data-testid={datatestId}>
+            <b>{field.label}: </b>{' '}
+            <p data-testid={datatestId} style={{ wordBreak: 'break-all' }}>
+              {value}
+            </p>
+          </div>
         )
       case FIELDS.MARKDOWN:
         const htmlString = md.render(value || '')
@@ -97,14 +100,18 @@ function Field({ field, value, typeDefinition }) {
       case FIELDS.RADIO:
         return value ? (
           <div data-testid={datatestId}>
-            {(Array.isArray(value) ? value : [value]).map((i) => (
-              <span key={i}>
-              {field.options.find((o) => o.value === i) ? field.options.find((o) => o.value === i).label : i.label}
-              </span>
-            ))}
+            <div>
+              <b>{field.label}: </b>
+              {(Array.isArray(value) ? value : [value]).map((i) => (
+                <span key={i}>
+                  {field.options.find((o) => o.value === i)
+                    ? field.options.find((o) => o.value === i).label
+                    : i.label}
+                </span>
+              ))}
+            </div>
             <style jsx>{`
               span {
-                font-size: 14px;
                 padding-right: 5px;
               }
             `}</style>
@@ -134,8 +141,11 @@ function Field({ field, value, typeDefinition }) {
           )
 
       default:
-        return <p data-testid={datatestId}>{value}</p>
-        break
+        return (
+          <div data-testid={datatestId}>
+            <b>{field.label}: </b> <p>{value}</p>
+          </div>
+        )
     }
   }
 
diff --git a/components/generic/dynamic-field/fields/input-text.tsx b/components/generic/dynamic-field/fields/input-text.tsx
index 17128cc4..52fc4ec1 100644
--- a/components/generic/dynamic-field/fields/input-text.tsx
+++ b/components/generic/dynamic-field/fields/input-text.tsx
@@ -1,7 +1,6 @@
 import { memo } from 'react'
-
-import useOnChange from '@components/generic/dynamic-field/hooks/useOnChange'
 import useFieldLength from '@components/generic/dynamic-field/hooks/useFieldLength'
+import useOnChange from '@components/generic/dynamic-field/hooks/useOnChange'
 
 function InputText(props) {
   const { onChange, touched } = useOnChange({ onChangeHandler: props.onChange })
@@ -12,7 +11,7 @@ function InputText(props) {
       type={props?.field.type || 'text'}
       name={props.field.name}
       placeholder={props.field.placeholder}
-      defaultValue={props.value}
+      value={props.value}
       disabled={props.disabled}
       data-testid={props['data-testid']}
       required={!!props.field.required}
@@ -21,6 +20,7 @@ function InputText(props) {
       pattern={props.pattern || null}
       className={`${touched ? 'touched' : ''}`}
       onChange={onChange}
+      onBlur={props.onBlur}
     />
   )
 }
diff --git a/components/groups/write/group-form/group-form.tsx b/components/groups/write/group-form/group-form.tsx
index 6297f932..38209faf 100644
--- a/components/groups/write/group-form/group-form.tsx
+++ b/components/groups/write/group-form/group-form.tsx
@@ -24,7 +24,7 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
   // Saving states
   const [loading, setLoading] = useState<boolean>(false)
   const [success, setSuccess] = useState<boolean>(false)
-  const [error, setError] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
 
 
   const defaultSeoOptions: SEOPropertiesType = {
@@ -134,13 +134,13 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
 
     setLoading(true)
     setSuccess(false)
-    setError(false)
+    setError('')
 
     submitRequest(formData, jsonData)
       .then((result) => {
         setLoading(false)
         setSuccess(true)
-        setError(false)
+        setError('')
 
         if (onSave) {
           onSave(result)
@@ -149,7 +149,7 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
       .catch((err) => {
         setLoading(false)
         setSuccess(false)
-        setError(true)
+        setError(err.error ? err.error : err)
       })
   }
 
@@ -206,12 +206,12 @@ function GroupForm({ type, group, onSave, permittedFields }: Props) {
           {success && (
             <div className="success-message">
               Saved: You can see it{' '}
-              <Link href={`/group/${type.slug}/${group.seo.slug}`}>
+              <Link href={`/group/${type.slug}/${state.seo.slug}`}>
                 <a title="View Content">here</a>
               </Link>
             </div>
           )}
-          {error && <div className="error-message">Error saving </div>}
+          {error && <div className="error-message">Error saving : {error}</div>}
         </form>
 
         <div className="preview-wrapper">
diff --git a/edge.config.ts b/edge.config.ts
index 002056a5..d8348040 100644
--- a/edge.config.ts
+++ b/edge.config.ts
@@ -688,10 +688,6 @@ export const getConfig = (config: any) => {
       },
     },
 
-    logger: {
-      level: 'ERROR',
-    },
-
     // Storages: GOOGLE, AWS, FIREBASE, AZURE
     storage: {
       type: 'GOOGLE',
diff --git a/lib/api/entities/content/index.ts b/lib/api/entities/content/index.ts
index 1f972803..cfed19e9 100644
--- a/lib/api/entities/content/index.ts
+++ b/lib/api/entities/content/index.ts
@@ -6,7 +6,7 @@ import { getDB } from '@lib/api/db'
 import { hidePrivateUserFields } from '@lib/api/entities/users/user.utils'
 import logger from '@lib/logger'
 
-export function findOneContent(type, options) {
+export function findOneContent(type: string, options) {
   
   logger('DEBUG', 'Find', type, options)
   
@@ -22,7 +22,7 @@ export function findOneContent(type, options) {
     })
 }
 
-export function addContent(type, data) {
+export function addContent(type: string, data) {
   return getDB()
     .collection(type)
     .add(data)
@@ -31,7 +31,7 @@ export function addContent(type, data) {
     })
 }
 
-export function updateOneContent(type, id, data) {
+export function updateOneContent(type: string, id: string, data) {
   return getDB()
     .collection(type)
     .doc(id)
diff --git a/lib/config/config.schema.ts b/lib/config/config.schema.ts
index c9e2ab03..045c6052 100644
--- a/lib/config/config.schema.ts
+++ b/lib/config/config.schema.ts
@@ -157,9 +157,6 @@ export default object({
       sizeLimit: string().default('1mb'),
     }),
   }),
-  logger: object().default({
-    level: 'ERROR',
-  }),
   storage: object().required('Missing storage configuration'),
   database: object({
     type: string().matches(
diff --git a/lib/config/load-config.ts b/lib/config/load-config.ts
index ca446fad..491acd7f 100644
--- a/lib/config/load-config.ts
+++ b/lib/config/load-config.ts
@@ -70,9 +70,6 @@ const defaultConfig = {
   database: {
     type: DATABASES.IN_MEMORY,
   },
-  logger: {
-    level: 'ERROR',
-  },
   activity: {
     enabled: true,
     permissions: {
diff --git a/lib/fetcher.ts b/lib/fetcher.ts
index afe4288d..68a25855 100644
--- a/lib/fetcher.ts
+++ b/lib/fetcher.ts
@@ -17,4 +17,10 @@ export default async function fetcher(url, options?) {
     .then((data) => {
       return data
     })
+    .catch(err => {
+      return err.json()
+        .then((e) => {
+          throw e
+        })
+    })
 }
diff --git a/lib/logger/index.ts b/lib/logger/index.ts
index 7f810846..a679bb5a 100644
--- a/lib/logger/index.ts
+++ b/lib/logger/index.ts
@@ -1,5 +1,3 @@
-import config from '@lib/config'
-
 export default function(level = 'DEBUG', ...args) {
   const numberLevel = {
     'DEBUG': 0,
@@ -9,7 +7,7 @@ export default function(level = 'DEBUG', ...args) {
   }
 
   const numberRequested = numberLevel[level] || 0
-  const actualNumber = numberLevel[config.logger.level] || 0
+  const actualNumber = numberLevel[process.env.LOG_LEVEL || 'DEBUG'] || 0
 
   if(numberRequested >= actualNumber) {
     console.log.apply(null, args)
diff --git a/lib/types/config.ts b/lib/types/config.ts
index 785a5d6c..5e052a85 100644
--- a/lib/types/config.ts
+++ b/lib/types/config.ts
@@ -1,7 +1,7 @@
 import { ContentTypeDefinition } from './contentTypeDefinition'
-import { UserTypeDefinition } from './userTypeDefinition'
 import { GroupTypeDefinition } from './groupTypeDefinition'
 import { PermissionsType } from './permissions'
+import { UserTypeDefinition } from './userTypeDefinition'
 
 export declare type ThemeType = {
   label: string
@@ -20,9 +20,6 @@ export declare type ConfigType = {
       sizeLimit: string
     }
   }
-  logger: {
-    level: string
-  }
   storage: {
     type: string
   }
diff --git a/lib/validations/content/index.ts b/lib/validations/content/index.ts
index 94be8a63..7ffffd4e 100644
--- a/lib/validations/content/index.ts
+++ b/lib/validations/content/index.ts
@@ -1,8 +1,9 @@
-const standardAllowedFields = ['draft', 'permissions', 'comments', 'purchasingOptions']
+const standardAllowedFields = ['draft', 'permissions', 'comments', 'purchasingOptions', 'seo']
 
 import {
   PurchashingOptionsType,
 } from '@lib/types/purchasing'
+import { SEOPropertiesType } from '@lib/types/seo'
 import {
   validateField,
 } from '../fields'
@@ -21,6 +22,22 @@ function validatePurchasingOptions(purchasingOptions: PurchashingOptionsType) {
   return errors
 }
 
+function validateSeoField(seo: SEOPropertiesType) {
+  const errors = []
+
+  if (!seo.slug) {
+    errors.push('Missing slug')
+  }
+
+  if (!seo.title) {
+    errors.push('Title can not be empty')
+  }
+
+  return errors
+}
+
+
+
 export function contentValidations(typeDefinition, content) {
   return new Promise((resolve, reject) => {
     let errors = []
@@ -52,6 +69,10 @@ export function contentValidations(typeDefinition, content) {
               errors.push('Invalid draft value')
             }
             break;
+          case 'seo':
+            const seoError = validateSeoField(value)
+            errors = [...seoError, ...errors]
+            break;
           case 'permissions':
             if (typeof (value) !== 'object') {
               errors.push('Invalid permissions value')
diff --git a/pages/api/content/[type].ts b/pages/api/content/[type].ts
index 13455af9..ec6dcbe0 100644
--- a/pages/api/content/[type].ts
+++ b/pages/api/content/[type].ts
@@ -1,4 +1,4 @@
-import { ANY_OBJECT, Request } from '@lib/types'
+import { ANY_OBJECT, ContentEntityType, Request } from '@lib/types'
 import {
   addContent,
   findContent,
@@ -83,7 +83,7 @@ const createContent = async (req: Request, res) => {
   const { purchasingOptions, ...rest} = req.body
   
   // Only store purchasing options if the current user has permissions
-  const content = purchasingPermission(req.currentUser, 'sell', type.slug) ? {
+  const content: ContentEntityType = purchasingPermission(req.currentUser, 'sell', type.slug) ? {
     ...rest,
     purchasingOptions
   } : {
@@ -92,6 +92,15 @@ const createContent = async (req: Request, res) => {
 
   return contentValidations(type, content)
     .then(async () => {
+      // Make sure that there is no content with the same slug
+      const maybeContent = await findOneContent(type.slug, {
+        'seo.slug': content.seo.slug
+      })
+
+      if (maybeContent) {
+        throw new Error('Invalid slug. It already exists.')
+      }
+      
       // Content is valid
       // Add default value to missing fields
       const newContent = fillContentWithDefaultData(
diff --git a/test/integration/api/content/write/content.create.test.js b/test/integration/api/content/write/content.create.test.js
index 70631455..cde30d9a 100644
--- a/test/integration/api/content/write/content.create.test.js
+++ b/test/integration/api/content/write/content.create.test.js
@@ -1,3 +1,7 @@
+import {
+  addContent,
+  findOneContent,
+} from '../../../../../lib/api/entities/content'
 import { deleteFile, uploadFile } from '../../../../../lib/api/storage'
 
 import getPermissions from '../../../../../lib/permissions/get-permissions'
@@ -8,6 +12,7 @@ import request from '../../requestHandler'
 jest.mock('../../../../../lib/api/storage')
 jest.mock('../../../../../lib/api/auth/token')
 jest.mock('../../../../../lib/permissions/get-permissions')
+jest.mock('../../../../../lib/api/entities/content')
 
 jest.mock('../../../../../edge.config', () => {
   const mockInitialPosts = []
@@ -100,6 +105,10 @@ jest.mock('../../../../../edge.config', () => {
 
 describe('Integrations tests for content creation endpoint', () => {
   afterEach(() => {
+    addContent.mockReturnValue(Promise.resolve({
+      id: 'abc'
+    }))
+    findOneContent.mockReturnValue(Promise.resolve(null))
     getPermissions.mockReset()
     getSession.mockReset()
   })
@@ -212,6 +221,57 @@ describe('Integrations tests for content creation endpoint', () => {
     })
   })
 
+  test('Should return 400 if the slug is duplicated', async () => {
+
+    getPermissions.mockReturnValue({
+      'content.post.create': ['USER'],
+      'content.post.admin': ['ADMIN'],
+    })
+
+    getSession.mockReturnValueOnce({
+      roles: ['USER'],
+      id: 'test-id',
+    })
+    
+    findOneContent.mockReturnValue({
+      id: 'abc'
+    })
+
+    const newPost = {
+      title: 'test test test test test test ',
+      seo: {
+        slug: '1',
+        title: '1,'
+      },
+      description:
+        'test test  test test test test test test test test test test test test test test ',
+      tags: [
+        {
+          label: 'Hello',
+          slug: 'hello',
+        },
+        {
+          label: 'World',
+          slug: 'world',
+        },
+      ],
+    }
+
+    const res = await request(handler, {
+      method: 'POST',
+      query:  { type: 'post' },
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: newPost
+    });
+
+
+    expect(res.statusCode).toBe(400)
+    
+   
+  })
+
   test('Should return 401 for a role that is PUBLIC', async () => {
       
     getPermissions.mockReturnValue({
diff --git a/test/integration/api/content/write/content.purchasing.create.test.js b/test/integration/api/content/write/content.purchasing.create.test.js
index a14abe61..d6e8560f 100644
--- a/test/integration/api/content/write/content.purchasing.create.test.js
+++ b/test/integration/api/content/write/content.purchasing.create.test.js
@@ -13,9 +13,6 @@ import {
 } from '../../../../../lib/api/auth/token'
 import handler from '../../../../../pages/api/content/[type]'
 import request from '../../requestHandler'
-import {
-  string,
-} from 'yup'
 
 jest.mock('../../../../../lib/api/storage')
 jest.mock('../../../../../lib/api/auth/token')

From 2ab41d8ecaf21787cb0c4e6a678e59ba8f162105 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Thu, 18 Mar 2021 10:11:18 +0100
Subject: [PATCH 24/26] new cookies settings

---
 components/generic/cookies/index.tsx      | 85 +++++++++++++++++++++--
 lib/client/contexts/analytics-context.tsx | 44 ++++++++++++
 lib/client/contexts/cookies-context.tsx   | 27 +++++--
 pages/_app.tsx                            | 13 ++--
 pages/_document.js                        | 19 -----
 5 files changed, 154 insertions(+), 34 deletions(-)
 create mode 100644 lib/client/contexts/analytics-context.tsx

diff --git a/components/generic/cookies/index.tsx b/components/generic/cookies/index.tsx
index dba4fd97..3903d695 100644
--- a/components/generic/cookies/index.tsx
+++ b/components/generic/cookies/index.tsx
@@ -2,19 +2,65 @@ import React, { useContext, useEffect } from 'react'
 
 import Button from '@components/generic/button/button'
 import { CookiesContext } from '@lib/client/contexts/cookies-context'
+import Link from 'next/link'
 
 export default function Cookies() {
-  const { accepted, accept } = useContext(CookiesContext)
+  const { accepted, accept, cookies, setCookies } = useContext(CookiesContext)
 
+  const onClickAccept = () => {
+    if (cookies.functional) {
+      accept()
+    }
+  }
+
+  const onClickAcceptAll = () => {
+    setCookies({
+      functional: true,
+      statistics: true
+    })
+    accept()
+  }
+
+  const onClickReject = () => {
+    alert('Rejecting cookies will not allow you to use this site. We are sorry for the inconvenience.')
+  }
+  
   return (
     <>
       {!accepted && (
         <div className="cookies-wr">
           <div className="cookies-component">
             <div className="cookies-content">
-              <p>This website uses cookies </p>
+              <div className="text">
+                <p>This website uses cookies to work properly and to improve the service. You can check our <Link href="/p/cookies-policy" ><a title="Cookies Policy"> Cookies Policy</a></Link></p>
+              </div>
+              <div className="config">
+                <div className="config-item">
+                  <label>Functional cookies<input type="checkbox" checked={cookies.functional} onClick={() => {
+                    setCookies({...cookies, functional: !cookies.functional})
+                  }}/></label>
+                </div>
+                <div className="config-item">
+                  <label>Analytics Cookies<input type="checkbox" checked={cookies.statistics} onClick={() => {
+                    setCookies({...cookies, statistics: !cookies.statistics})
+                  }}/></label>
+                </div>
+              </div>
               <div className="cookies-actions">
-                <Button onClick={accept}>Accept</Button>
+                <div className="button-wr">
+                  <Button title="Accept cookies" onClick={onClickAcceptAll}>Accept All</Button>
+                </div>
+                <div className="button-wr">
+                  <Button title="Accept configured cookies" secondary  onClick={onClickAccept}>Accept configured cookies</Button>
+                </div>
+
+              </div>
+              <div className="cookies-actions">
+                <div className="button-wr">
+                  <Button title="Reject Cookies" onClick={onClickReject}>Reject cookies</Button>
+                </div>
+               
+                
               </div>
             </div>
           </div>
@@ -41,19 +87,46 @@ export default function Cookies() {
           
         }
 
+        a {
+          color: var(--edge-fonce-red);
+        }
+
         .cookies-content {
-          max-width: 500px;
           margin: 0 auto;
+          max-width: 800px;
         }
 
-        p {
-          text-align: center;
+        .text {
+          margin-bottom: 15px;
         }
 
         .cookies-actions {
           display: flex;
           align-items: center;
           justify-content: center;
+          margin: 15px;
+        }
+
+        @media all and (max-width: 720px) {
+          .cookies-actions {
+            flex-direction: column;
+          }
+        }
+
+
+        .button-wr {
+          margin: 15px;
+        }
+
+        .config-item input {
+          width: auto;
+          margin-left: 5px;
+        }
+
+        .config-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
         `
       }</style>
diff --git a/lib/client/contexts/analytics-context.tsx b/lib/client/contexts/analytics-context.tsx
new file mode 100644
index 00000000..259fadac
--- /dev/null
+++ b/lib/client/contexts/analytics-context.tsx
@@ -0,0 +1,44 @@
+import React, { createContext, useContext } from 'react'
+
+import { CookiesContext } from './cookies-context'
+import { GA_TRACKING_ID } from '@lib/client/gtag'
+import Head from 'next/head'
+
+export const AnalyticsContext = createContext({})
+
+
+export const AnalyticsProvider = ({ children }: any) => {
+  const { cookies } = useContext(CookiesContext)
+
+
+  return (
+    <AnalyticsContext.Provider value={{}}>
+      <>
+        <Head>
+          {/* Global Site Tag (gtag.js) - Google Analytics */}
+          {cookies.statistics && (
+            <>
+              <script
+                async
+                src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+              />
+              <script
+                dangerouslySetInnerHTML={{
+                  __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+              });
+            `,
+                }}
+              />
+            </>
+          )}
+        </Head>
+        {children}
+      </>
+    </AnalyticsContext.Provider>
+  )
+}
diff --git a/lib/client/contexts/cookies-context.tsx b/lib/client/contexts/cookies-context.tsx
index 54abca6f..32997d18 100644
--- a/lib/client/contexts/cookies-context.tsx
+++ b/lib/client/contexts/cookies-context.tsx
@@ -2,27 +2,46 @@ import React, { createContext, useEffect, useState } from 'react'
 
 import storage from '../storage'
 
-export const CookiesContext = createContext<{accepted: boolean, accept: () => void}>({
+type CookiesType = {
+  statistics: boolean,
+  functional: boolean
+}
+export const CookiesContext = createContext<{accepted: boolean, accept: () => void, cookies: CookiesType,  setCookies: (val: CookiesType) => void}>({
   accepted: false,
-  accept: () => {}
+  accept: () => {},
+  cookies: {
+    statistics: true,
+    functional: true
+  },
+  setCookies: (val: CookiesType) => null
 })
 
 export const CookiesProvider = ({ children } : any) => {
   const [accepted, setAccepted] = useState(false)
+  const [cookies, setStateCookies] = useState({
+    functional: true,
+    statistics: true
+  })
 
   const accept = () => {
     setAccepted(true)
-    storage.set('cookies', JSON.stringify({ accepted: true, date: Date.now()}))
+    storage.set('cookies', JSON.stringify({ accepted: true, cookies, date: Date.now()}))
   }
 
   // Load previous cookies storage
   useEffect(() => {
     const prevCookies = storage.get('cookies', true)
     setAccepted(prevCookies ? prevCookies.accepted : false)
+    setCookies(prevCookies && prevCookies.cookies ? prevCookies.cookies: cookies)
   }, [])
 
+  const setCookies = (val: CookiesType) => {
+    setStateCookies(val)
+    storage.set('cookies', JSON.stringify({ accepted, cookies: val, date: Date.now()}))
+  } 
+
   return (
-    <CookiesContext.Provider value={{ accepted, accept }}>
+    <CookiesContext.Provider value={{ accepted, accept, cookies, setCookies }}>
       {children}
     </CookiesContext.Provider>
   )
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cdd63e85..e4bdd9dd 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ import withEdgeTheme, {
   EdgeThemeContext,
 } from '@lib/client/contexts/edge-theme'
 
+import { AnalyticsProvider } from '@lib/client/contexts/analytics-context'
 import { CookiesProvider } from '@lib/client/contexts/cookies-context'
 import Head from 'next/head'
 import { MaintenanceProvider } from '@lib/client/contexts/maintenance-context'
@@ -40,11 +41,13 @@ function MyApp({ Component, pageProps }) {
         <UserProvider>
           <MaintenanceProvider>
             <CookiesProvider>
-              <ShoopingCartProvider>
-                <ModalProvider>
-                  <Component {...pageProps} />
-                </ModalProvider>
-              </ShoopingCartProvider>
+              <AnalyticsProvider>
+                <ShoopingCartProvider>
+                  <ModalProvider>
+                    <Component {...pageProps} />
+                  </ModalProvider>
+                </ShoopingCartProvider>
+              </AnalyticsProvider>
             </CookiesProvider>
           </MaintenanceProvider>
         </UserProvider>
diff --git a/pages/_document.js b/pages/_document.js
index e9c5a817..b1d58d28 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -1,6 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
 
-import { GA_TRACKING_ID } from '../lib/client/gtag'
 import config from '../lib/config'
 
 // A custom document is required in Next.js to set the `lang` attribute on the
@@ -39,24 +38,6 @@ class MyDocument extends Document {
           />
           <link rel="manifest" href="/manifest.json" />
           <link rel="shortcut icon" href="/icons/favicon.ico" />
-
-          {/* Global Site Tag (gtag.js) - Google Analytics */}
-          <script
-            async
-            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
-          />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){dataLayer.push(arguments);}
-              gtag('js', new Date());
-              gtag('config', '${GA_TRACKING_ID}', {
-                page_path: window.location.pathname,
-              });
-            `,
-            }}
-          />
         </Head>
         <body>
           <Main />

From 25718a6a7f228ce108cdd15c4b88a6e62ac600f2 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sat, 20 Mar 2021 14:18:51 +0100
Subject: [PATCH 25/26] start showing products on home page

---
 .../content-detail-view.tsx                   | 296 +++++++++---------
 .../content-summary-view.tsx                  |   4 +-
 .../read-content/product-list-view/index.tsx  |  58 ++++
 .../product-summary-view/index.tsx            |  61 ++++
 .../index.tsx}                                |   0
 pages/index.tsx                               |   3 +
 6 files changed, 275 insertions(+), 147 deletions(-)
 create mode 100644 components/content/read-content/product-list-view/index.tsx
 create mode 100644 components/content/read-content/product-summary-view/index.tsx
 rename components/content/read-content/{content-detail-view/purchasing-product-form.tsx => purchasing-product-form/index.tsx} (100%)

diff --git a/components/content/read-content/content-detail-view/content-detail-view.tsx b/components/content/read-content/content-detail-view/content-detail-view.tsx
index 827d263b..dbd50899 100644
--- a/components/content/read-content/content-detail-view/content-detail-view.tsx
+++ b/components/content/read-content/content-detail-view/content-detail-view.tsx
@@ -10,7 +10,7 @@ import { ContentEntityType } from '@lib/types'
 import ContentSummaryView from '../content-summary-view/content-summary-view'
 import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
 import { Interaction } from '@components/generic/interactions'
-import PurchasingProductForm from './purchasing-product-form'
+import PurchasingProductForm from '../purchasing-product-form'
 import SocialShare from '@components/generic/social-share/social-share'
 import { format } from 'timeago.js'
 import { purchasingPermission } from '@lib/permissions'
@@ -88,148 +88,177 @@ function ContentDetailView(props: Props) {
   return (
     <>
       <article className="edge-item-card">
-        {contentIsMonetized && props.summary && (
-          <div className="monetization-layer">
-            <div className="monetization-layer-content">
-              <p>
-                This content is monetized, to see the full content please
-                navigate to the detail.
-              </p>
-
-              <Button
-                href={`/content/${props.type.slug}/${props.content.seo.slug}`}
-              >
-                See full content
-              </Button>
-            </div>
-          </div>
-        )}
+        <div className="content-wrapper">
 
-        {contentIsMonetized && !props.summary && !monetizedState.state && (
-          <div className="monetization-layer">
-            <div className="monetization-layer-content">
-              This content is monetized, to see the full content please, sign up
-              for Coil to support the author
+          {contentIsMonetized && props.summary && (
+            <div className="monetization-layer">
+              <div className="monetization-layer-content">
+                <p>
+                  This content is monetized, to see the full content please
+                  navigate to the detail.
+                </p>
+
+                <Button
+                  href={`/content/${props.type.slug}/${props.content.seo.slug}`}
+                >
+                  See full content
+                </Button>
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {contentIsMonetized &&
-          !props.summary &&
-          monetizedState.state === 'started' && (
+          {contentIsMonetized && !props.summary && !monetizedState.state && (
             <div className="monetization-layer">
-              <p>Thanks for supporting this author</p>
+              <div className="monetization-layer-content">
+                This content is monetized, to see the full content please, sign up
+                for Coil to support the author
+              </div>
             </div>
           )}
 
-        <div className="edge-item-card-header">
-          {props.content.draft && <div className="status">Draft</div>}
+          {contentIsMonetized &&
+            !props.summary &&
+            monetizedState.state === 'started' && (
+              <div className="monetization-layer">
+                <p>Thanks for supporting this author</p>
+              </div>
+            )}
 
-          {!props.content.draft && (
-            <div className="author-info">
-              <AuthorBox user={props.content ? props.content.user : null} />
-            </div>
-          )}
+          <div className="edge-item-card-header">
+            {props.content.draft && <div className="status">Draft</div>}
 
-          <div className="edge-item-card-actions">
-            {(canEditComment.available || isContentOwner) && (
-              <div className="header-item-action">
-                <Button
-                  href={`/edit/content/${props.content.type}/${props.content.seo.slug}`}
-                  round
-                  aria-label="round button"
-                >
-                  <img
-                    style={{ width: '15px' }}
-                    src="/icons/icon-edit.svg"
-                    alt="edit"
-                  />
-                </Button>
+            {!props.content.draft && (
+              <div className="author-info">
+                <AuthorBox user={props.content ? props.content.user : null} />
               </div>
             )}
+
+            <div className="edge-item-card-actions">
+              {(canEditComment.available || isContentOwner) && (
+                <div className="header-item-action">
+                  <Button
+                    href={`/edit/content/${props.content.type}/${props.content.seo.slug}`}
+                    round
+                    aria-label="round button"
+                  >
+                    <img
+                      style={{ width: '15px' }}
+                      src="/icons/icon-edit.svg"
+                      alt="edit"
+                    />
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-        <div className="edge-item-card-content">
-          <ContentSummaryView
-            content={props.content}
-            summary={!!props.summary}
-            type={props.type}
-            user={user}
-          />
-        </div>
-              
-        {purchasingPermission(user, 'buy', props.type.slug) && props.content.purchasingOptions && <PurchasingProductForm value={props.content.purchasingOptions} /> }
-
-        <footer className="edge-item-card-footer">
-          <ul className="edge-item-card-stats">
-            <li className="edge-item-card-stats-item">
-              <b>{format(props.content.createdAt)}</b>
-            </li>
-
-            <li className="edge-item-card-stats-item">
-              <b>
-                {props.type.comments.enabled &&
-                canReadComments.available &&
-                typeof props.content.comments !== 'undefined' &&
-                addComments ? (
-                  <span className="comment-count" onClick={onClickComments}>
-                    {props.content.comments === 0 && canWriteComments.available
-                      ? 'Add a comment'
-                      : `${props.content.comments} comments`}
-                  </span>
-                ) : null}
-              </b>
-            </li>
-          </ul>
-
-          <SocialShare shareUrl={shareUrl} />
-        </footer>
-
-        {props.type.comments.enabled &&
-          canWriteComments.available &&
-          showComments && (
-            <div className="comment-form-wrapper">
-              <CommentForm
-                onSave={onCommentAdded}
+          <div className="edge-item-card-content">
+            <ContentSummaryView
+              content={props.content}
+              summary={!!props.summary}
+              type={props.type}
+              user={user}
+            />
+          </div>
+                
+
+          <footer className="edge-item-card-footer">
+            <ul className="edge-item-card-stats">
+              <li className="edge-item-card-stats-item">
+                <b>{format(props.content.createdAt)}</b>
+              </li>
+
+              <li className="edge-item-card-stats-item">
+                <b>
+                  {props.type.comments.enabled &&
+                  canReadComments.available &&
+                  typeof props.content.comments !== 'undefined' &&
+                  addComments ? (
+                    <span className="comment-count" onClick={onClickComments}>
+                      {props.content.comments === 0 && canWriteComments.available
+                        ? 'Add a comment'
+                        : `${props.content.comments} comments`}
+                    </span>
+                  ) : null}
+                </b>
+              </li>
+            </ul>
+
+            <SocialShare shareUrl={shareUrl} />
+          </footer>
+
+          {props.type.comments.enabled &&
+            canWriteComments.available &&
+            showComments && (
+              <div className="comment-form-wrapper">
+                <CommentForm
+                  onSave={onCommentAdded}
+                  type={props.type}
+                  contentId={props.content.id}
+                  onCancel={() => setShowComments(!showComments)}
+                />
+              </div>
+            )}
+          <div className="interactions">
+            {interactionsConfig.map((interaction) => (
+              <Interaction
+                key={interaction.type}
+                interactions={props.content.interactions}
+                interactionConfig={interaction}
+                entity="content"
+                entityType={props.type.slug}
+                entityId={props.content.id}
+              />
+            ))}
+          </div>
+          {props.type.comments.enabled &&
+            canReadComments.available &&
+            showComments && (
+              <CommentsFeed
                 type={props.type}
                 contentId={props.content.id}
-                onCancel={() => setShowComments(!showComments)}
+                newComments={newComments}
               />
-            </div>
-          )}
-        <div className="interactions">
-          {interactionsConfig.map((interaction) => (
-            <Interaction
-              key={interaction.type}
-              interactions={props.content.interactions}
-              interactionConfig={interaction}
-              entity="content"
-              entityType={props.type.slug}
-              entityId={props.content.id}
-            />
-          ))}
-        </div>
-        {props.type.comments.enabled &&
-          canReadComments.available &&
-          showComments && (
-            <CommentsFeed
-              type={props.type}
-              contentId={props.content.id}
-              newComments={newComments}
+            )}
+
+          {props.showActions && (
+            <ContentActions
+              className={'content-actions'}
+              content={props.content}
             />
           )}
+        </div>
+
+        {purchasingPermission(user, 'buy', props.type.slug) && props.content.purchasingOptions &&  (
+          <div className="purchasing-options-wrapper">
+            <PurchasingProductForm value={props.content.purchasingOptions} />
+          </div>
+        ) }
 
-        {props.showActions && (
-          <ContentActions
-            className={'content-actions'}
-            content={props.content}
-          />
-        )}
       </article>
       <style jsx>{`
-      .comment-count{
+        
+        .edge-item-card {
+          background-color: var(--edge-background);
+          border-radius: var(--edge-gap-half);
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+          margin-bottom: var(--edge-gap);
+          position: relative;
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .content-wrapper {
+          padding: var(--edge-gap-medium);
+        }
+
+        .purchasing-options-wrapper {
+          padding: var(--edge-gap-medium);
+        }
+
+        .comment-count{
           cursor: pointer;
         }
+
         .interactions {
           margin-top: var(--edge-gap);
           display: inline-flex;
@@ -254,24 +283,13 @@ function ContentDetailView(props: Props) {
           margin-right: var(--edge-gap);
         }
 
-        .edge-item-card {
-          background-color: var(--edge-background);
-          border-radius: var(--edge-gap-half);
-          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-          margin-bottom: var(--edge-gap);
-          padding: var(--edge-gap-medium);
-          position: relative;
-        }
+
         @media all and (max-width: 720px) {
           .edge-item-card-footer {
             display: flex;
             flex-flow: column;
           }
 
-          .edge-item-card {
-            padding: var(--edge-gap);
-          }
-
           .edge-item-card-stats {
             margin-bottom: var(--edge-gap);
           }
@@ -298,12 +316,6 @@ function ContentDetailView(props: Props) {
           width: 100%;
         }
 
-        @media all and (max-width: 460px) {
-          .edge-item-card {
-            padding: var(--edge-gap);
-          }
-        }
-
         .edge-item-card-actions {
           align-items: center;
           display: flex;
@@ -313,12 +325,6 @@ function ContentDetailView(props: Props) {
           margin-left: var(--edge-gap-half);
         }
 
-        @media all and (max-width: 600px) {
-          .edge-item-card-actions .header-item-action.follow-button {
-            display: none;
-          }
-        }
-
         .edge-item-card-content {
           margin: var(--edge-gap-double) 0 0;
         }
diff --git a/components/content/read-content/content-summary-view/content-summary-view.tsx b/components/content/read-content/content-summary-view/content-summary-view.tsx
index f09696c8..e0741d82 100644
--- a/components/content/read-content/content-summary-view/content-summary-view.tsx
+++ b/components/content/read-content/content-summary-view/content-summary-view.tsx
@@ -54,7 +54,7 @@ function ContentSummaryView(props) {
                 >
                   {links && (
                     <Link
-                      href={`/content/${props.type.slug}/${props.content.slug}`}
+                      href={`/content/${props.type.slug}/${props.content.seo.slug}`}
                     >
                       <a>{props.content[field.name]}</a>
                     </Link>
@@ -72,7 +72,7 @@ function ContentSummaryView(props) {
                 <div key={`${field.name}-${props.content.id}`}>
                   {shouldAddLink(field) && (
                     <Link
-                      href={`/content/${props.type.slug}/${props.content.slug}`}
+                      href={`/content/${props.type.slug}/${props.content.seo.slug}`}
                     >
                       <a title="Go to content detail">
                         <DynamicFieldView
diff --git a/components/content/read-content/product-list-view/index.tsx b/components/content/read-content/product-list-view/index.tsx
new file mode 100644
index 00000000..d08c855e
--- /dev/null
+++ b/components/content/read-content/product-list-view/index.tsx
@@ -0,0 +1,58 @@
+import API from '@lib/api/api-endpoints'
+import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
+import EmptyList from '@components/generic/empty-list'
+import LoadingItems from '@components/generic/loading/loading-items'
+import ProductSummaryView from '../product-summary-view'
+import fetch from '@lib/fetcher'
+import { memo } from 'react'
+import useSWR from 'swr'
+
+interface Props {
+  type: ContentTypeDefinition
+}
+
+function ProductListView({
+  type
+}: Props) {
+  
+  const limit = 5
+  const from = 0
+  const sortBy = 'createdAt'
+  const sortOrder = 'DESC'
+  const url = `${API.content[type.slug]}?limit=${limit}&from=${from}&sortBy=${sortBy}&sortOrder=${sortOrder}`
+  
+  const { data, error } = useSWR(
+    url,
+    fetch
+  )
+  
+  const isLoading = !data && !error
+  const isEmpty = data && data.results.length === 0
+  
+  return (
+    <>
+      <div className="product-list-view">
+        
+        {data && data.results.map((item) => (
+          <div className="product-item" key={`${item.id}${item.createdAt}`}>
+            <ProductSummaryView
+              content={item}
+              type={type}
+            />
+          </div>
+        ))}
+        {isLoading && <LoadingItems />}
+        {isEmpty && <EmptyList />}
+        
+      </div>
+      <style jsx>{`
+        .product-list-view {
+          display: flex;
+          flex-wrap: wrap;
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default memo(ProductListView)
diff --git a/components/content/read-content/product-summary-view/index.tsx b/components/content/read-content/product-summary-view/index.tsx
new file mode 100644
index 00000000..79368d2e
--- /dev/null
+++ b/components/content/read-content/product-summary-view/index.tsx
@@ -0,0 +1,61 @@
+import React, { Fragment, memo } from 'react'
+
+import AuthorBox from '@components/user/author-box/author-box'
+import { ContentEntityType } from '@lib/types'
+import ContentSummaryView from '../content-summary-view/content-summary-view'
+import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
+import { useUser } from '@lib/client/hooks'
+
+interface Props {
+  content: ContentEntityType
+  type: ContentTypeDefinition
+}
+
+function ProductSummaryView(props: Props) {
+  
+
+  const { user } = useUser()
+
+
+  return (
+    <>
+      <article className="edge-item-card">
+        
+        <div className="edge-item-card-header">
+
+          {!props.content.draft && (
+            <div className="author-info">
+              <AuthorBox user={props.content ? props.content.user : null} />
+            </div>
+          )}
+          
+        </div>
+        <div className="edge-item-card-content">
+          <ContentSummaryView
+            content={props.content}
+            summary={true}
+            type={props.type}
+            user={user}
+          />
+        </div>
+              
+        
+      </article>
+      <style jsx>{`
+        
+       .edge-item-card {
+          background-color: var(--edge-background);
+          border-radius: var(--edge-gap-half);
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+          margin-bottom: var(--edge-gap);
+          padding: var(--edge-gap-medium);
+          position: relative;
+       }
+
+       
+      `}</style>
+    </>
+  )
+}
+
+export default memo(ProductSummaryView)
diff --git a/components/content/read-content/content-detail-view/purchasing-product-form.tsx b/components/content/read-content/purchasing-product-form/index.tsx
similarity index 100%
rename from components/content/read-content/content-detail-view/purchasing-product-form.tsx
rename to components/content/read-content/purchasing-product-form/index.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
index 03805fac..fc1d16f8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import Button from '@components/generic/button/button'
 import ContentListView from '@components/content/read-content/content-list-view/content-list-view'
 import Layout from '@components/layout/three-panels/layout'
+import ProductList from '@components/content/read-content/product-list-view'
 import ToolBar from '@components/generic/toolbar/toolbar'
 import config from '@lib/config'
 import { getContentTypeDefinition } from '@lib/config'
@@ -104,6 +105,8 @@ const Landing = () => {
           </div>
           <button className="close" onClick={() => setActive(!active)}></button>
         </aside>
+        <ProductList type={getContentTypeDefinition('product')} />
+
         {contentType && <ContentListView type={contentType} />}
       </Layout>
       <style jsx>{`

From 49a4f5ae5d55408451f8ee468938d06ee268cfb2 Mon Sep 17 00:00:00 2001
From: rafinskipg <rafinskipg@gmail.com>
Date: Sat, 20 Mar 2021 18:30:14 +0100
Subject: [PATCH 26/26] home product list

---
 .../content-summary-view.tsx                  |  2 +-
 .../read-content/product-list-view/index.tsx  |  4 +-
 .../product-summary-view/index.tsx            | 60 ++++++++++++-------
 .../purchasing-product-form/index.tsx         |  9 +--
 .../purchasing-product-form/product-price.tsx | 35 +++++++++++
 edge.config.ts                                |  1 +
 lib/types/entities/content.ts                 |  5 +-
 7 files changed, 86 insertions(+), 30 deletions(-)
 create mode 100644 components/content/read-content/purchasing-product-form/product-price.tsx

diff --git a/components/content/read-content/content-summary-view/content-summary-view.tsx b/components/content/read-content/content-summary-view/content-summary-view.tsx
index e0741d82..1eaad3ac 100644
--- a/components/content/read-content/content-summary-view/content-summary-view.tsx
+++ b/components/content/read-content/content-summary-view/content-summary-view.tsx
@@ -56,7 +56,7 @@ function ContentSummaryView(props) {
                     <Link
                       href={`/content/${props.type.slug}/${props.content.seo.slug}`}
                     >
-                      <a>{props.content[field.name]}</a>
+                      <a title="See content detail">{props.content[field.name]}</a>
                     </Link>
                   )}
                   {!links && props.content[field.name]}
diff --git a/components/content/read-content/product-list-view/index.tsx b/components/content/read-content/product-list-view/index.tsx
index d08c855e..b68f66ea 100644
--- a/components/content/read-content/product-list-view/index.tsx
+++ b/components/content/read-content/product-list-view/index.tsx
@@ -15,7 +15,7 @@ function ProductListView({
   type
 }: Props) {
   
-  const limit = 5
+  const limit = 3
   const from = 0
   const sortBy = 'createdAt'
   const sortOrder = 'DESC'
@@ -49,6 +49,8 @@ function ProductListView({
         .product-list-view {
           display: flex;
           flex-wrap: wrap;
+          align-items: top;
+          justify-content: center;
         }
       `}</style>
     </>
diff --git a/components/content/read-content/product-summary-view/index.tsx b/components/content/read-content/product-summary-view/index.tsx
index 79368d2e..567582c1 100644
--- a/components/content/read-content/product-summary-view/index.tsx
+++ b/components/content/read-content/product-summary-view/index.tsx
@@ -4,6 +4,9 @@ import AuthorBox from '@components/user/author-box/author-box'
 import { ContentEntityType } from '@lib/types'
 import ContentSummaryView from '../content-summary-view/content-summary-view'
 import { ContentTypeDefinition } from '@lib/types/contentTypeDefinition'
+import DynamicFieldView from '@components/generic/dynamic-field/dynamic-field-view'
+import Link from 'next/link'
+import ProductPrice from '../purchasing-product-form/product-price'
 import { useUser } from '@lib/client/hooks'
 
 interface Props {
@@ -12,7 +15,7 @@ interface Props {
 }
 
 function ProductSummaryView(props: Props) {
-  
+
 
   const { user } = useUser()
 
@@ -20,26 +23,32 @@ function ProductSummaryView(props: Props) {
   return (
     <>
       <article className="edge-item-card">
-        
-        <div className="edge-item-card-header">
 
-          {!props.content.draft && (
-            <div className="author-info">
-              <AuthorBox user={props.content ? props.content.user : null} />
-            </div>
-          )}
-          
-        </div>
+
         <div className="edge-item-card-content">
-          <ContentSummaryView
-            content={props.content}
-            summary={true}
-            type={props.type}
-            user={user}
-          />
+          <Link href={`/content/${props.type.slug}/${props.content.seo.slug}`}>
+            <a title="See product"><h2>{props.content.title}</h2></a>
+          </Link>
+
+          <Link href={`/content/${props.type.slug}/${props.content.seo.slug}`}>
+            <a title="See product">
+              <DynamicFieldView
+                field={props.type.fields.find(i => i.name === 'images')}
+                value={props.content.images}
+                typeDefinition={props.type} />
+            </a>
+          </Link>
+          
+          <div className="price">
+            <ProductPrice options={props.content.purchasingOptions} amount={1} />
+          </div>
+
+          <div className="author-info">
+            <AuthorBox user={props.content ? props.content.user : null} />
+          </div>
         </div>
-              
-        
+
+
       </article>
       <style jsx>{`
         
@@ -47,11 +56,22 @@ function ProductSummaryView(props: Props) {
           background-color: var(--edge-background);
           border-radius: var(--edge-gap-half);
           box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-          margin-bottom: var(--edge-gap);
-          padding: var(--edge-gap-medium);
+          margin: 5px;
+          padding: var(--edge-gap-half);
           position: relative;
+          max-width: 200px;
+          width: 200px;
        }
 
+       h2 {
+         font-size: 14px;
+         margin-bottom: 5px;
+       }
+
+       .price {
+         margin-top: 5px;
+         margin-bottom: 5px;
+       }
        
       `}</style>
     </>
diff --git a/components/content/read-content/purchasing-product-form/index.tsx b/components/content/read-content/purchasing-product-form/index.tsx
index dc52811b..24c90e6d 100644
--- a/components/content/read-content/purchasing-product-form/index.tsx
+++ b/components/content/read-content/purchasing-product-form/index.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect, useState } from 'react'
 
 import Button from '@components/generic/button/button'
 import DynamicFieldEdit from '@components/generic/dynamic-field/dynamic-field-edit'
+import ProductPrice from './product-price'
 import { ShoppingCartContext } from '@lib/client/contexts/shopping-cart-context'
 import { useTranslation } from 'react-i18next'
 
@@ -27,10 +28,7 @@ export default function PurchasingProductForm({
     }
   }, [value])
 
-  const variant = selectedVariant ? value.variants.find(i => i.name === name) : null
 
-  const totalPrice = variant ? variant.price * amount : value.price * amount
-  const currency = '€'
 
   const addToCart = () => {
     addProduct({
@@ -81,7 +79,10 @@ export default function PurchasingProductForm({
 
         
         <div className="price">
-          {totalPrice} {currency}
+          <ProductPrice
+            options={value}
+            amount={amount}
+            variant={selectedVariant} />
         </div>
 
 
diff --git a/components/content/read-content/purchasing-product-form/product-price.tsx b/components/content/read-content/purchasing-product-form/product-price.tsx
new file mode 100644
index 00000000..37525278
--- /dev/null
+++ b/components/content/read-content/purchasing-product-form/product-price.tsx
@@ -0,0 +1,35 @@
+import { PurchashingOptionsType } from '@lib/types/purchasing'
+import React from 'react'
+
+type PropTypes = {
+  options: PurchashingOptionsType,
+  amount: number,
+  selectedVariant?: string
+}
+
+export default function ProductPrice({
+  options,
+  amount,
+  selectedVariant
+}: PropTypes) {
+
+  const variant = selectedVariant ? options.variants.find(i => i.name === name) : null
+
+  const totalPrice = variant ? variant.price * amount : options.price * amount
+  const currency = '€'
+  return (
+    <>
+      <div className="product-price">
+        {totalPrice}{currency}
+      </div>
+      <style jsx>{
+        `
+        .product-price {
+          font-weight: bold;
+          
+        }
+        `
+      }</style>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/edge.config.ts b/edge.config.ts
index d8348040..78b7d906 100644
--- a/edge.config.ts
+++ b/edge.config.ts
@@ -302,6 +302,7 @@ export const getConfig = (config: any) => {
         label: 'Image',
         placeholder: 'Image',
         multiple: true,
+        required: true,
         errorMessage: 'Only images are supported',
       },
       {
diff --git a/lib/types/entities/content.ts b/lib/types/entities/content.ts
index 72967e42..7175ab49 100644
--- a/lib/types/entities/content.ts
+++ b/lib/types/entities/content.ts
@@ -9,16 +9,13 @@ export type ContentEntityType = {
   type: string
   title: string
   description: string
-  city?: string
-  remote?: string
   tags?: Array<{ label: string; slug: string }>
   image?: Array<{ path: string; createdAt: number; name: string }>
+  images?: Array<{ path: string; createdAt: number; name: string }>
   dateStart?: string
   timeStart?: string
   featured?: boolean
   paymentPointer?: string
-  dateEnd?: string
-  timeEnd?: string
   draft: boolean
   author: string
   user: UserType