From 0a4a890b305dd224872abfc07732f7001c2c0308 Mon Sep 17 00:00:00 2001
From: Nick Sellen <git@nicksellen.co.uk>
Date: Tue, 26 Nov 2019 18:19:28 +0100
Subject: [PATCH] Person to person sharing (#1799)

* Initial work to add person-to-person sharing

* A few sharing item UI refinements

* Initial new sharing form with multiple upload

* Add a grey box...

* Remove redundant check

* Rename sharing to offers

* Add a mock chat to offer detail UI

* Create mobile version of offer detail UI

* Tidy up multiple image editing

* A bit more polish on the offer UI

Some translations, icon, breadcrumb, etc...

* Snapshot update

* Add create offer breadcrumb title

* Rename a few offer related things for consistency

* Offer image carousel, multi upload, various bits

* Refine image upload/remove/re-position

* Add websocket listeners for offer changes

* Wireup offer conversation

* Basic features to allow to accept/archive offers

* Remove uneeded demo data

* Move selected offer data/logic to own store module

* Preserve offer filter in more places

The create/save filter preservation does not work actually
as we clear the store contents on route change.

* Remove status from offer form

Status change is now done via explicit actions/buttons

* Use address autocomplete (#1878)

* Use address autocomplete

As it used to be.
Also defaults place edit map to be group centre if available.

* Remove uneeded extra wrapped div

* Update setup for storyshots testing

"sync: false" seems to be the new way it goes and will be the default
in the future, see https://github.com/vuejs/vue-test-utils/issues/1137

The transition group stubs seem to be there by default now too, I think..
Anyway it works where it did no tbefore :)

Also see https://github.com/vuejs/vue-test-utils/issues/1163

* Add @types/jest - for editor support

See https://blog.jetbrains.com/webstorm/2018/10/testing-with-jest-in-webstorm/

* Increase test wait

Not really sure why this changed, but don't want to think about
it for now...

* Add text to translation file

* Use the spelling of the enemy

* Simplify template logic

* Ffix multicroppa

* Further refine offer editing, esp MultiCroppa

* Use gift as offers menu item

* Remove offer upload progress logging

* Nicer create offer button

* Clear offerDetail on route leave

* Add offer list loading indicator

* Add offer body loading indicator

* Add loading spinner when fetching offer for edit

* Correctly wire up offer form reset events

* Only show offer accept/archive buttons if active

* Handle updating offers after save/websocket better

* Cleaner mobile form view

* Only show carousel if >1 image

* Fix offer header when name is very long

* Fix offer detail image display when only 1

* Fix overflowing text on group offers page

* White background offer description

* Snapshot update

* Don't try and be fancy with updating users

* Fix style style

* Hide offers if group does not have the feature

* Check route features in after route hook

* Actually filter offers by current group

* Add offers covert function to convert createdAt

* Display offer information in latest messages

I did it a slightly different way, by adding related offers
into the latestMessages state...

* Keep related offers up to date via websocket

It's a bit overkeen actually as most users won't be in the
conversations for the offers, so we don't need to update the
related item... should really check we need it first

* Import default offer status from store

* Use current route query instead of getter

* Use + for new offer button

* Allow setting new_offer notification types

* Show offer status if not active

Although it's a bit ugly

* Change notification type spinner

* Add group.features to test mocks

* Wrap settings forms in FormContainer

* Rename to KFormContainer and move to base

* Add confirm step to accept/archive offer buttons

* Use photo icon for offer image placeholder

* Add offer as a "fake" empty result

* Filter offers by status and sort by createdAt desc

... entries can get added via websockets that might not fit
the filter, and might need reordering

* Refine group offer cards

- use QImg instead of lots of CSS
- use QItem inside for nicer layout

* Correct RouterLink casing

* Update test snapshots

* Please the pedantic linter

* Remove offer description helper

* Extract mapErrors to statusMixin

* Add accept/archive text into i18n

* Remove unneeded code

* Add offer filter status text to i18n

* Correct size for new offer button

* Remove one layer of div soup

* Put the group offer cards in proper links

* Remove commented out code

* Convert offer in websocket update

* Prefix functional getter with get

For getNotificationTypeStatus

* Preserve route query when clicking on offer conv

* Use icon service for latest messages offer item

* Move withoutKeys to utils

* Use invisible class instead of custom css

* Don't put const value in data

* Save disk space by compacting template

* Remove unneeded v-model

Was only used when I tried out quasar :rules

* Document MultiCroppa value prop a bit more

* Document the data that latestMesages/related has
---
 src/__snapshots__/storyshots.spec.js.snap     |  54 ++--
 src/authuser/pages/Settings.story.js          |   1 +
 src/authuser/pages/Settings.vue               |  21 +-
 src/base/components/KFormContainer.vue        |  13 +
 src/base/datastore.js                         |   2 +
 src/base/datastore/routerPlugin.js            |  16 +-
 src/base/icons/icons.json                     |   4 +-
 src/base/routes/main.js                       |  80 +++++-
 src/base/socket.js                            |  12 +
 src/group/components/GroupSettings.vue        |  41 ++-
 src/group/datastore/currentGroup.js           |  18 +-
 src/group/pages/Settings.vue                  |   1 +
 src/locales/locale-en.json                    |  25 +-
 src/messages/api/conversations.js             |   2 +
 src/messages/components/ChatConversation.vue  |   1 +
 .../components/LatestConversations.vue        |   6 +
 src/messages/components/LatestMessageItem.vue |  17 ++
 src/messages/datastore/conversations.js       |  12 +
 src/messages/datastore/latestMessages.js      |  39 ++-
 src/offers/api/offers.js                      |  91 +++++++
 src/offers/components/MultiCroppa.vue         | 247 ++++++++++++++++++
 src/offers/components/OfferDetail.vue         |  24 ++
 src/offers/components/OfferDetailBody.vue     | 170 ++++++++++++
 src/offers/components/OfferDetailHeader.vue   |  51 ++++
 src/offers/components/OfferForm.vue           | 156 +++++++++++
 src/offers/datastore/currentOffer.js          |  85 ++++++
 src/offers/datastore/index.js                 |   9 +
 src/offers/datastore/offers.js                | 142 ++++++++++
 src/offers/pages/GroupOffers.vue              | 153 +++++++++++
 src/offers/pages/OfferCreate.vue              |  16 ++
 src/offers/pages/OfferEdit.vue                |  18 ++
 src/sidenav/components/SidenavGroup.vue       |   1 +
 src/sidenav/components/SidenavGroupUI.vue     |  14 +
 src/topbar/datastore/breadcrumbs.js           |   8 +
 src/utils/mixins/editMixin.js                 |   4 +-
 src/utils/mixins/statusMixin.js               |  32 +++
 src/utils/utils.js                            |  10 +
 test/enrichedFactories.js                     |   1 +
 test/mockdata.js                              |   1 +
 39 files changed, 1550 insertions(+), 48 deletions(-)
 create mode 100644 src/base/components/KFormContainer.vue
 create mode 100644 src/offers/api/offers.js
 create mode 100644 src/offers/components/MultiCroppa.vue
 create mode 100644 src/offers/components/OfferDetail.vue
 create mode 100644 src/offers/components/OfferDetailBody.vue
 create mode 100644 src/offers/components/OfferDetailHeader.vue
 create mode 100644 src/offers/components/OfferForm.vue
 create mode 100644 src/offers/datastore/currentOffer.js
 create mode 100644 src/offers/datastore/index.js
 create mode 100644 src/offers/datastore/offers.js
 create mode 100644 src/offers/pages/GroupOffers.vue
 create mode 100644 src/offers/pages/OfferCreate.vue
 create mode 100644 src/offers/pages/OfferEdit.vue

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 44315b941..61323373a 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -338,7 +338,7 @@ exports[`Storyshots ChangePhoto with photo 1`] = `
 `;
 
 exports[`Storyshots ChatConversation closed 1`] = `
-<div>
+<div class="bg-white">
   <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
       <circle cx="15" cy="15" r="15">
         <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -511,7 +511,7 @@ exports[`Storyshots ChatConversation closed 1`] = `
 `;
 
 exports[`Storyshots ChatConversation default 1`] = `
-<div>
+<div class="bg-white">
   <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
       <circle cx="15" cy="15" r="15">
         <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -673,7 +673,7 @@ exports[`Storyshots ChatConversation default 1`] = `
 `;
 
 exports[`Storyshots ChatConversation fetching past 1`] = `
-<div>
+<div class="bg-white">
   <div class="full-width text-center generic-padding"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
       <circle cx="15" cy="15" r="15">
         <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -835,7 +835,7 @@ exports[`Storyshots ChatConversation fetching past 1`] = `
 `;
 
 exports[`Storyshots ChatConversation message groups 1`] = `
-<div>
+<div class="bg-white">
   <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
       <circle cx="15" cy="15" r="15">
         <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -1159,7 +1159,7 @@ exports[`Storyshots ChatConversation message groups 1`] = `
 `;
 
 exports[`Storyshots ChatConversation not participant 1`] = `
-<div>
+<div class="bg-white">
   <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
       <circle cx="15" cy="15" r="15">
         <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -1321,7 +1321,7 @@ exports[`Storyshots ChatConversation not participant 1`] = `
 `;
 
 exports[`Storyshots ChatConversation thread 1`] = `
-<div>
+<div class="bg-white">
   <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
       <circle cx="15" cy="15" r="15">
         <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -2058,7 +2058,7 @@ exports[`Storyshots Detail application 1`] = `
           <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
         </circle>
       </svg></div>
-    <div>
+    <div class="bg-white">
       <div class="q-expansion-item q-item-type bg-grey-2 q-expansion-item--expanded q-expansion-item--standard">
         <div class="q-expansion-item__container relative-position">
           <div tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable text-bold">
@@ -2314,7 +2314,7 @@ exports[`Storyshots Detail pickup 1`] = `
           <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
         </circle>
       </svg></div>
-    <div>
+    <div class="bg-white">
       <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
           <circle cx="15" cy="15" r="15">
             <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -2543,7 +2543,7 @@ exports[`Storyshots Detail private 1`] = `
           <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
         </circle>
       </svg></div>
-    <div>
+    <div class="bg-white">
       <div class="full-width text-center generic-padding" style="display:none;"><svg fill="currentColor" width="40" height="40" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" class="q-spinner">
           <circle cx="15" cy="15" r="15">
             <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
@@ -4658,7 +4658,7 @@ exports[`Storyshots GroupPreviewUI without public description 1`] = `
 `;
 
 exports[`Storyshots GroupSettings show 1`] = `
-<div id="notifications" class="q-card no-shadow grey-border">
+<div id="notifications" class="q-card bg-white q-mb-lg no-shadow grey-border">
   <div class="q-card__section">
     <div class="text-h6">
       Notifications by group
@@ -4702,6 +4702,9 @@ exports[`Storyshots GroupSettings show 1`] = `
             Keep up to date with what's been happening in the group.
           </div>
         </div>
+        <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+            <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+          </svg></div>
       </label><label tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
         <div tabindex="-1" class="q-focus-helper"></div>
         <div class="q-item__section column q-item__section--side justify-center">
@@ -4723,6 +4726,9 @@ exports[`Storyshots GroupSettings show 1`] = `
             Reminds you of your pickups, and tells you about empty or not-full pickups of your favorite places in the next day
           </div>
         </div>
+        <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+            <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+          </svg></div>
       </label><label tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
         <div tabindex="-1" class="q-focus-helper"></div>
         <div class="q-item__section column q-item__section--side justify-center">
@@ -4744,6 +4750,9 @@ exports[`Storyshots GroupSettings show 1`] = `
             Tells you when somebody wants to join your group
           </div>
         </div>
+        <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+            <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+          </svg></div>
       </label><label tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
         <div tabindex="-1" class="q-focus-helper"></div>
         <div class="q-item__section column q-item__section--side justify-center">
@@ -4765,6 +4774,9 @@ exports[`Storyshots GroupSettings show 1`] = `
             Tells you when a new conflict resolution process has been started in your group
           </div>
         </div>
+        <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+            <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+          </svg></div>
       </label>
       <div class="q-pt-md q-pl-md"><button tabindex="0" type="button" class="q-btn inline q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable">
           <div tabindex="-1" class="q-focus-helper"></div>
@@ -9948,7 +9960,7 @@ exports[`Storyshots ProfilePicture without user 1`] = `
 
 exports[`Storyshots Settings Page Default 1`] = `
 <div>
-  <div class="q-card no-shadow grey-border">
+  <div class="q-card bg-white q-mb-lg no-shadow grey-border">
     <div class="q-card__section">
       <div class="text-h6">
         Profile
@@ -10076,7 +10088,7 @@ exports[`Storyshots Settings Page Default 1`] = `
       </div>
     </div>
   </div>
-  <div class="q-card no-shadow grey-border">
+  <div class="q-card bg-white q-mb-lg no-shadow grey-border">
     <div class="q-card__section">
       <div class="text-h6">
         Switch language
@@ -10092,7 +10104,7 @@ exports[`Storyshots Settings Page Default 1`] = `
         </button></div>
     </div>
   </div>
-  <div class="q-card no-shadow grey-border">
+  <div class="q-card bg-white q-mb-lg no-shadow grey-border">
     <div class="q-card__section">
       <div class="text-h6">
         Account
@@ -10182,7 +10194,7 @@ exports[`Storyshots Settings Page Default 1`] = `
       </div>
     </div>
   </div>
-  <div id="notifications" class="q-card no-shadow grey-border">
+  <div id="notifications" class="q-card bg-white q-mb-lg no-shadow grey-border">
     <div class="q-card__section">
       <div class="text-h6">
         Notifications by group
@@ -10226,6 +10238,9 @@ exports[`Storyshots Settings Page Default 1`] = `
               Keep up to date with what's been happening in the group.
             </div>
           </div>
+          <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+              <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+            </svg></div>
         </label><label tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
           <div tabindex="-1" class="q-focus-helper"></div>
           <div class="q-item__section column q-item__section--side justify-center">
@@ -10247,6 +10262,9 @@ exports[`Storyshots Settings Page Default 1`] = `
               Reminds you of your pickups, and tells you about empty or not-full pickups of your favorite places in the next day
             </div>
           </div>
+          <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+              <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+            </svg></div>
         </label><label tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
           <div tabindex="-1" class="q-focus-helper"></div>
           <div class="q-item__section column q-item__section--side justify-center">
@@ -10268,6 +10286,9 @@ exports[`Storyshots Settings Page Default 1`] = `
               Tells you when somebody wants to join your group
             </div>
           </div>
+          <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+              <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+            </svg></div>
         </label><label tabindex="0" class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
           <div tabindex="-1" class="q-focus-helper"></div>
           <div class="q-item__section column q-item__section--side justify-center">
@@ -10289,6 +10310,9 @@ exports[`Storyshots Settings Page Default 1`] = `
               Tells you when a new conflict resolution process has been started in your group
             </div>
           </div>
+          <div class="q-item__section column q-item__section--side justify-center"><svg width="18px" height="18px" viewBox="25 25 50 50" class="q-spinner q-spinner-mat invisible">
+              <circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" class="path"></circle>
+            </svg></div>
         </label>
         <div class="q-pt-md q-pl-md"><button tabindex="0" type="button" class="q-btn inline q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable">
             <div tabindex="-1" class="q-focus-helper"></div>
@@ -10305,7 +10329,7 @@ exports[`Storyshots Settings Page Default 1`] = `
       </div>
     </div>
   </div>
-  <div class="q-card no-shadow grey-border">
+  <div class="q-card bg-white q-mb-lg no-shadow grey-border">
     <div class="q-card__section">
       <div class="text-h6">
         Push notifications
diff --git a/src/authuser/pages/Settings.story.js b/src/authuser/pages/Settings.story.js
index 5b48ac743..cb2db2f34 100644
--- a/src/authuser/pages/Settings.story.js
+++ b/src/authuser/pages/Settings.story.js
@@ -35,6 +35,7 @@ const datastore = createDatastore({
   currentGroup: {
     getters: {
       value: () => groupsMock[0],
+      getNotificationTypeStatus: () => () => ({}),
     },
   },
   groups: {
diff --git a/src/authuser/pages/Settings.vue b/src/authuser/pages/Settings.vue
index ce971ed2c..111008898 100644
--- a/src/authuser/pages/Settings.vue
+++ b/src/authuser/pages/Settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="user">
-    <QCard class="no-shadow grey-border">
+    <KFormContainer>
       <QCardSection>
         <div class="text-h6">
           {{ $t('USERDATA.PROFILE_TITLE') }}
@@ -22,8 +22,8 @@
           @save="saveUser"
         />
       </QCardSection>
-    </QCard>
-    <QCard class="no-shadow grey-border">
+    </KFormContainer>
+    <KFormContainer>
       <QCardSection>
         <div class="text-h6">
           {{ $t('LANGUAGECHOOSER.SWITCH') }}
@@ -34,8 +34,8 @@
           <LocaleSelect />
         </div>
       </QCardSection>
-    </QCard>
-    <QCard class="no-shadow grey-border">
+    </KFormContainer>
+    <KFormContainer>
       <QCardSection>
         <div class="text-h6">
           {{ $t('USERDATA.ACCOUNT') }}
@@ -59,11 +59,10 @@
           />
         </QCardActions>
       </QCardSection>
-    </QCard>
+    </KFormContainer>
     <GroupSettings />
-    <QCard
+    <KFormContainer
       v-if="!$q.platform.is.cordova"
-      class="no-shadow grey-border"
     >
       <QCardSection>
         <div class="text-h6">
@@ -78,13 +77,12 @@
           @disable="disablePush"
         />
       </QCardSection>
-    </QCard>
+    </KFormContainer>
   </div>
 </template>
 
 <script>
 import {
-  QCard,
   QCardSection,
   QSeparator,
   QCardActions,
@@ -100,11 +98,11 @@ import RequestDeleteAccount from '@/authuser/components/Settings/RequestDeleteAc
 import Push from '@/authuser/components/Settings/Push'
 import LocaleSelect from '@/utils/components/LocaleSelect'
 import GroupSettings from '@/group/pages/Settings'
+import KFormContainer from '@/base/components/KFormContainer'
 
 export default {
   name: 'Settings',
   components: {
-    QCard,
     QCardSection,
     QSeparator,
     QCardActions,
@@ -116,6 +114,7 @@ export default {
     Push,
     LocaleSelect,
     GroupSettings,
+    KFormContainer,
   },
   computed: {
     ...mapGetters({
diff --git a/src/base/components/KFormContainer.vue b/src/base/components/KFormContainer.vue
new file mode 100644
index 000000000..ec6deb561
--- /dev/null
+++ b/src/base/components/KFormContainer.vue
@@ -0,0 +1,13 @@
+<script>
+import { Platform, QCard } from 'quasar'
+const Component = Platform.is.mobile ? 'div' : QCard
+export default {
+  functional: true,
+  render (h, { data, children }) {
+    if (data.class) {
+      throw new Error('KFormContainer component does not support class attribute')
+    }
+    return h(Component, { ...data, class: ['bg-white', 'q-mb-lg', 'no-shadow', 'grey-border'] }, children)
+  },
+}
+</script>
diff --git a/src/base/datastore.js b/src/base/datastore.js
index a80989d51..69ff8db19 100644
--- a/src/base/datastore.js
+++ b/src/base/datastore.js
@@ -20,6 +20,7 @@ import pickups from '@/pickups/datastore'
 import sidenav from '@/sidenav/datastore'
 import places from '@/places/datastore'
 import subscriptions from '@/subscriptions/datastore'
+import offers from '@/offers/datastore'
 import topbar from '@/topbar/datastore'
 import unsubscribe from '@/unsubscribe/datastore'
 import users from '@/users/datastore'
@@ -45,6 +46,7 @@ const appModules = [
   sidenav,
   places,
   subscriptions,
+  offers,
   topbar,
   unsubscribe,
   users,
diff --git a/src/base/datastore/routerPlugin.js b/src/base/datastore/routerPlugin.js
index f45e3c408..2e11e2612 100644
--- a/src/base/datastore/routerPlugin.js
+++ b/src/base/datastore/routerPlugin.js
@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/browser'
 export default datastore => {
   const isLoggedIn = () => datastore.getters['auth/isLoggedIn']
   const getUserGroupId = () => isLoggedIn() && datastore.getters['auth/user'].currentGroup
+  const getFeatures = () => datastore.getters['currentGroup/features']
 
   router.beforeEach(async (to, from, nextFn) => {
     datastore.commit('routeMeta/setNext', to)
@@ -25,7 +26,6 @@ export default datastore => {
     // redirect homescreen correctly
     else if (to.path === '/') {
       const groupId = getUserGroupId()
-
       if (groupId) {
         next = { name: 'group', params: { groupId } }
       }
@@ -73,6 +73,20 @@ export default datastore => {
     catch (err) {
       Sentry.captureException(err)
     }
+
+    // Check if our route requires any features we don't have
+    // It would be nice to do this _before_ we visit the route, but we don't have the features
+    // available at that point
+    const features = getFeatures()
+    if (to.matched.some(m => m.meta.requireFeature && !features.includes(m.meta.requireFeature))) {
+      const groupId = datastore.getters['currentGroup/id']
+      if (groupId) {
+        await router.push({ name: 'group', params: { groupId } })
+      }
+      else {
+        await router.push({ path: '/' })
+      }
+    }
   })
 
   datastore.watch((state, getters) => [
diff --git a/src/base/icons/icons.json b/src/base/icons/icons.json
index b95ff24ab..75256e587 100644
--- a/src/base/icons/icons.json
+++ b/src/base/icons/icons.json
@@ -3,5 +3,7 @@
   "pickup_fw": "fas fa-fw fa-shopping-basket",
   "feedback": "fas fa-balance-scale",
   "place": "fas fa-shopping-cart",
-  "place_fw": "fas fa-fw fa-shopping-cart"
+  "place_fw": "fas fa-fw fa-shopping-cart",
+  "offer": "fas fa-gift",
+  "offer_fw": "fas fa-fw fa-gift"
 }
diff --git a/src/base/routes/main.js b/src/base/routes/main.js
index 089e90750..8f122ff49 100644
--- a/src/base/routes/main.js
+++ b/src/base/routes/main.js
@@ -1,7 +1,11 @@
 import { Platform } from 'quasar'
-
 const GroupWall = () => import('@/group/pages/Wall')
 const GroupPickups = () => import('@/pickups/pages/GroupPickups')
+const GroupOffers = () => import('@/offers/pages/GroupOffers')
+const OfferCreate = () => import('@/offers/pages/OfferCreate')
+const OfferEdit = () => import('@/offers/pages/OfferEdit')
+const OfferDetailHeaderIfMobile = () => Platform.is.mobile ? import('@/offers/components/OfferDetailHeader') : Promise.resolve({ render: () => null })
+const OfferDetailOrBodyIfMobile = () => Platform.is.mobile ? import('@/offers/components/OfferDetailBody') : import('@/offers/components/OfferDetail')
 const GroupFeedback = () => import('@/feedback/pages/GroupFeedback')
 const Messages = () => import('@/messages/pages/Messages')
 const LatestConversations = () => import('@/messages/components/LatestConversations')
@@ -207,6 +211,80 @@ export default [
         },
         component: GroupPickups,
       },
+      {
+        name: 'offerCreate',
+        path: 'offer/create',
+        meta: {
+          requireLoggedIn: true,
+          requireFeature: 'offers',
+          breadcrumbs: [
+            { translation: 'GROUP.OFFERS', route: { name: 'groupOffers' } },
+            { translation: 'OFFER.CREATE_TITLE', route: { name: 'offerCreate' } },
+          ],
+        },
+        components: {
+          default: OfferCreate,
+        },
+      },
+      {
+        name: 'offerEdit',
+        path: 'offers/:offerId/edit',
+        meta: {
+          requireLoggedIn: true,
+          requireFeature: 'offers',
+          breadcrumbs: [
+            { translation: 'GROUP.OFFERS', route: { name: 'groupOffers' } },
+            { type: 'activeOffer' },
+          ],
+          beforeEnter: 'currentOffer/select',
+          afterLeave: 'currentOffer/clear',
+        },
+        components: {
+          default: OfferEdit,
+        },
+      },
+      {
+        name: 'groupOffers',
+        path: 'offers',
+        meta: {
+          requireLoggedIn: true,
+          requireFeature: 'offers',
+          breadcrumbs: [
+            { translation: 'GROUP.OFFERS', route: { name: 'groupOffers' } },
+          ],
+          afterLeave: 'offers/clear',
+        },
+        components: {
+          default: GroupOffers,
+          detail: { render: h => h('router-view') },
+          subheader: {
+            render: h => h('router-view', {
+              props: {
+                name: 'subheader',
+              },
+            }),
+          },
+        },
+        children: [
+          {
+            name: 'offerDetail',
+            path: ':offerId',
+            meta: {
+              requireLoggedIn: true,
+              breadcrumbs: [
+                { type: 'activeOffer' },
+              ],
+              beforeEnter: 'currentOffer/select',
+              afterLeave: 'currentOffer/clear',
+              isDetail: true,
+            },
+            components: {
+              default: OfferDetailOrBodyIfMobile,
+              subheader: OfferDetailHeaderIfMobile,
+            },
+          },
+        ],
+      },
       {
         name: 'groupFeedback',
         path: 'feedback',
diff --git a/src/base/socket.js b/src/base/socket.js
index c822a416e..83e15b523 100644
--- a/src/base/socket.js
+++ b/src/base/socket.js
@@ -16,6 +16,7 @@ import { convert as convertFeedback } from '@/feedback/api/feedback'
 import { convert as convertHistory } from '@/history/api/history'
 import { convert as convertInvitation } from '@/invitations/api/invitations'
 import { convert as convertIssue } from '@/issues/api/issues'
+import { convert as convertOffer } from '@/offers/api/offers'
 import { convert as convertGroup } from '@/group/api/groups'
 import { convert as convertNotification, convertMeta as convertNotificationMeta } from '@/notifications/api/notifications'
 
@@ -221,6 +222,17 @@ function receiveMessage ({ topic, payload }) {
   else if (topic === 'pickups:series_deleted') {
     datastore.commit('pickupSeries/delete', convertSeries(camelizeKeys(payload)).id)
   }
+  else if (topic === 'offers:offer') {
+    const offer = convertOffer(camelizeKeys(payload))
+    datastore.commit('offers/update', [offer])
+    datastore.commit('latestMessages/updateRelated', { type: 'offer', items: [offer] })
+    datastore.commit('currentOffer/update', offer)
+  }
+  else if (topic === 'offers:offer_deleted') {
+    datastore.commit('offers/delete', payload.id)
+    datastore.commit('latestMessages/deleteRelated', { type: 'offer', ids: [payload.id] })
+    datastore.commit('currentOffer/delete', payload.id)
+  }
   else if (topic === 'feedback:feedback') {
     datastore.dispatch('feedback/updateOne', convertFeedback(camelizeKeys(payload)))
   }
diff --git a/src/group/components/GroupSettings.vue b/src/group/components/GroupSettings.vue
index f66ad5567..e986b5842 100644
--- a/src/group/components/GroupSettings.vue
+++ b/src/group/components/GroupSettings.vue
@@ -1,8 +1,7 @@
 <template>
-  <QCard
+  <KFormContainer
     v-if="group"
     id="notifications"
-    class="no-shadow grey-border"
   >
     <QCardSection>
       <div class="text-h6">
@@ -39,6 +38,7 @@
           <QItemSection side>
             <QCheckbox
               :value="notificationIsEnabled(type)"
+              :disable="notificationIsPending(type)"
               @input="change(type, arguments[0])"
             />
           </QItemSection>
@@ -50,6 +50,12 @@
               {{ $t('GROUP.NOTIFICATION_TYPES.' + type + '.DESCRIPTION') }}
             </QItemLabel>
           </QItemSection>
+          <QItemSection side>
+            <QSpinner
+              :class="{ invisible: !notificationIsPending(type) }"
+              size="xs"
+            />
+          </QItemSection>
         </QItem>
         <div
           class="q-pt-md q-pl-md"
@@ -75,12 +81,11 @@
         </div>
       </QList>
     </QCardSection>
-  </QCard>
+  </KFormContainer>
 </template>
 
 <script>
 import {
-  QCard,
   QCardSection,
   QCheckbox,
   QList,
@@ -88,14 +93,15 @@ import {
   QItemSection,
   QItemLabel,
   QBtn,
+  QSpinner,
 } from 'quasar'
 import SwitchGroupButton from '@/users/components/SwitchGroupButton'
 import statusMixin from '@/utils/mixins/statusMixin'
+import KFormContainer from '@/base/components/KFormContainer'
 
 export default {
   name: 'GroupSettings',
   components: {
-    QCard,
     QCardSection,
     QCheckbox,
     QList,
@@ -103,6 +109,8 @@ export default {
     QItemSection,
     QItemLabel,
     QBtn,
+    QSpinner,
+    KFormContainer,
     SwitchGroupButton,
   },
   mixins: [statusMixin],
@@ -115,11 +123,22 @@ export default {
       type: Array,
       default: null,
     },
+    getNotificationTypeStatus: {
+      type: Function,
+      default: () => () => ({}),
+    },
   },
-  data () {
-    return {
-      availableNotificationTypes: ['weekly_summary', 'daily_pickup_notification', 'new_application', 'conflict_resolution'],
-    }
+  computed: {
+    availableNotificationTypes () {
+      if (!this.group) return []
+      return [
+        'weekly_summary',
+        'daily_pickup_notification',
+        'new_application',
+        ...(this.group.features.includes('offers') ? ['new_offer'] : []),
+        'conflict_resolution',
+      ]
+    },
   },
   watch: {
     group (val, oldval) {
@@ -136,6 +155,10 @@ export default {
       if (!this.group) return
       return this.group.notificationTypes.includes(type)
     },
+    notificationIsPending (type) {
+      const status = this.getNotificationTypeStatus(type)
+      return status && status.pending
+    },
   },
 }
 </script>
diff --git a/src/group/datastore/currentGroup.js b/src/group/datastore/currentGroup.js
index 3ddcf765f..5146ce1c2 100644
--- a/src/group/datastore/currentGroup.js
+++ b/src/group/datastore/currentGroup.js
@@ -63,9 +63,11 @@ export default {
     // for current user:
     membership: (state, getters, rootState, rootGetters) => getters.memberships[rootGetters['auth/userId']],
     roles: (state, getters) => getters.membership ? getters.value.membership.roles : [],
+    features: state => state.current && state.current.features ? state.current.features : [],
     isEditor: (state, getters) => getters.roles.includes('editor'),
     isBikeKitchen: (state, getters) => Boolean(getters.value && getters.value.isBikeKitchen),
     isGeneralPurpose: (state, getters) => Boolean(getters.value && getters.value.isGeneralPurpose),
+    getNotificationTypeStatus: (state, getters) => notificationType => getters['meta/status']('changeNotificationType', notificationType),
   },
   actions: {
     ...withMeta({
@@ -91,6 +93,14 @@ export default {
         if (getters.id) await groups.throttledMarkUserActive(getters.id)
       },
 
+      async trustUser ({ getters }, userId) {
+        if (!getters.id) return
+        await groups.trustUser(getters.id, userId)
+      },
+
+    }),
+
+    ...withMeta({
       async changeNotificationType ({ dispatch, getters }, { notificationType, enabled }) {
         if (enabled) {
           await groups.addNotificationType(getters.id, notificationType)
@@ -99,12 +109,8 @@ export default {
           await groups.removeNotificationType(getters.id, notificationType)
         }
       },
-
-      async trustUser ({ getters }, userId) {
-        if (!getters.id) return
-        await groups.trustUser(getters.id, userId)
-      },
-
+    }, {
+      findId: ({ notificationType }) => notificationType,
     }),
 
     ...withPrefixedIdMeta('agreements/', {
diff --git a/src/group/pages/Settings.vue b/src/group/pages/Settings.vue
index e9cca557d..104f52399 100644
--- a/src/group/pages/Settings.vue
+++ b/src/group/pages/Settings.vue
@@ -7,6 +7,7 @@ export default connect({
     group: 'currentGroup/value',
     groups: 'groups/mine',
     status: 'unsubscribe/allEmailsPerGroupStatus',
+    getNotificationTypeStatus: 'currentGroup/getNotificationTypeStatus',
   },
   actionsToEvents: {
     changeNotificationType: 'currentGroup/changeNotificationType',
diff --git a/src/locales/locale-en.json b/src/locales/locale-en.json
index 38cf5b7fd..f519e947b 100644
--- a/src/locales/locale-en.json
+++ b/src/locales/locale-en.json
@@ -102,7 +102,8 @@
     "UNIQUE": "Name already exists, please choose another.",
     "REQUIRED": "This field is required.",
     "VALID_EMAIL": "Enter a valid e-mail address.",
-    "VALID_TIMEZONE": "Enter a valid timezone."
+    "VALID_TIMEZONE": "Enter a valid timezone.",
+    "IMAGE_REQUIRED": "You must add an image"
   },
   "GROUP": {
     "WALL": "Wall",
@@ -125,6 +126,7 @@
     "APPLICATION_QUESTIONS": "Questions for people who want to join this group",
     "PICKUPS": "Pickups",
     "MESSAGES": "Messages",
+    "OFFERS": "Offers",
     "PICKUP": "Pickup",
     "MEMBERS": "Members",
     "JOINED": "joined {relativeDate}",
@@ -166,6 +168,10 @@
         "NAME": "New applications",
         "DESCRIPTION": "Tells you when somebody wants to join your group"
       },
+      "new_offer": {
+        "NAME": "New offers",
+        "DESCRIPTION": "Tells you when somebody creates a new offer"
+      },
       "conflict_resolution": {
         "NAME": "New conflict resolution processes",
         "DESCRIPTION": "Tells you when a new conflict resolution process has been started in your group"
@@ -653,6 +659,23 @@
     },
     "NO_ONGOING": "No ongoing issues."
   },
+  "OFFER": {
+    "CREATE_TITLE": "Create offer",
+    "NAME": "Name",
+    "NAME_HELPER": "Short name for the item you are offering",
+    "DESCRIPTION": "Description",
+    "MARK_AS_ACCEPTED": "Mark as accepted",
+    "MARK_AS_ACCEPTED_DESCRIPTION": "Mark this offer as accepted to show to others that it is not available any more.",
+    "MARK_AS_ARCHIVED": "Archive",
+    "MARK_AS_ARCHIVED_DESCRIPTION": "Mark this is offer as archived to remove it from the available listings.",
+    "FILTER": {
+      "STATUS": {
+        "ACTIVE": "Available",
+        "ACCEPTED": "My accepted offers",
+        "ARCHIVED": "My archived offers"
+      }
+    }
+  },
   "ADDRESS_PICKER": {
     "SET_AS": "Set address as",
     "KEEP_EXISTING_LOCATION": "keep existing location on map",
diff --git a/src/messages/api/conversations.js b/src/messages/api/conversations.js
index 8e879a7e6..d7326ddd9 100644
--- a/src/messages/api/conversations.js
+++ b/src/messages/api/conversations.js
@@ -3,6 +3,7 @@ import { convert as convertMessage } from './messages'
 import { convert as convertPickup } from '@/pickups/api/pickups'
 import { convert as convertApplication } from '@/applications/api/applications'
 import { convert as convertIssue } from '@/issues/api/issues'
+import { convert as convertOffer } from '@/offers/api/offers'
 
 export default {
   async get (id) {
@@ -48,6 +49,7 @@ function convertListResults (results) {
     pickups: convertPickup(results.pickups),
     applications: convertApplication(results.applications),
     issues: convertIssue(results.issues),
+    offers: convertOffer(results.offers),
     usersInfo: results.usersInfo,
     meta: convertMeta(results.meta),
   }
diff --git a/src/messages/components/ChatConversation.vue b/src/messages/components/ChatConversation.vue
index c4f82dce0..99f642b57 100644
--- a/src/messages/components/ChatConversation.vue
+++ b/src/messages/components/ChatConversation.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     ref="scroll"
+    class="bg-white"
     :class="inline && 'absolute-full scroll'"
   >
     <slot name="before-chat-messages" />
diff --git a/src/messages/components/LatestConversations.vue b/src/messages/components/LatestConversations.vue
index 15113e9cb..33193e017 100644
--- a/src/messages/components/LatestConversations.vue
+++ b/src/messages/components/LatestConversations.vue
@@ -20,6 +20,7 @@
           :place="conv.type === 'place' ? conv.target : null"
           :application="conv.type === 'application' ? conv.target : null"
           :issue="conv.type === 'issue' ? conv.target : null"
+          :offer="conv.type === 'offer' ? conv.target : null"
           :message="conv.latestMessage"
           :unread-count="conv.unreadMessageCount"
           :muted="conv.muted"
@@ -115,6 +116,11 @@ export default {
         case 'private': return this.openForUser(target)
         case 'application': return this.openForApplication(target)
         case 'issue': return this.$router.push({ name: 'issueChat', params: { groupId: target.group.id, issueId: target.id } }).catch(() => {})
+        case 'offer': return this.$router.push({
+          name: 'offerDetail',
+          params: { groupId: target.group.id, offerId: target.id },
+          query: this.$route.query,
+        }).catch(() => {})
       }
     },
     isSelected (conv) {
diff --git a/src/messages/components/LatestMessageItem.vue b/src/messages/components/LatestMessageItem.vue
index 398d6225c..7965c69d0 100644
--- a/src/messages/components/LatestMessageItem.vue
+++ b/src/messages/components/LatestMessageItem.vue
@@ -78,6 +78,16 @@
               {{ issue.affectedUser && issue.affectedUser.displayName }}
             </div>
           </template>
+          <template v-else-if="isOffer">
+            <QIcon
+              :name="$icon('offer')"
+              class="q-mr-sm"
+              :title="$t('OFFER.NAME')"
+            />
+            <div class="ellipsis">
+              {{ offer.name }}
+            </div>
+          </template>
           <QIcon
             v-if="muted"
             size="12px"
@@ -196,6 +206,10 @@ export default {
       type: Object,
       default: null,
     },
+    offer: {
+      type: Object,
+      default: null,
+    },
     message: {
       type: Object,
       default: null,
@@ -239,6 +253,9 @@ export default {
     isIssue () {
       return Boolean(this.issue)
     },
+    isOffer () {
+      return Boolean(this.offer)
+    },
     applicationTitle () {
       if (!this.isApplication || !this.application.group) return ''
       return this.application.user.isCurrentUser
diff --git a/src/messages/datastore/conversations.js b/src/messages/datastore/conversations.js
index 3ab350cc1..3818276b3 100644
--- a/src/messages/datastore/conversations.js
+++ b/src/messages/datastore/conversations.js
@@ -9,6 +9,7 @@ import groupsAPI from '@/group/api/groups'
 import issuesAPI from '@/issues/api/issues'
 import placesAPI from '@/places/api/places'
 import applicationsAPI from '@/applications/api/applications'
+import offersAPI from '@/offers/api/offers'
 import i18n from '@/base/i18n'
 import { createMetaModule, withMeta, withPrefixedIdMeta, metaStatusesWithId } from '@/utils/datastore/helpers'
 
@@ -100,6 +101,7 @@ export default {
     getForPickup: (state, getters) => pickupId => getters.getForType('pickup', pickupId),
     getForApplication: (state, getters) => applicationId => getters.getForType('application', applicationId),
     getForIssue: (state, getters) => issueId => getters.getForType('issue', issueId),
+    getForOffer: (state, getters) => offerId => getters.getForType('offer', offerId),
     getForUser: (state, getters) => userId => {
       const { id } = Object.values(state.entries).find(({ type, participants }) => type === 'private' && participants.includes(userId)) || {}
       if (!id) return
@@ -189,6 +191,7 @@ export default {
         case 'pickup': return rootGetters['pickups/get'](targetId)
         case 'application': return rootGetters['applications/get'](targetId)
         case 'issue': return rootGetters['issues/get'](targetId)
+        case 'offer': return rootGetters['latestMessages/getRelated']('offer', targetId)
         case 'private': return participants.find(u => !u.isCurrentUser)
       }
     },
@@ -351,6 +354,15 @@ export default {
       dispatch('fetch', conversation.id)
     },
 
+    async fetchForOffer ({ commit, getters, dispatch }, { offerId }) {
+      let conversation = getters.getForOffer(offerId)
+      if (!conversation) {
+        conversation = await offersAPI.conversation(offerId)
+        commit('setConversation', conversation)
+      }
+      dispatch('fetch', conversation.id)
+    },
+
     clearForIssue ({ getters, commit }, { issueId }) {
       const { id: conversationId } = getters.getForIssue(issueId) || {}
       if (conversationId) commit('clearMessages', conversationId)
diff --git a/src/messages/datastore/latestMessages.js b/src/messages/datastore/latestMessages.js
index 66b45a53e..8cf6c6462 100644
--- a/src/messages/datastore/latestMessages.js
+++ b/src/messages/datastore/latestMessages.js
@@ -10,6 +10,7 @@ function initialState () {
     conversationMessages: {},
     threads: {},
     threadMessages: {},
+    related: {}, // <type> -> { <id> -> <object> }, e.g. { offer: { 1: { name: 'a nice offer' } }
     fetchInitialDone: false,
     entryMeta: {
       conversationsMarkedAt: null,
@@ -88,6 +89,15 @@ export default {
     canFetchPastThreads: (state, getters) => getters['threadsPagination/canFetchNext'],
     fetchingPastThreads: (state, getters) => getters['meta/status']('fetchPastThreads').pending,
     fetchInitialPending: (state, getters) => getters['meta/status']('fetchInitial').pending,
+    getRelated: (state, getters, rootState, rootGetters) => (type, id) => {
+      const related = state.related[type] && state.related[type][id]
+      if (!related) return
+      switch (type) {
+        case 'offer': return rootGetters['offers/enrich'](related)
+        default:
+          return related
+      }
+    },
   },
   actions: {
     ...withMeta({
@@ -127,7 +137,16 @@ export default {
       dispatch('updateConversationsAndRelated', conversationsAndRelated)
       dispatch('updateThreadsAndRelated', threadsAndRelated)
     },
-    updateConversationsAndRelated ({ commit, dispatch, rootState }, { conversations, messages, pickups, applications, issues, usersInfo, meta }) {
+    updateConversationsAndRelated ({ commit, dispatch, rootState }, {
+      conversations,
+      messages,
+      pickups,
+      applications,
+      issues,
+      offers,
+      usersInfo,
+      meta,
+    }) {
       if (conversations) {
         commit('updateConversations', conversations)
 
@@ -148,6 +167,9 @@ export default {
       if (issues) {
         commit('issues/update', issues, { root: true })
       }
+      if (offers) {
+        commit('updateRelated', { type: 'offer', items: offers })
+      }
       if (usersInfo) {
         // contains only limited user info, so only update if we don't have the user already
         const users = usersInfo.filter(user => !rootState.users.entries[user.id])
@@ -222,6 +244,21 @@ export default {
         }
       }
     },
+    updateRelated (state, { type, items }) {
+      if (!state.related[type]) Vue.set(state.related, type, {})
+      for (const item of items) {
+        Vue.set(state.related[type], item.id, item)
+      }
+    },
+    deleteRelated (state, { type, ids }) {
+      if (!state.related[type]) return
+      for (const id of ids) {
+        delete state.related[type][id]
+      }
+      if (Object.keys(state.related[type]).length === 0) {
+        delete state.related[type]
+      }
+    },
     setThreadsCursor (state, cursor) {
       state.threadsCursor = cursor
     },
diff --git a/src/offers/api/offers.js b/src/offers/api/offers.js
new file mode 100644
index 000000000..da5c2d59c
--- /dev/null
+++ b/src/offers/api/offers.js
@@ -0,0 +1,91 @@
+import axios, { parseCursor } from '@/base/api/axios'
+import { convert as convertConversation } from '@/messages/api/conversations'
+import { withoutKeys } from '@/utils/utils'
+
+const MIME_TYPE = 'image/jpeg'
+const EXTENSION = '.jpg'
+
+async function toFormData (sourceOffer) {
+  const data = new FormData()
+  const offer = { ...sourceOffer } // (shallow) clone
+
+  if (offer.images) {
+    const blobs = {}
+    for (const idx of Object.keys(offer.images)) {
+      const image = offer.images[idx]
+      if (image.toBlob) {
+        const blob = await image.toBlob(MIME_TYPE)
+        if (!blob) throw new Error('failed to make a blob for image')
+        blobs[`images.${idx}.image`] = blob
+      }
+      else if (image._new) {
+        throw new Error('new image did not have a toBlob method')
+      }
+    }
+    for (const key of Object.keys(blobs)) {
+      data.append(key, blobs[key], `${key}${EXTENSION}`)
+    }
+    // we need to leave our original images intact, but only send the required properties to the server
+    offer.images = offer.images.map(withoutKeys('toBlob', 'imageUrls'))
+  }
+
+  data.append(
+    'document',
+    new Blob(
+      [JSON.stringify(offer)],
+      { type: 'application/json' },
+    ),
+  )
+
+  return data
+}
+
+export default {
+
+  async create (offer) {
+    return convert((await axios.post('/api/offers/', await toFormData(offer))).data)
+  },
+
+  async get (offerId) {
+    return convert((await axios.get(`/api/offers/${offerId}/`)).data)
+  },
+
+  async list (filter) {
+    const params = filter || {}
+    const response = (await axios.get('/api/offers/', { params })).data
+    return {
+      ...response,
+      next: parseCursor(response.next),
+      results: convert(response.results),
+    }
+  },
+
+  async save (offer) {
+    return convert((await axios.patch(`/api/offers/${offer.id}/`, await toFormData(offer))).data)
+  },
+
+  async accept (offerId) {
+    return convert((await axios.post(`/api/offers/${offerId}/accept/`)).data)
+  },
+
+  async archive (offerId) {
+    return convert((await axios.post(`/api/offers/${offerId}/archive/`)).data)
+  },
+
+  async conversation (offerId) {
+    return convertConversation((await axios.get(`/api/offers/${offerId}/conversation/`)).data)
+  },
+
+}
+
+export function convert (val) {
+  if (Array.isArray(val)) {
+    return val.map(convert)
+  }
+  else {
+    return {
+      ...val,
+      createdAt: new Date(val.createdAt),
+    }
+  }
+}
diff --git a/src/offers/components/MultiCroppa.vue b/src/offers/components/MultiCroppa.vue
new file mode 100644
index 000000000..00e4e73d7
--- /dev/null
+++ b/src/offers/components/MultiCroppa.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="MultiCroppa">
+    <div
+      v-for="(item, idx) in items"
+      :key="item.key"
+      class="q-ma-sm inline-block vertical-top text-center"
+      :class="itemClasses(item)"
+    >
+      <Croppa
+        :ref="croppaRefFor(item)"
+        :initial-image="initialImageFor(item)"
+        :passive="isExisting(item)"
+        placeholder=""
+        prevent-white-space
+        :show-remove-button="false"
+        @new-image-drawn="imageDrawn(item)"
+      >
+        <img
+          slot="placeholder"
+          src="statics/add_a_photo.svg"
+        >
+      </Croppa>
+      <QBtnGroup
+        rounded
+        flat
+      >
+        <QBtn
+          v-if="hasImage(item)"
+          rounded
+          class="q-ma-xs"
+          size="sm"
+          icon="keyboard_arrow_left"
+          :class="{ invisible: isFirstImage(idx) }"
+          @click="moveImageLeft(item)"
+        />
+        <QBtn
+          v-if="hasImage(item)"
+          rounded
+          class="q-ma-xs"
+          size="sm"
+          icon="delete"
+          text-color="red"
+          :disable="!hasImage(item)"
+          @click="removeImage(item)"
+        />
+        <QBtn
+          v-if="hasImage(item)"
+          rounded
+          class="q-ma-xs"
+          size="sm"
+          icon="keyboard_arrow_right"
+          :class="{ invisible: isLastImage(idx) }"
+          @click="moveImageRight(item)"
+        />
+      </QBtnGroup>
+    </div>
+  </div>
+</template>
+
+<script>
+import { QBtn, QBtnGroup } from 'quasar'
+import CroppaPlugin from 'vue-croppa'
+const Croppa = CroppaPlugin.component
+
+function sortByPosition (a, b) {
+  return a.position - b.position
+}
+
+let nextKey = 0
+function getNextKey () {
+  const key = `key-${nextKey}`
+  nextKey++
+  return key
+}
+
+export default {
+  components: {
+    QBtn,
+    QBtnGroup,
+    Croppa,
+  },
+  props: {
+    /**
+     * This will accept the array from the backend. On modification there are 3 possiblities:
+     * - if removing image on server `_removed: true` will be added to the image object
+     * - when adding a new image an entry will be added with _new: true, and `toBlob: Function<Promise>`
+     * - when changing position, the `position` field will be updated (but the position in array left the same)
+     */
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      sourceKey: new Map(), // source -> key
+      newItem: {
+        key: getNextKey(),
+      },
+    }
+  },
+  computed: {
+    items () {
+      return [
+        ...this.value
+          .filter(item => !item._removed)
+          .map(source => {
+            let key = this.sourceKey.get(source)
+            if (!key) {
+              key = getNextKey()
+              this.sourceKey.set(source, key)
+            }
+            return {
+              key,
+              source,
+              position: source.position,
+            }
+          })
+          .sort(sortByPosition),
+        this.newItem,
+      ]
+    },
+  },
+  methods: {
+    croppaRefFor (item) {
+      return `croppa__${item.key}`
+    },
+    croppaFor (item) {
+      const ref = this.$refs[this.croppaRefFor(item)]
+      return ref ? ref[0] : null // ref[0] because it's in a v-for it gives me an array...
+    },
+    hasImage (item) {
+      const croppa = this.croppaFor(item)
+      return this.isExisting(item) || Boolean(croppa && croppa.hasImage())
+    },
+    isFirstImage (idx) {
+      return idx === 0
+    },
+    isLastImage (idx) {
+      return idx >= this.items.length - 2
+    },
+    isExisting (item) {
+      return item.source && item.source.id !== undefined
+    },
+    initialImageFor (item) {
+      const { source: { imageUrls: { fullSize: url } = {} } = {} } = item || {}
+      if (!url) return
+
+      // In development we want to force the images to load from our local proxy
+      // so that we don't get issues with missing CORS headers
+      if (__ENV.DEV && url.includes('/media')) return ['http://localhost:8080', url.substring(url.indexOf('/media'))].join('')
+
+      return url
+    },
+    getNextPosition () {
+      let nextPosition = 0
+      for (const item of this.items) {
+        if (typeof item.position === 'number') {
+          nextPosition = item.position + 1
+        }
+      }
+      return nextPosition
+    },
+    imageDrawn (item) {
+      if (this.isExisting(item)) return // this happens when showing existing images
+      const { key } = item
+      const position = this.getNextPosition()
+      const croppa = this.croppaFor(item)
+
+      // the item we will actually push to our value array
+      // this is what things outside this component will see
+      const source = {
+        _new: true,
+        position,
+        toBlob (mimeType) {
+          return croppa && croppa.hasImage() && croppa.promisedBlob(mimeType, 0.9)
+        },
+      }
+
+      // record source -> key mapping
+      // otherwise we will loose the association of this item with the croppa
+      this.sourceKey.set(source, key)
+
+      Object.assign(item, {
+        source,
+        position,
+      })
+
+      this.value.push(source)
+      this.newItem = {
+        key: getNextKey(),
+      }
+
+      this.recalculatePositions()
+    },
+    recalculatePositions () {
+      let position = 0
+      for (const item of this.items) {
+        if (typeof item.position === 'number') {
+          item.source.position = item.position = position++
+        }
+      }
+    },
+    moveImageLeft (item) {
+      const idx = this.items.indexOf(item)
+      const idxLeft = idx - 1
+      if (idxLeft < 0) return // there is nothing on the left
+      const itemLeft = this.items[idxLeft]
+      itemLeft.source.position = ++itemLeft.position
+      item.source.position = --item.position
+      this.recalculatePositions()
+    },
+    moveImageRight (item) {
+      const idx = this.items.indexOf(item)
+      const idxRight = idx + 1
+      if (idxRight > this.items.length - 2) return // there is nothing on the right
+      const itemRight = this.items[idxRight]
+      itemRight.source.position = --itemRight.position
+      item.source.position = ++item.position
+      this.recalculatePositions()
+    },
+    removeImage (item) {
+      if (this.isExisting(item)) {
+        // this item needs to be removed from the server after we save
+        this.$set(item.source, '_removed', true)
+      }
+      else {
+        // this image was never on the server, so we can just delete it
+        const idx = this.value.indexOf(item.source)
+        if (idx !== -1) this.$delete(this.value, idx)
+      }
+      // in both cases, this source item will never come back
+      // so we can forget the source -> key mapping
+      this.sourceKey.delete(item.source)
+      this.recalculatePositions()
+    },
+    itemClasses (item) {
+      return this.hasImage(item) ? [] : ['new-image']
+    },
+  },
+}
+</script>
+
+<style scoped lang="stylus">
+.new-image >>> canvas
+  border 1px solid #ddd
+</style>
diff --git a/src/offers/components/OfferDetail.vue b/src/offers/components/OfferDetail.vue
new file mode 100644
index 000000000..d668a763c
--- /dev/null
+++ b/src/offers/components/OfferDetail.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="absolute-full column"
+  >
+    <div class="col-auto full-width">
+      <OfferDetailHeader />
+    </div>
+    <div class="col relative-position">
+      <OfferDetailBody inline />
+    </div>
+  </div>
+</template>
+
+<script>
+import OfferDetailHeader from '@/offers/components/OfferDetailHeader'
+import OfferDetailBody from '@/offers/components/OfferDetailBody'
+
+export default {
+  components: {
+    OfferDetailBody,
+    OfferDetailHeader,
+  },
+}
+</script>
diff --git a/src/offers/components/OfferDetailBody.vue b/src/offers/components/OfferDetailBody.vue
new file mode 100644
index 000000000..6536d2aef
--- /dev/null
+++ b/src/offers/components/OfferDetailBody.vue
@@ -0,0 +1,170 @@
+<template>
+  <ChatConversation
+    v-if="conversation"
+    :conversation="conversationWithReversedMessages"
+    :away="away"
+    :current-user="currentUser"
+    compose
+    :inline="inline"
+    @mark="mark"
+    @toggleReaction="toggleReaction"
+    @saveMessage="saveMessage"
+    @fetchPast="fetchPast"
+    @send="send"
+  >
+    <template
+      v-if="offer"
+      #before-chat-messages
+    >
+      <QCarousel
+        v-if="offer.images.length > 0"
+        v-model="selectedImageIndex"
+        v-bind="carouselOptions"
+      >
+        <QCarouselSlide
+          v-for="(image, idx) in offer.images"
+          :key="image.id"
+          :name="idx"
+          :img-src="image.imageUrls.fullSize"
+        />
+      </QCarousel>
+      <div
+        v-if="!isDefaultStatus"
+        class="q-pa-md text-center text-h6 text-white"
+        :class="`bg-${offer.status === 'accepted' ? 'positive' : 'negative'}`"
+      >
+        {{ offer.status }}
+      </div>
+      <div
+        v-if="offer.canEdit && offer.status === 'active'"
+        class="row justify-end"
+      >
+        <QBtnDropdown
+          flat
+          no-caps
+          :label="$t('OFFER.MARK_AS_ACCEPTED')"
+        >
+          <div
+            class="q-pa-lg"
+            style="max-width: 300px;"
+          >
+            <div
+              v-t="'OFFER.MARK_AS_ACCEPTED_DESCRIPTION'"
+              class="text-body1 q-mb-lg"
+            />
+            <div class="row justify-end">
+              <QBtn
+                v-t="'OFFER.MARK_AS_ACCEPTED'"
+                color="positive"
+                @click="accept({ offerId: offer.id })"
+              />
+            </div>
+          </div>
+        </QBtnDropdown>
+        <QBtnDropdown
+          flat
+          no-caps
+          :label="$t('OFFER.MARK_AS_ARCHIVED')"
+        >
+          <div
+            class="q-pa-lg"
+            style="max-width: 300px;"
+          >
+            <div
+              v-t="'OFFER.MARK_AS_ARCHIVED_DESCRIPTION'"
+              class="text-body1 q-mb-lg"
+            />
+            <div class="row justify-end">
+              <QBtn
+                v-t="'OFFER.MARK_AS_ARCHIVED'"
+                color="negative"
+                @click="archive({ offerId: offer.id })"
+              />
+            </div>
+          </div>
+        </QBtnDropdown>
+      </div>
+      <div class="q-ma-md q-pa-md bg-white grey-border">
+        <Markdown :source="offer.description" />
+      </div>
+    </template>
+  </ChatConversation>
+  <KSpinner v-else />
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import ChatConversation from '@/messages/components/ChatConversation'
+import Markdown from '@/utils/components/Markdown'
+import KSpinner from '@/utils/components/KSpinner'
+import { QBtn, QBtnDropdown, QCarousel, QCarouselSlide } from 'quasar'
+import { DEFAULT_STATUS } from '@/offers/datastore/offers'
+
+export default {
+  components: {
+    QBtn,
+    QBtnDropdown,
+    QCarousel,
+    QCarouselSlide,
+    ChatConversation,
+    Markdown,
+    KSpinner,
+  },
+  props: {
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      selectedImageIndex: 0,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      offer: 'currentOffer/value',
+      conversation: 'currentOffer/conversation',
+      away: 'presence/toggle/away',
+      currentUser: 'auth/user',
+    }),
+    conversationWithReversedMessages () {
+      return {
+        ...this.conversation,
+        messages: this.conversation.messages.slice().reverse(),
+      }
+    },
+    carouselOptions () {
+      if (this.offer.images.length <= 1) return
+      return {
+        swipeable: true,
+        animated: true,
+        thumbnails: true,
+        arrows: true,
+        infinite: true,
+      }
+    },
+    isDefaultStatus () {
+      return this.offer.status === DEFAULT_STATUS
+    },
+  },
+  watch: {
+    offer () {
+      this.selectedImageIndex = 0
+    },
+  },
+  methods: {
+    ...mapActions({
+      send: 'conversations/send',
+      saveMessage: 'conversations/saveMessage',
+      mark: 'conversations/maybeMark',
+      setMuted: 'conversations/maybeSetMuted',
+      toggleReaction: 'conversations/toggleReaction',
+      fetchPast: 'conversations/fetchPast',
+      saveConversation: 'conversations/maybeSave',
+      accept: 'offers/accept',
+      archive: 'offers/archive',
+    }),
+  },
+}
+</script>
diff --git a/src/offers/components/OfferDetailHeader.vue b/src/offers/components/OfferDetailHeader.vue
new file mode 100644
index 000000000..51f4f37ff
--- /dev/null
+++ b/src/offers/components/OfferDetailHeader.vue
@@ -0,0 +1,51 @@
+<template>
+  <QToolbar
+    v-if="offer"
+    class="bg-secondary text-white"
+  >
+    <QToolbarTitle class="column">
+      <div>{{ offer.name }}</div>
+    </QToolbarTitle>
+    <QBtn
+      v-if="offer.canEdit"
+      :to="{ name: 'offerEdit', params: { offerId: offer.id } }"
+      flat
+      round
+      dense
+      icon="edit"
+      :title="$t('BUTTON.EDIT')"
+    />
+    <QBtn
+      v-if="!$q.platform.is.mobile"
+      flat
+      round
+      dense
+      icon="close"
+      :title="$t('BUTTON.CLOSE')"
+      @click="close()"
+    />
+  </QToolbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { QBtn, QToolbar, QToolbarTitle } from 'quasar'
+
+export default {
+  components: {
+    QBtn,
+    QToolbar,
+    QToolbarTitle,
+  },
+  computed: {
+    ...mapGetters({
+      offer: 'currentOffer/value',
+    }),
+  },
+  methods: {
+    close () {
+      this.$router.push({ name: 'groupOffers', query: this.$route.query })
+    },
+  },
+}
+</script>
diff --git a/src/offers/components/OfferForm.vue b/src/offers/components/OfferForm.vue
new file mode 100644
index 000000000..f1496890f
--- /dev/null
+++ b/src/offers/components/OfferForm.vue
@@ -0,0 +1,156 @@
+<template>
+  <KFormContainer>
+    <KSpinner v-if="fetching" />
+    <div
+      v-else
+      class="edit-box"
+      :class="{ changed: hasChanged }"
+    >
+      <form @submit.prevent="maybeSave">
+        <QInput
+          v-model="edit.name"
+          :label="$t('OFFER.NAME')"
+          :hint="$t('OFFER.NAME_HELPER')"
+          v-bind="nameError"
+          :autofocus="!$q.platform.has.touch"
+          autocomplete="off"
+          @blur="$v.edit.name.$touch"
+        >
+          <template #before>
+            <QIcon name="fas fa-fw fa-star" />
+          </template>
+        </QInput>
+
+        <MarkdownInput
+          v-model="edit.description"
+          icon="fas fa-fw fa-address-card"
+          :label="$t('OFFER.DESCRIPTION')"
+          v-bind="descriptionError"
+          @keyup.ctrl.enter="maybeSave"
+        />
+
+        <QField v-bind="imagesError">
+          <template #before>
+            <QIcon name="fas fa-fw fa-star" />
+          </template>
+          <template #control>
+            <MultiCroppa v-model="edit.images" />
+          </template>
+        </QField>
+
+        <div class="row justify-end q-gutter-sm q-mt-sm">
+          <QBtn
+            v-if="!isNew"
+            type="button"
+            :disable="!hasChanged"
+            @click="reset"
+          >
+            {{ $t('BUTTON.RESET') }}
+          </QBtn>
+
+          <QBtn
+            type="submit"
+            color="primary"
+            :disable="!canSave"
+            :loading="isPending"
+          >
+            {{ $t(isNew ? 'BUTTON.CREATE' : 'BUTTON.SAVE_CHANGES') }}
+          </QBtn>
+        </div>
+      </form>
+    </div>
+  </KFormContainer>
+</template>
+
+<script>
+import { validationMixin } from 'vuelidate'
+import { maxLength, minLength, required } from 'vuelidate/lib/validators'
+import editMixin from '@/utils/mixins/editMixin'
+import statusMixin, { mapErrors } from '@/utils/mixins/statusMixin'
+import { QBtn, QField, QIcon, QInput } from 'quasar'
+import MarkdownInput from '@/utils/components/MarkdownInput'
+import MultiCroppa from '@/offers/components/MultiCroppa'
+import KSpinner from '@/utils/components/KSpinner'
+import KFormContainer from '@/base/components/KFormContainer'
+
+const NAME_MIN_LENGTH = 5
+const NAME_MAX_LENGTH = 80
+
+export default {
+  components: {
+    MarkdownInput,
+    MultiCroppa,
+    KFormContainer,
+    QBtn,
+    QField,
+    QInput,
+    QIcon,
+    KSpinner,
+  },
+  mixins: [validationMixin, editMixin, statusMixin],
+  props: {
+    value: {
+      type: Object,
+      required: false,
+      default: () => ({
+        name: undefined,
+        description: undefined,
+        status: 'active',
+        images: [],
+      }),
+    },
+    fetching: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    canSave () {
+      if (this.$v.edit.$error) {
+        return false
+      }
+      return this.isNew || this.hasChanged
+    },
+    ...mapErrors({
+      name: [
+        ['required', 'VALIDATION.REQUIRED'],
+        ['minLength', 'VALIDATION.MINLENGTH', { min: NAME_MIN_LENGTH - 1 }],
+        ['maxLength', 'VALIDATION.MAXLENGTH', { max: NAME_MAX_LENGTH + 1 }],
+      ],
+      description: [
+        ['required', 'VALIDATION.REQUIRED'],
+      ],
+      images: [
+        ['required', 'VALIDATION.IMAGE_REQUIRED'],
+      ],
+    }),
+  },
+  methods: {
+    maybeSave () {
+      this.$v.edit.$touch()
+      if (!this.canSave) return
+      this.$v.edit.$reset()
+      this.save()
+    },
+  },
+  validations: {
+    edit: {
+      name: {
+        required,
+        minLength: minLength(NAME_MIN_LENGTH),
+        maxLength: maxLength(NAME_MAX_LENGTH),
+      },
+      description: {
+        required,
+      },
+      images: {
+        required: images => images.filter(image => !image._removed).length > 0,
+      },
+    },
+  },
+}
+</script>
+
+<style scoped lang="stylus">
+@import '~editbox'
+</style>
diff --git a/src/offers/datastore/currentOffer.js b/src/offers/datastore/currentOffer.js
new file mode 100644
index 000000000..c534bc819
--- /dev/null
+++ b/src/offers/datastore/currentOffer.js
@@ -0,0 +1,85 @@
+import offers from '@/offers/api/offers'
+import { createMetaModule, withMeta } from '@/utils/datastore/helpers'
+
+function initialState () {
+  return {
+    current: null,
+    id: null,
+  }
+}
+
+export default {
+  namespaced: true,
+  modules: {
+    meta: createMetaModule(),
+  },
+  state: initialState(),
+  getters: {
+    value: (state, getters, rootState, rootGetters) => {
+      return rootGetters['offers/enrich'](state.current)
+    },
+    id: state => state.id,
+    conversation: (state, getters, rootState, rootGetters) => {
+      if (!state.current) return
+      return rootGetters['conversations/getForOffer'](state.current.id)
+    },
+    fetching (state, getters) {
+      if (!state.id) return
+      const status = getters['meta/status']('fetch', state.id)
+      return status && status.pending
+    },
+    saveStatus: (state, getters) => {
+      const currentOffer = getters.value
+      return currentOffer && currentOffer.saveStatus
+    },
+  },
+  actions: {
+    ...withMeta({
+      async fetch ({ state, commit, dispatch }, offerId) {
+        commit('setId', offerId)
+        const offer = await offers.get(offerId)
+
+        // aborting, another offer has been loaded while we waited
+        if (state.id !== offerId) return
+        commit('set', offer)
+      },
+    }),
+    refresh ({ state, dispatch }) {
+      if (state.current) {
+        dispatch('fetch', state.current.id)
+      }
+    },
+    clear ({ commit }) {
+      commit('clear')
+    },
+    ...withMeta({
+      async select ({ dispatch, commit }, { offerId }) {
+        await dispatch('fetch', offerId)
+        dispatch('conversations/fetchForOffer', { offerId }, { root: true })
+      },
+    }, {
+      setCurrentId: ({ commit }, { offerId }) => commit('setId', offerId),
+      getCurrentId: ({ state }) => state.id,
+      findId: ({ offerId }) => offerId,
+    }),
+  },
+  mutations: {
+    setId (state, value) {
+      state.id = value
+    },
+    set (state, offer) {
+      state.current = offer
+    },
+    clear (state) {
+      Object.assign(state, initialState())
+    },
+    update (state, offer) {
+      if (state.id === offer.id) {
+        state.current = offer
+      }
+    },
+    delete (state, offerId) {
+      if (state.id === offerId) Object.assign(state, initialState())
+    },
+  },
+}
diff --git a/src/offers/datastore/index.js b/src/offers/datastore/index.js
new file mode 100644
index 000000000..2b18f18ef
--- /dev/null
+++ b/src/offers/datastore/index.js
@@ -0,0 +1,9 @@
+import offers from '@/offers/datastore/offers'
+import currentOffer from '@/offers/datastore/currentOffer'
+
+export default {
+  modules: {
+    offers,
+    currentOffer,
+  },
+}
diff --git a/src/offers/datastore/offers.js b/src/offers/datastore/offers.js
new file mode 100644
index 000000000..d6055cf54
--- /dev/null
+++ b/src/offers/datastore/offers.js
@@ -0,0 +1,142 @@
+import Vue from 'vue'
+import offers from '@/offers/api/offers'
+import {
+  createMetaModule,
+  withMeta,
+  metaStatusesWithId,
+  createPaginationModule,
+  metaStatuses,
+} from '@/utils/datastore/helpers'
+import router from '@/base/router'
+
+export const DEFAULT_STATUS = 'active'
+
+function initialState () {
+  return {
+    entries: {},
+    filter: {
+      status: DEFAULT_STATUS,
+    },
+  }
+}
+
+function sortByCreatedAtDesc (a, b) {
+  return b.createdAt - a.createdAt
+}
+
+export default {
+  namespaced: true,
+  modules: {
+    meta: createMetaModule(),
+    pagination: createPaginationModule(),
+  },
+  state: initialState(),
+  getters: {
+    ...metaStatuses(['create']),
+    get: (state, getters) => offerId => {
+      return getters.enrich(state.entries[offerId])
+    },
+    enrich: (state, getters, rootState, rootGetters) => offer => {
+      if (!offer) return
+      return {
+        ...offer,
+        canEdit: rootGetters['auth/userId'] === offer.user,
+        user: rootGetters['users/get'](offer.user),
+        group: rootGetters['groups/get'](offer.group),
+        ...metaStatusesWithId(getters, ['save'], offer.id),
+      }
+    },
+    all: (state, getters) => {
+      return Object.values(state.entries)
+        .filter(offer => offer.status === state.filter.status)
+        .map(getters.enrich)
+        .sort(sortByCreatedAtDesc)
+    },
+    fetching: (state, getters) => {
+      const status = getters['meta/status']('fetchList')
+      return status.pending
+    },
+  },
+  actions: {
+    ...withMeta({
+      async fetchList ({ state, rootGetters, dispatch, commit }, { status = 'active' }) {
+        commit('setFilter', { status })
+        const group = rootGetters['currentGroup/id']
+        const offerList = await dispatch('pagination/extractCursor', offers.list({ ...state.filter, group }))
+        commit('update', offerList)
+      },
+    }),
+    refresh ({ state, dispatch }) {
+      dispatch('fetchList', state.filter)
+    },
+    clear ({ commit }) {
+      commit('clear')
+    },
+    ...withMeta({
+      async create ({ getters, rootGetters, dispatch, commit }, data) {
+        const newOffer = await offers.create({
+          ...data,
+          group: rootGetters['currentGroup/id'],
+        })
+        commit('update', [newOffer])
+        router.push({
+          name: 'offerDetail',
+          params: {
+            groupId: newOffer.group,
+            offerId: newOffer.id,
+          },
+          query: router.currentRoute.query,
+        }).catch(() => {})
+      },
+
+      async save ({ getters, state, dispatch, commit }, data) {
+        const updatedOffer = await offers.save(data)
+        commit('update', [updatedOffer])
+        commit('currentOffer/update', updatedOffer, { root: true })
+        router.push({
+          name: 'offerDetail',
+          params: {
+            groupId: updatedOffer.group,
+            offerId: updatedOffer.id,
+          },
+          query: router.currentRoute.query,
+        }).catch(() => {})
+      },
+    }),
+
+    ...withMeta({
+      async accept ({ state, commit, dispatch }, { offerId }) {
+        const updatedOffer = await offers.accept(offerId)
+        commit('update', [updatedOffer])
+        commit('currentOffer/update', updatedOffer, { root: true })
+        dispatch('refresh')
+      },
+
+      async archive ({ state, commit, dispatch }, { offerId }) {
+        const updatedOffer = await offers.archive(offerId)
+        commit('update', [updatedOffer])
+        commit('currentOffer/update', updatedOffer, { root: true })
+        dispatch('refresh')
+      },
+    }, {
+      findId: ({ offerId }) => offerId,
+    }),
+  },
+  mutations: {
+    clear (state) {
+      Object.assign(state, initialState())
+    },
+    update (state, offers) {
+      for (const offer of offers) {
+        Vue.set(state.entries, offer.id, offer)
+      }
+    },
+    delete (state, id) {
+      if (state.entries[id]) Vue.delete(state.entries, id)
+    },
+    setFilter (state, data) {
+      state.entries = {}
+      state.filter = data
+    },
+  },
+}
diff --git a/src/offers/pages/GroupOffers.vue b/src/offers/pages/GroupOffers.vue
new file mode 100644
index 000000000..5c2bff883
--- /dev/null
+++ b/src/offers/pages/GroupOffers.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div
+      class="row no-wrap items-center justify-between bg-white q-px-sm q-py-xs"
+    >
+      <QSelect
+        v-model="status"
+        :options="statusOptions"
+        emit-value
+        map-options
+        outlined
+        hide-bottom-space
+        dense
+      />
+    </div>
+    <KSpinner v-show="fetching" />
+    <div class="row">
+      <div
+        v-if="status === 'active' && !fetching"
+        class="col-md-4 col-sm-6 col-12 new-offer"
+      >
+        <QCard>
+          <QImg
+            basic
+            :ratio="4/3"
+          />
+          <QItem style="min-height: 57px;" />
+          <RouterLink
+            class="absolute-center fit"
+            :to="{ name: 'offerCreate' }"
+            :title="$t('OFFER.CREATE_TITLE')"
+          >
+            <QIcon
+              size="5em"
+              class="fit"
+              name="fas fa-plus"
+            />
+          </RouterLink>
+        </QCard>
+      </div>
+      <div
+        v-for="offer in offers"
+        :key="offer.id"
+        class="col-md-4 col-sm-6 col-12"
+      >
+        <RouterLink :to="detailRouteFor(offer.id)">
+          <QCard
+            class="cursor-pointer"
+            :title="offer.name"
+          >
+            <QImg
+              basic
+              :src="offer.images[0].imageUrls.fullSize"
+              :ratio="4/3"
+            />
+            <QItem clickable>
+              <QItemSection avatar>
+                <ProfilePicture
+                  :user="offer.user"
+                  :size="36"
+                />
+              </QItemSection>
+              <QItemSection>
+                <QitemLabel class="ellipsis full-width">
+                  {{ offer.name }}
+                </QitemLabel>
+                <QitemLabel class="ellipsis full-width">
+                  <DateAsWords
+                    :date="offer.createdAt"
+                    class="text-caption"
+                  />
+                </QItemLabel>
+              </QItemSection>
+            </QItem>
+          </QCard>
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import { QIcon, QSelect, QCard, QItem, QItemSection, QImg } from 'quasar'
+import ProfilePicture from '@/users/components/ProfilePicture'
+import KSpinner from '@/utils/components/KSpinner'
+import bindRoute from '@/utils/mixins/bindRoute'
+import { DEFAULT_STATUS } from '@/offers/datastore/offers'
+import DateAsWords from '@/utils/components/DateAsWords'
+
+export default {
+  components: {
+    DateAsWords,
+    ProfilePicture,
+    KSpinner,
+    QIcon,
+    QSelect,
+    QCard,
+    QItem,
+    QItemSection,
+    QImg,
+  },
+  mixins: [
+    bindRoute({
+      status: DEFAULT_STATUS,
+    }),
+  ],
+  data () {
+    return {
+      statusOptions: [
+        {
+          label: this.$t('OFFER.FILTER.STATUS.ACTIVE'),
+          value: 'active',
+        },
+        {
+          label: this.$t('OFFER.FILTER.STATUS.ACCEPTED'),
+          value: 'accepted',
+        },
+        {
+          label: this.$t('OFFER.FILTER.STATUS.ARCHIVED'),
+          value: 'archived',
+        },
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters({
+      offers: 'offers/all',
+      fetching: 'offers/fetching',
+    }),
+  },
+  watch: {
+    status: {
+      immediate: true,
+      handler (status) {
+        this.fetchList({ status })
+      },
+    },
+  },
+  methods: {
+    ...mapActions({
+      fetchList: 'offers/fetchList',
+    }),
+    detailRouteFor (offerId) {
+      return {
+        name: 'offerDetail',
+        params: { offerId },
+        query: this.$route.query,
+      }
+    },
+  },
+}
+</script>
diff --git a/src/offers/pages/OfferCreate.vue b/src/offers/pages/OfferCreate.vue
new file mode 100644
index 000000000..b86c40378
--- /dev/null
+++ b/src/offers/pages/OfferCreate.vue
@@ -0,0 +1,16 @@
+<script>
+import { connect } from 'vuex-connect'
+import OfferForm from '@/offers/components/OfferForm'
+
+export default connect({
+  gettersToProps: {
+    status: 'offers/createStatus',
+  },
+  actionsToEvents: {
+    save: 'offers/create',
+  },
+  methodsToEvents: {
+    reset: ({ dispatch }) => dispatch('meta/clear', ['create']),
+  },
+})('OfferCreate', OfferForm)
+</script>
diff --git a/src/offers/pages/OfferEdit.vue b/src/offers/pages/OfferEdit.vue
new file mode 100644
index 000000000..22b57793a
--- /dev/null
+++ b/src/offers/pages/OfferEdit.vue
@@ -0,0 +1,18 @@
+<script>
+import { connect } from 'vuex-connect'
+import OfferForm from '@/offers/components/OfferForm'
+
+export default connect({
+  gettersToProps: {
+    fetching: 'currentOffer/fetching',
+    value: 'currentOffer/value',
+    status: 'currentOffer/saveStatus',
+  },
+  actionsToEvents: {
+    save: 'offers/save',
+  },
+  methodsToEvents: {
+    reset: ({ dispatch }) => dispatch('meta/clear', ['save']),
+  },
+})('OfferEdit', OfferForm)
+</script>
diff --git a/src/sidenav/components/SidenavGroup.vue b/src/sidenav/components/SidenavGroup.vue
index ebadbdc6a..59af0fe0e 100644
--- a/src/sidenav/components/SidenavGroup.vue
+++ b/src/sidenav/components/SidenavGroup.vue
@@ -5,6 +5,7 @@ import SidenavGroupUI from './SidenavGroupUI'
 export default connect({
   gettersToProps: {
     groupId: 'currentGroup/id',
+    features: 'currentGroup/features',
     wallUnreadCount: 'currentGroup/conversationUnreadCount',
     pendingApplications: 'applications/forCurrentGroupPending',
   },
diff --git a/src/sidenav/components/SidenavGroupUI.vue b/src/sidenav/components/SidenavGroupUI.vue
index 927243551..4511213e9 100644
--- a/src/sidenav/components/SidenavGroupUI.vue
+++ b/src/sidenav/components/SidenavGroupUI.vue
@@ -63,6 +63,10 @@ export default {
       default: null,
       type: Number,
     },
+    features: {
+      default: () => [],
+      type: Array,
+    },
     wallUnreadCount: {
       default: 0,
       type: Number,
@@ -90,6 +94,11 @@ export default {
         label: this.$t('GROUP.PICKUPS'),
         icon: this.$icon('pickup'),
         to: { name: 'groupPickups', params: { groupId: this.groupId } },
+      }, {
+        condition: this.hasFeature('offers'),
+        label: this.$t('GROUP.OFFERS'),
+        icon: this.$icon('offer'),
+        to: { name: 'groupOffers', params: { groupId: this.groupId } },
       }, {
         label: this.$t('PICKUP_FEEDBACK.TITLE'),
         icon: this.$icon('feedback'),
@@ -128,5 +137,10 @@ export default {
       }].filter(e => typeof e.condition === 'undefined' || e.condition === true)
     },
   },
+  methods: {
+    hasFeature (feature) {
+      return this.features.includes(feature)
+    },
+  },
 }
 </script>
diff --git a/src/topbar/datastore/breadcrumbs.js b/src/topbar/datastore/breadcrumbs.js
index 136a84466..f3bf773bc 100644
--- a/src/topbar/datastore/breadcrumbs.js
+++ b/src/topbar/datastore/breadcrumbs.js
@@ -56,6 +56,14 @@ export default {
             }
           }
         }
+        else if (item.type === 'activeOffer') {
+          const offer = rootGetters['currentOffer/value']
+          if (offer) {
+            return {
+              name: offer.name,
+            }
+          }
+        }
         else if (item.translation) {
           return { ...item, name: i18n.t(item.translation) }
         }
diff --git a/src/utils/mixins/editMixin.js b/src/utils/mixins/editMixin.js
index b491b4d5e..f95f3bccf 100644
--- a/src/utils/mixins/editMixin.js
+++ b/src/utils/mixins/editMixin.js
@@ -13,8 +13,8 @@ export default {
   },
   watch: {
     value (current, previous) {
-      const changes = (current && previous) ? objectDiff(previous, current) : {}
-      this.edit = cloneDeep({ ...this.edit, ...changes })
+      const changes = current && previous ? objectDiff(previous, current) : {}
+      Object.assign(this.edit, cloneDeep(changes))
     },
   },
   computed: {
diff --git a/src/utils/mixins/statusMixin.js b/src/utils/mixins/statusMixin.js
index b1fc6ea02..187ea101d 100644
--- a/src/utils/mixins/statusMixin.js
+++ b/src/utils/mixins/statusMixin.js
@@ -36,3 +36,35 @@ export default {
     },
   },
 }
+
+const NO_ERROR = {
+  error: false,
+  errorMessage: '',
+}
+
+export function mapErrors (config) {
+  const computed = {}
+  for (const property of Object.keys(config)) {
+    const rules = config[property]
+    computed[`${property}Error`] = function () {
+      const checkServerErrors = () => {
+        const firstServerError = this.firstError(property)
+        if (!firstServerError) return NO_ERROR
+        return {
+          error: true,
+          errorMessage: firstServerError,
+        }
+      }
+      const vuelidate = this.$v.edit[property]
+      if (vuelidate === undefined || !vuelidate.$error) return checkServerErrors()
+      const ruleWithError = rules.find(([ruleName]) => !vuelidate[ruleName])
+      if (!ruleWithError) return checkServerErrors()
+      const [, i18nKey, i18nParams] = ruleWithError
+      return {
+        error: true,
+        errorMessage: this.$t(i18nKey, i18nParams),
+      }
+    }
+  }
+  return computed
+}
diff --git a/src/utils/utils.js b/src/utils/utils.js
index cabf79c2a..4a324052f 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -79,3 +79,13 @@ export function objectDiff (a, b) {
 export function filterTruthy (obj) {
   return Object.entries(obj).filter(([_, v]) => v).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
 }
+
+export function withoutKeys (...keys) {
+  return obj => {
+    const copy = { ...obj }
+    for (const key of keys) {
+      delete copy[key]
+    }
+    return copy
+  }
+}
diff --git a/test/enrichedFactories.js b/test/enrichedFactories.js
index 94deb9a26..06c50eed1 100644
--- a/test/enrichedFactories.js
+++ b/test/enrichedFactories.js
@@ -68,6 +68,7 @@ export const makeGroup = data => {
       'daily_pickup_notification',
       'new_application',
     ],
+    features: [],
     isOpen: true,
     isCurrentGroup: false,
     isMember: false,
diff --git a/test/mockdata.js b/test/mockdata.js
index d37cc34a8..d159a3424 100644
--- a/test/mockdata.js
+++ b/test/mockdata.js
@@ -23,6 +23,7 @@ export const groupsMock = [
   saveStatus: statusMocks.default(),
   leaveStatus: statusMocks.default(),
   notificationTypes: [],
+  features: [],
   issueVotingDurationDays: 7,
 }))