SupportUs.vue 11.8 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <div class="strong row">
      <section>
        <h1>
          <translate translate-context="Content/SupportUs/Header"
            >Supporting Funkwhale</translate
          >
        </h1>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
12
13
14
            We're a team of volunteers, commited to develop, maintain and
            enhance Funkwhale. To do that, though, we need your help, and this
            includes your financial support.
15
16
          </translate>
        </p>
petitminion's avatar
petitminion committed
17
        <!-- 
18
19
20
21
22
23
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
            There are two ways you can financially help us:
          </translate>
        </p>

Georg Krause's avatar
Georg Krause committed
24
        <a href="#membership" class="pure-button pure-button-primary">
25
26
27
28
          <translate translate-context="Content/Community/Link"
            >Become a member</translate
          >
        </a>
petitminion's avatar
petitminion committed
29
30
31
32
33
34
        -->
        <a href="#donate" class="pure-button pure-button-primary">
          <translate translate-context="Content/Community/Link,verb"
            >Donate</translate
          >
        </a>
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
      </section>
    </div>
    <div class="row">
      <section id="donate">
        <h2>
          <i class="fa fa-eur"></i>&nbsp;
          <translate translate-context="Content/SupportUs/Header"
            >Donate to the project</translate
          >
        </h2>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
            Donations are the easiest and quickest way to support us.
          </translate>
        </p>
        <table>
          <thead>
            <tr>
              <th>
                <translate translate-context="Content/SupportUs/Table.Header"
                  >Payment mean</translate
                >
              </th>
              <th>
                <translate translate-context="Content/SupportUs/Table.Header"
                  >Additional info</translate
                >
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <i class="fa fa-credit-card"></i>&nbsp;
                <translate translate-context="Content/SupportUs/Table.Cell"
                  >Credit card</translate
                >
              </td>
              <td>
                <payment-form></payment-form>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-bank"></i>&nbsp;
                <translate translate-context="Content/SupportUs/Table.Cell"
                  >Wiretransfer</translate
                >
              </td>
              <td>
                <ul>
                  <li>
                    <translate translate-context="Content/SupportUs/Table.Cell"
                      >Account holder:</translate
Georg Krause's avatar
Georg Krause committed
89
90
                    >
                    {{ this.bank.accountHolder }}
91
92
93
94
                  </li>
                  <li>
                    <translate translate-context="Content/SupportUs/Table.Cell"
                      >IBAN:</translate
Georg Krause's avatar
Georg Krause committed
95
96
                    >
                    {{ this.bank.iban }}
97
98
99
100
                  </li>
                  <li>
                    <translate translate-context="Content/SupportUs/Table.Cell"
                      >BIC Code:</translate
Georg Krause's avatar
Georg Krause committed
101
102
                    >
                    {{ this.bank.bic }}
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
                  </li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>
                <i class="fa fa-link"></i>&nbsp;
                <translate translate-context="Content/SupportUs/Table.Cell"
                  >OpenCollective (recurring donations)</translate
                >
              </td>
              <td>
                <a
                  class="pure-button pure-button-primary"
                  :href="openCollectiveUrl"
                  target="_blank"
                >
                  <translate translate-context="Content/SupportUs/Table.Cell"
                    >View our OpenCollective Profile</translate
                  >
                </a>
              </td>
            </tr>
          </tbody>
        </table>
Eliot Berriot's avatar
Eliot Berriot committed
128
129
130

        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
131
132
133
            We're also relying on lot of third-party services and projects who
            may benefit from your help. Supporting these projects will have a
            positive impact on Funkwhale too!
Eliot Berriot's avatar
Eliot Berriot committed
134
135
136
137
138
139
140
141
142
          </translate>
        </p>
        <router-link
          :to="{ name: 'credits', params: { locale: $language.current } }"
        >
          <translate translate-context="Content/Community/Link"
            >Credits</translate
          >
        </router-link>
143
144
      </section>
    </div>
145
    <!-- While we update the collective status we close memberships  
