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 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 list-of-plans">
  <div class="col-sm-12 col-md-9 b-r">

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

    <plans-list customer="ctrl.member"
                subscribed-plan-id="ctrl.member.subscribed_plan.id"
                on-error="onError"
                on-plan-selection="selectPlan"
                on-login-request="userLogin"
                operator="currentUser"
                can-select-plan="canSelectPlan()"
                >
    </plans-list>

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

    <change-group user="ctrl.member"
                  on-success="onGroupUpdateSuccess"
                  on-error="onError"
                  allow-change="isAllowedChangingGroup()">
    </change-group>

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

    <cart events="{}"
          user="ctrl.member"
          plan="selectedPlan"
          plan-selection-time="planSelectionTime"
          settings="settings"
          reservable-type="Subscription"
          after-payment="afterPayment"></cart>


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