github.com/resonatecoop/id@v1.1.0-43/frontend/src/views/membership.js (about)

     1  const html = require('choo/html')
     2  const format = require('date-fns/format')
     3  
     4  module.exports = (state, emit) => {
     5    const total = state.shares.reduce((acc, share) => {
     6      return acc + share.amount
     7    }, 0)
     8  
     9    return html`
    10      <div class="flex flex-column">
    11        <h2 class="lh-title f3 fw1">Your memberships</h2>
    12        <p class="lh-copy f5 measure">
    13          You may cancel or renew an active membership at any time.<br>
    14          No refund will be be made in case of a cancelation.
    15        </p>
    16        <div>
    17          <div class="flex flex-column flex-auto pb6">
    18            <div>
    19              <div class="overflow-auto ph4 ba bw b--black-20 pv4">
    20                <table class="f6 w-100 mw8 center" cellspacing="0">
    21                  <thead>
    22                    <tr>
    23                      <th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Name</th>
    24                      <th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Date From</th>
    25                      <th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Until</th>
    26                      <th class="fw6 bb b--black-20 tl pb3 pr3 bg-white">Contribution</th>
    27                      <th class="fw6 bb b--black-20 tl pb3 pr3 bg-white"></th>
    28                    </tr>
    29                  </thead>
    30                  <tbody class="lh-copy">
    31                    ${state.memberships.map(membership => html`
    32                      <tr>
    33                        <td class="pv3 pr3 bb b--black-20${!membership.active ? ' o-50' : ''}">
    34                          ${membership.name}
    35                        </td>
    36                        <td class="pv3 pr3 bb b--black-20${!membership.active ? ' o-50' : ''}">
    37                          ${format(new Date(membership.dateFrom), 'dd MMMM yyyy')}
    38                        </td>
    39                        <td class="pv3 pr3 bb b--black-20${!membership.active ? ' o-50' : ''}">
    40                          ${format(new Date(membership.dateTo), 'dd MMMM yyyy')}
    41                        </td>
    42                        <td class="pv3 pr3 bb b--black-20${!membership.active ? ' o-50' : ''}">
    43                          ${membership.contribution}
    44                        </td>
    45                        <td class="pv3 pr3 bb b--black-20">
    46                          ${membership.active
    47                            ? html`
    48                              <form action="" method="POST">
    49                                <input type="hidden" name="gorilla.csrf.Token" value=${state.csrfToken}>
    50                                <input type="hidden" name="_method" value="DELETE" />
    51                                <input type="hidden" name="id" value="${membership.subscriptionID}" />
    52                                <div class="flex flex-auto">
    53                                  <button style="outline:solid 1px var(--near-black);outline-offset:-1px" type="submit" class="bg-white dib bn pa1 flex-shrink-0 f6 grow">
    54                                    Cancel
    55                                  </button>
    56                                </div>
    57                              </form>
    58                            `
    59                            : ''}
    60                        </td>
    61                      </tr>
    62                    `)}
    63                  </tbody>
    64                </table>
    65              </div>
    66            </div>
    67          </div>
    68        </div>
    69        <h2 class="lh-title f3 fw1">Your shares</h2>
    70        <div>
    71          <div class="flex flex-column flex-auto pb6">
    72            <div>
    73              <div class="overflow-auto ph4 ba bw b--black-20 pv4">
    74                <table class="f6 w-100 mw8 center" cellspacing="0">
    75                  <thead>
    76                    <tr>
    77                      <th></th>
    78                      <th class="fw1 bb b--black-20 tl pb3 pr3 f4">Amount (1€ par value)</th>
    79                      <th class="fw1 bb b--black-20 tl pb3 pr3 f4">Date Purchased</th>
    80                    </tr>
    81                  </thead>
    82                  <tbody class="lh-copy">
    83                    ${state.shares.map(share => html`
    84                      <tr>
    85                        <td></td>
    86                        <td class="pv3 pr3 bb b--black-20">
    87                          ${share.amount}
    88                        </td>
    89                        <td class="pv3 pr3 bb b--black-20">
    90                          ${format(new Date(share.datePurchased), 'dd MMMM yyyy')}
    91                        </td>
    92                      </tr>
    93                    `)}
    94                  </tbody>
    95                  <tfoot>
    96                    <tr>
    97                      <th scope="row">Total*</th>
    98                      <td>${total}</td>
    99                    </tr>
   100                  </tfoot>
   101                </table>
   102              </div>
   103              <p class="lh-copy f5">* For shares bought before xxx, you may contact us to receive a full copy of the data.</p>
   104            </div>
   105          </div>
   106        </div>
   107      </div>
   108    `
   109  }