146
147
148
149
150
151
152
153
154
155
    <div class="row alternate">
      <section id="membership">
        <h2>
          <i class="fa fa-group"></i>&nbsp;
          <translate translate-context="Content/SupportUs/Header"
            >Join the collective</translate
          >
        </h2>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
156
157
            Funkwhale is maintained by a legal entity named The Funkwhale
            Collective. This is a french association with open memberships.
158
159
160
161
          </translate>
        </p>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
162
163
            If you agree with our values, statutes, want to help and to have a
            say in the governance of the project, you can become a member!
164
165
166
167
          </translate>
        </p>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
168
169
            It's as easy as reading our statutes, fill the membership form and
            pay your yearly membership fee (the minimum is 1€).
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
          </translate>
        </p>
        <router-link
          class="pure-button"
          :to="{ name: 'collective', params: { locale: $language.current } }"
        >
          <translate translate-context="Content/SupportUs/Paragraph"
            >Read our statutes</translate
          >
        </router-link>
        <a class="pure-button" :href="membershipUrl" target="_blank">
          <translate translate-context="Content/SupportUs/Paragraph"
            >Register as a member</translate
          >
        </a>
        <h3>
          <translate translate-context="Content/SupportUs/Paragraph">
            What can I do as a member?
          </translate>
        </h3>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
192
193
            Becoming a member gives you the opportunity to join our General
            Assemblies, and vote, assuming you're a member for more than a year.
194
195
196
197
          </translate>
        </p>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
198
199
200
            During our General Assemblies, we elect various representatives to
            run the collective and supervise the project. We also make critical
            decisions for the collective such as updating our statutes.
201
202
203
204
          </translate>
        </p>
      </section>
    </div>
205
    -->
206
207
208
209
210
211
212
213
214
    <div class="row">
      <section id="budget">
        <h2>
          <translate translate-context="Content/SupportUs/Header"
            >How do you use the money?</translate
          >
        </h2>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
215
            You'll find below a detailed budget for our expenses and revenue.
216
217
218
219
          </translate>
        </p>
        <p>
          <translate translate-context="Content/SupportUs/Paragraph">
Georg Krause's avatar
Georg Krause committed
220
221
222
            Please note that we are looking for ways to pay our contributors for
            their work, and the positive balance doesn't mean we aren't needing
            additional support ;)
223
224
          </translate>
        </p>
225
226
227
228
        <div class="table-wrapper">
          <table>
            <caption>
              <translate translate-context="Content/SupportUs/Table,Header">
229
                Yearly Budget
230
              </translate>
231
              <span class="right floated"> 2021 </span>
232
233
234
235
236
237
            </caption>
            <tbody>
              <tr class="emphasis">
                <td>
                  <strong>
                    <translate translate-context="Content/SupportUs/*/Noun">
238
                      Revenue
239
240
241
242
                    </translate>
                  </strong>
                </td>
                <td class="amount">
Georg Krause's avatar
Georg Krause committed
243
                  <strong> {{ formatAmount(revenues.total) }}</strong>
244
245
246
247
248
249
                </td>
              </tr>
              <tr class="sub" v-for="row in revenues.rows" :key="row.label">
                <td>
                  {{ row.label }}
                </td>
Georg Krause's avatar
Georg Krause committed
250
                <td class="amount">{{ formatAmount(row.amount) }}</td>
251
252
253
254
255
256
257
258
259
260
              </tr>
              <tr class="emphasis">
                <td>
                  <strong>
                    <translate translate-context="Content/SupportUs/*/Noun">
                      Expenses
                    </translate>
                  </strong>
                </td>
                <td class="amount">
Georg Krause's avatar
Georg Krause committed
261
                  <strong> {{ formatAmount(expenses.total) }}</strong>
262
263
264
265
266
267
                </td>
              </tr>
              <tr class="sub" v-for="row in expenses.rows" :key="row.label">
                <td>
                  {{ row.label }}
                </td>
