WIP: Purchasing

.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
 

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: [{
@@ -730,7 +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 authorizate users:
+- JWT token on the Authenthication header
+  - Using the format `Authentication: Bearer TOKEN`
+- API Key
+  - TO-DO
 
 ### Providers
 
@@ -812,6 +837,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.

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
@@ -35,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/).
 

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>
+    </>
+  )
+}

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">

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 && (