fab-manager/app/frontend/templates/plans/index.html

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l ">
      <section class="heading-title">
        <h1 translate>{{ 'app.public.plans.subscriptions' }}</h1>
      </section>
    </div>
  </div>
</section>


<div class="row no-gutter">
  <div class="col-sm-12 col-md-9 b-r">

    <div class="row m-t m-b padder" ng-repeat="plansGroup in plansClassifiedByGroup | groupFilter:ctrl.member" ng-show="plansGroup.actives > 0">

      <div class="col-md-12 text-center">
        <h2 class="text-u-c">{{plansGroup.name}}</h2>
      </div>
      <div class="row row-centered padder">
        <div class="col-xs-12 col-md-12 col-lg-10 col-centered no-gutter">

          <!-- ng-class directive center the last item if the list length is odd -->
          <div class="pricing-panel col-xs-12 col-md-6 col-lg-6 text-center"
               ng-class="{'col-md-12 col-lg-12 b-r':(plansGroup.plans.filter(filterDisabledPlans).length % 2 == 1 && key == plansGroup.plans.filter(filterDisabledPlans).length-1)}"
               ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy: '-ui_weight'">

              <h3 class="title">{{ plan.base_name }}</h3>

              <div class="content">
                <div class="wrap">
                  <div class="price">
                    <div class="amount" data-fittext>{{plan.amount | currency}}</div>
                    <span class="period">{{ plan.interval | planIntervalFilter: plan.interval_count }}</span>
                  </div>
                </div>
              </div>

              <div class="cta-button" ng-if="isAuthorized('member') || (isAuthorized('manager') && ctrl.member.id === currentUser.id)">
                <button class="btn btn-default rounded" ng-click="selectPlan(plan)" ng-if="ctrl.member.subscribed_plan.id != plan.id" ng-disabled="ctrl.member.subscribed_plan" ng-class="{ 'bg-yellow': selectedPlan==plan }">
                  <span ng-if="ctrl.member" translate>{{ 'app.public.plans.i_choose_that_plan' }}</span>
                  <span ng-if="!ctrl.member" translate>{{ 'app.public.plans.i_subscribe_online' }}</span>
                </button>

                <button class="btn btn-warning bg-yellow rounded" ng-if="ctrl.member.subscribed_plan.id == plan.id" ng-disabled="ctrl.member.subscribed_plan.id == plan.id" translate>
                  {{ 'app.public.plans.i_already_subscribed' }}
                </button>

              </div>

              <div class="cta-button" ng-if="isAuthorized('admin') || (isAuthorized('manager') && ctrl.member.id != currentUser.id)">
                <button class="btn btn-default rounded" ng-click="selectPlan(plan)" ng-class="{ 'bg-yellow': selectedPlan==plan }" ng-disabled="!ctrl.member">
                  <span translate>{{ 'app.public.plans.i_choose_that_plan' }}</span>
                </button>
              </div>

              <br ng-show="!plan.plan_file_url">  <!-- TODO Refacto with CSS -->
              <a ng-href="{{ plan.plan_file_url }}" ng-show="plan.plan_file_url" target="_blank" translate>{{ 'app.public.plans.more_information' }}</a>
          </div>

        </div>


        <div class="col-xs-12 col-md-12 col-lg-10 col-centered no-gutter" ng-if="ctrl.member.subscription && isInPast(ctrl.member.subscription.expired_at)">
          <uib-alert type="info">
            {{ 'app.public.plans.your_subscription_expires_on_the_DATE' | translate:{DATE:(ctrl.member.subscription.expired_at | amDateFormat:'L' )} }}
          </uib-alert>
        </div>

      </div>

    </div>

  </div>

  <div class="col-sm-12 col-md-12 col-lg-3">

    <div ng-if="isAuthorized(['admin', 'manager'])">
      <select-member subscription="false"></select-member>
    </div>

    <section class="widget panel b-a m m-t-lg" ng-show="ctrl.member">
      <div class="panel-heading b-b">
          <h3 ng-show="isAuthorized('member')" translate>{{ 'app.public.plans.my_group' }}</h3>
          <h3 ng-show="isAuthorized(['admin', 'manager'])" translate translate-values="{GENDER:getGender(ctrl.member)}">{{ 'app.public.plans.his_group' }}</h3>
      </div>
      <div class="widget-content no-bg auto wrapper">
          <div ng-show="!group.change">
              <div class="well well-warning">
                  <strong>{{getUserGroup().name}}</strong>
              </div>
              <button class="btn btn-default btn-no-overflow m-t"
                      ng-click="group.change = !group.change"
                      ng-show="(!selectedPlan && ctrl.member && !ctrl.member.subscribed_plan && ctrl.member.subscription) || (!paid.plan)"
                      translate
                      translate-values="{ROLE:ctrl.member.role}">{{ 'app.public.plans.he_wants_to_change_group' }}</button>
          </div>
          <div ng-show="group.change">
              <select class="form-control" ng-options="g.id as g.name for g in groups" ng-model="group.id"></select>
              <button class="btn btn-success m-t"
                      ng-click="selectGroup()"
                      translate
                      translate-values="{ROLE:ctrl.member.role, GENDER:getGender(ctrl.member)}">{{ 'app.public.plans.change_my_group' }}</button>
          </div>
      </div>
    </section>

    <section class="widget panel b-a m m-t-lg" ng-if="!selectedPlan && ctrl.member && !ctrl.member.subscribed_plan && ctrl.member.subscription">
      <div class="panel-heading b-b">
        <h3 translate>{{ 'app.public.plans.summary' }}</h3>
      </div>

      <div class="widget-content no-bg auto wrapper">
        <strong>{{ 'app.public.plans.your_subscription_has_expired_on_the_DATE' | translate:{DATE:(ctrl.member.subscription.expired_at | amDateFormat:'LL')} }}</strong>

        <div class="well well-warning m-t-sm">
          <i class="font-sbold">{{ctrl.member.subscription.plan | humanReadablePlanName }}</i>
          <div class="font-sbold">{{ 'app.public.plans.subscription_price' | translate }} {{ctrl.member.subscription.plan.amount | currency}}</div>
        </div>
      </div>
    </section>

    <section class="widget panel b-a m m-t-lg" ng-if="selectedPlan && ctrl.member">
      <div class="panel-heading b-b">
        <h3 translate>{{ 'app.public.plans.summary' }}</h3>
      </div>

      <div class="widget-content no-bg auto wrapper">
        <span translate>{{ 'app.public.plans.you_ve_just_selected_a_subscription_html' }}</span>

        <div class="well well-warning m-t-sm">
          <i class="font-sbold">{{ selectedPlan | humanReadablePlanName }}</i>
          <div class="font-sbold">{{ 'app.public.plans.subscription_price' | translate }} {{selectedPlan.amount | currency}}</div>
        </div>

        <coupon show="!ctrl.member.subscribed_plan" coupon="coupon.applied" total="selectedPlan.amount" user-id="{{ctrl.member.id}}"></coupon>
      </div>

      <div class="widget-footer">
        <button class="btn btn-valid btn-info btn-block p-l text-u-c r-b" ng-click="openSubscribePlanModal()" ng-if="!ctrl.member.subscribed_plan">{{ 'app.public.plans.confirm_and_pay' | translate }} {{cart.total | currency}}</button>
      </div>
    </section>


    <section class="widget panel b-a m m-t-lg" ng-if="paid.plan">
      <div class="panel-heading b-b">
        <h3 translate>{{ 'app.public.plans.summary' }}</h3>
      </div>

      <div class="widget-content no-bg auto wrapper">
       <span translate>{{ 'app.public.plans.you_ve_just_payed_the_subscription_html' }}</span>

        <div class="well well-warning m-t-sm">
          <i class="font-sbold">{{ paid.plan | humanReadablePlanName }}</i>
          <div class="font-sbold">{{ 'app.public.plans.subscription_price' | translate }} {{paid.plan.amount | currency}}</div>
        </div>

        <div class="alert alert-success">{{ 'app.public.plans.thank_you_your_subscription_is_successful' | translate }}<br>
        <a ui-sref="app.logged.dashboard.invoices" translate>{{ 'app.public.plans.your_invoice_will_be_available_soon_from_your_dashboard' }}</a></div>

      </div>
    </section>


    <uib-alert type="warning m">
      <p class="text-sm">
        <span ng-bind-html="subscriptionExplicationsAlert"></span>
      </p>
    </uib-alert>

  </div>
</div>