Georg Krause's avatar
Georg Krause committed
268
                <td class="amount">{{ formatAmount(row.amount) }}</td>
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
              </tr>
              <tr class="emphasis">
                <td>
                  <strong>
                    <translate translate-context="Content/SupportUs/*/Noun">
                      Balance
                    </translate>
                  </strong>
                </td>
                <td class="amount">
                  <strong>
                    {{ formatAmount(revenues.total + expenses.total) }}
                  </strong>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
287
288
289
290
291
292
293
294
295
296
297
298
      </section>
    </div>
  </div>
</template>

<script>
import PageMixin from "../PageMixin";
import PaymentForm from "../components/PaymentForm";

export default {
  mixins: [PageMixin],
  components: {
Georg Krause's avatar
Georg Krause committed
299
    PaymentForm,
300
  },
Georg Krause's avatar
Georg Krause committed
301
  data() {
302
303
304
305
    return {
      membershipUrl: "https://dolibarr.funkwhale.audio/public/members/new.php",
      openCollectiveUrl: "https://opencollective.com/funkwhale",
      bank: {
Georg Krause's avatar
Georg Krause committed
306
        iban: "FR 22 2004 1010 0829 0608 2Z02 931",
307
        accountHolder: "The Funkwhale Collective",
Georg Krause's avatar
Georg Krause committed
308
309
        bic: "PSSTFRPPMAR",
      },
Georg Krause's avatar
Georg Krause committed
310
    };
311
312
313
314
315
  },
  methods: {
    getInnerTitle() {
      return this.$pgettext("HTML/Meta/Title", "Supporting Funkwhale");
    },
Georg Krause's avatar
Georg Krause committed
316
317
    formatAmount(amount) {
      return amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
Georg Krause's avatar
Georg Krause committed
318
    },
319
  },
320
  computed: {
Georg Krause's avatar
Georg Krause committed
321
322
    revenues() {
      let revenues = {};
323
      revenues.rows = [
Agate's avatar
Agate committed
324
        {
Georg Krause's avatar
Georg Krause committed
325
326
327
328
          label: this.$pgettext(
            "Content/SupportUs/Tabel,Row/Noun",
            "Open Collective donations and membership fees"
          ),
329
          amount: 3045.63,
Georg Krause's avatar
Georg Krause committed
330
        },
Georg Krause's avatar
Georg Krause committed
331
332
      ];
      revenues.total = revenues.rows
Georg Krause's avatar
Georg Krause committed
333
        .map((r) => {
Georg Krause's avatar
Georg Krause committed
334
335
336
337
          return r.amount;
        })
        .reduce((a, b) => a + b, 0);
      return revenues;
338
    },
Georg Krause's avatar
Georg Krause committed
339
340
    expenses() {
      let expenses = {};
341
342
      expenses.rows = [
        {
Georg Krause's avatar
Georg Krause committed
343
          label: this.$pgettext("Content/SupportUs/Tabel,Row/Noun", "Hosting"),
344
          amount: -735.59,
345
346
        },
        {
Georg Krause's avatar
Georg Krause committed
347
348
349
350
          label: this.$pgettext(
            "Content/SupportUs/Tabel,Row/Noun",
            "Bank account fees"
          ),
351
          amount: -148.2,
Agate's avatar
Agate committed
352
        },
353
        {
Georg Krause's avatar
Georg Krause committed
354
355
          label: this.$pgettext(
            "Content/SupportUs/Tabel,Row/Noun",
356
            "Other expenses"
Georg Krause's avatar
Georg Krause committed
357
          ),
358
          amount: -41,
Georg Krause's avatar
Georg Krause committed
359
        },
Georg Krause's avatar
Georg Krause committed
360
361
      ];
      expenses.total = expenses.rows
Georg Krause's avatar
Georg Krause committed
362
        .map((r) => {
Georg Krause's avatar
Georg Krause committed
363
364
365
366
          return r.amount;
        })
        .reduce((a, b) => a + b, 0);
      return expenses;
Georg Krause's avatar
Georg Krause committed
367
368
    },
  },
369
370
};
</script>