fab-manager/app/frontend/templates/shared/_cart.html

<div class="widget panel b-a m m-t-lg" ng-if="user && !events.modifiable && !events.moved && !paidPlan">
  <div class="panel-heading b-b small">
    <h3 translate>{{ 'app.shared.cart.summary' }}</h3>
  </div>

  <div class="widget-content no-bg auto wrapper" ng-show="(!events.reserved && !selectedPlan) || events.reserved.length == 0 && (!events.paid || events.paid.length == 0)">
    <p class="font-felt fleche-left text-lg">
      <img src="../../images/arrow-left.png" class="fleche-left visible-lg" />
      <span ng-show="events.reserved">{{ 'app.shared.cart.select_one_or_more_slots_in_the_calendar' | translate:{SINGLE:limitToOneSlot} }}</span>
      <span ng-hide="events.reserved" translate>{{ 'app.shared.cart.select_a_plan' }}</span>
    </p>
  </div>

  <div class="widget-content no-bg auto wrapper" ng-if="events.reserved.length > 0">

    <div class="font-sbold m-b-sm " translate>{{ 'app.shared.cart.you_ve_just_selected_the_slot' }}</div>

    <div class="panel panel-default bg-light" ng-repeat="slot in events.reserved">
      <div class="panel-body">
        <div class="font-sbold text-u-c">{{ 'app.shared.cart.datetime_to_time' | translate:{START_DATETIME:(slot.start | amDateFormat:'LLLL'), END_TIME:(slot.end | amDateFormat:'LT') } }}</div>
        <div class="text-base">{{ 'app.shared.cart.cost_of_TYPE' | translate:{TYPE:reservableType} }} <span ng-class="{'text-blue': !slot.promo, 'red': slot.promo}">{{slot.price | currency}}</span></div>
        <div ng-show="isAuthorized()" class="m-t">
          <label for="offerSlot" class="control-label m-r" translate>{{ 'app.shared.cart.offer_this_slot' }}</label>
          <input bs-switch
                 ng-model="slot.offered"
                 id="offerSlot"
                 type="checkbox"
                 class="form-control"
                 switch-on-text="{{ 'app.shared.buttons.yes' | translate}}"
                 switch-off-text="{{ 'app.shared.buttons.no' | translate}}"
                 switch-animate="true"
                 switch-readonly="{{slot.isValid}}"/>
        </div>
        <div class="alert alert-warning m-t-sm m-b-none" ng-show="slot.plan_ids.length > 0">
          <div ng-show="slot.plansGrouped.length > 0">
            <div class="font-sbold text-u-c" translate>{{ 'app.shared.cart.slot_restrict_plans' }}</div>
            <div ng-repeat="group in slot.plansGrouped">
              <div class="font-sbold">{{::group.name}}</div>
              <ul class="m-n" ng-repeat="plan in group.plans">
                <li>{{::plan.name}}</li>
              </ul>
            </div>
          </div>
          <div ng-show="slot.plansGrouped.length === 0">
            <div class="font-sbold text-u-c" translate>{{ 'app.shared.cart.slot_restrict_plans_of_others_groups' }}</div>
          </div>
        </div>
      </div>
      <div ng-hide="slot.plan_ids.length > 0 && slot.plansGrouped.length === 0">
        <button class="btn btn-valid btn-warning btn-block text-u-c r-b" ng-click="validateSlot(slot)" ng-if="!slot.isValid" translate>{{ 'app.shared.cart.confirm_this_slot' }}</button>
      </div>

      <div class="clear"><a class="pull-right m-b-sm text-u-l ng-scope m-r-sm pointer" ng-click="removeSlot(slot, $index, $event)" ng-if="slot.isValid" translate>{{ 'app.shared.cart.remove_this_slot' }}</a></div>
    </div>

    <coupon show="isSlotsValid() && (!modePlans || selectedPlan)" coupon="coupon.applied" total="totalNoCoupon" user-id="{{user.id}}"></coupon>

    <div ng-show="$root.modules.plans">
      <div ng-if="isSlotsValid() && !user.subscribed_plan" ng-show="!modePlans">
        <p class="font-sbold text-base l-h-2x" translate>{{ 'app.shared.cart.to_benefit_from_attractive_prices' }}</p>
        <div><button class="btn btn-warning-full rounded btn-block text-xs" ng-click="showPlans()" translate>{{ 'app.shared.cart.view_our_subscriptions' }}</button></div>
        <p class="font-bold text-base text-u-c text-center m-b-xs" translate>{{ 'app.shared.cart.or' }}</p>
      </div>

      <div ng-if="selectedPlan">
        <div class="m-t-md m-b-sm text-base" translate>{{ 'app.shared.cart.you_ve_just_selected_a_subscription_html' }}</div>
        <div class="panel panel-default bg-light m-n">
          <div class="panel-body m-b-md">
            <div class="font-sbold text-u-c">{{selectedPlan | humanReadablePlanName }}</div>
            <div class="text-base">{{ 'app.shared.cart.cost_of_the_subscription' | translate }} <span class="text-blue">{{selectedPlan.amount | currency}}</span></div>
          </div>
        </div>
        <select-schedule show="selectedPlan.monthly_payment" selected="schedule.requested_schedule" on-change="togglePaymentSchedule" />
      </div>
    </div>

  </div>

  <div class="widget-content no-bg auto wrapper" ng-if="selectedPlan && !events.reserved">
    <span translate>{{ 'app.shared.cart.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.shared.cart.subscription_price' | translate }} {{selectedPlan.amount | currency}}</div>
    </div>

    <coupon show="!user.subscribed_plan" coupon="coupon.applied" total="totalNoCoupon" user-id="{{user.id}}"></coupon>
    <select-schedule show="selectedPlan.monthly_payment" selected="schedule.requested_schedule" on-change="togglePaymentSchedule" />
  </div>

  <div ng-if="schedule.payment_schedule">
    <payment-schedule-summary schedule="schedule.payment_schedule"></payment-schedule-summary>
  </div>

  <div class="widget-footer no-padder" ng-if="events.reserved.length > 0 || (selectedPlan && !events.reserved)">
    <button class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-click="payCart()" ng-if="isSlotsValid() && (!modePlans || selectedPlan)">{{ 'app.shared.cart.confirm_and_pay' | translate }} {{amountTotal | currency}}</button>
  </div>

  <div class="widget-content no-bg auto wrapper" ng-show="events.paid && events.paid.length > 0">
    {{ 'app.shared.cart.you_have_settled_the_following_TYPE' | translate:{TYPE:reservableType} }} <strong>{{reservableName}}</strong>:

    <div class="well well-warning m-t-sm" ng-repeat="paidSlot in events.paid">
      <i class="font-sbold text-u-c">{{ 'app.shared.cart.datetime_to_time' | translate:{START_DATETIME:(paidSlot.start | amDateFormat:'LLLL'), END_TIME:(paidSlot.end | amDateFormat:'LT') } }}</i>
      <div class="font-sbold">{{ 'app.shared.cart.cost_of_TYPE' | translate:{TYPE:reservableType} }} {{paidSlot.price | currency}}</div>
    </div>

    <div ng-if="selectedPlan">
      <div class="m-t-md m-b-sm text-base">{{ 'app.shared.cart.you_have_settled_a_' | translate }} <br> <span class="font-sbold" translate>{{ 'app.shared.cart._subscription' }}</span> :</div>
      <div class="well well-warning m-t-sm">
        <i class="font-sbold  text-u-c">{{selectedPlan | humanReadablePlanName }}</i>
        <div class="font-sbold">{{ 'app.shared.cart.cost_of_the_subscription' | translate }} {{selectedPlan.amount | currency}}</div>
      </div>
    </div>

    <div class="m-t-md font-sbold">{{ 'app.shared.cart.total_' | translate }} {{amountPaid | currency}}</div>

    <div class="alert alert-success" ng-if="user.subscribed_plan">{{ 'app.shared.cart.thank_you_your_payment_has_been_successfully_registered' | translate }}<br>
      {{ 'app.shared.cart.your_invoice_will_be_available_soon_from_your_' | translate }} <a ui-sref="app.logged.dashboard.invoices" translate>{{ 'app.shared.cart.dashboard' }}</a>
    </div>

  </div>
</div>


<div class="widget panel b-a m m-t-lg" ng-if="events.modifiable || events.moved">
  <div class="panel-heading b-b small">
    <h3 translate>{{ 'app.shared.cart.summary' }}</h3>
  </div>
  <div class="widget-content no-bg auto wrapper" ng-if="events.modifiable">
    <div class="font-sbold m-b-sm " translate>{{ 'app.shared.cart.i_want_to_change_the_following_reservation' }}</div>

    <div class="panel panel-warning bg-yellow">
      <div class="panel-body">
        <div class="font-sbold text-u-c">{{ 'app.shared.cart.datetime_to_time' | translate:{START_DATETIME:(events.modifiable.start | amDateFormat:'LLLL'), END_TIME:(events.modifiable.end | amDateFormat:'LT') } }}</div>
      </div>
      <div class="clear"><a class="pull-right m-b-sm text-u-l ng-scope m-r-sm" href="#" ng-click="cancelModifySlot($event)" translate>{{ 'app.shared.cart.cancel_my_modification' }}</a></div>
    </div>

    <div class="widget-content no-bg">
      <p class="font-felt fleche-left text-lg"><img src="../../images/arrow-left.png" class="fleche-left visible-lg" />
        {{ 'app.shared.cart.select_a_new_slot_in_the_calendar' | translate }}</p>
    </div>

    <div class="panel panel-info bg-info text-white" ng-if="events.placable">
      <div class="panel-body">
        <div class="font-sbold text-u-c">{{ 'app.shared.cart.datetime_to_time' | translate:{START_DATETIME:(events.placable.start | amDateFormat:'LLLL'), END_TIME:(events.placable.end | amDateFormat:'LT') } }}</div>
      </div>
      <div class="clear"><a class="pull-right m-b-sm text-u-l ng-scope m-r-sm" href="#" ng-click="removeSlotToPlace($event)" translate>{{ 'app.shared.cart.cancel_my_selection' }}</a></div>
    </div>

    <div ng-if="events.placable && (events.modifiable.tags.length > 0 || events.placable.tags.length > 0)" ng-class="{'panel panel-danger bg-red': tagMissmatch()}">
      <div class="panel-body">
        <div id="fromTags">
          {{ 'app.shared.cart.tags_of_the_original_slot' | translate }}<br/>
          <span ng-repeat="tag in events.modifiable.tags">
            <span class='label label-success text-white' title="{{tag.name}}">{{tag.name}}</span>
          </span>
          <span ng-show="events.modifiable.tags.length == 0">
            <span class='label label-warning text-white' title="{{ 'app.shared.cart.none' | translate }}" translate>{{ 'app.shared.cart.none' }}</span>
          </span>
        </div><br/>
        <div id="toTags">
          {{ 'app.shared.cart.tags_of_the_destination_slot' | translate }}<br/>
          <span ng-repeat="tag in events.placable.tags">
            <span class='label label-success text-white' title="{{tag.name}}">{{tag.name}}</span>
          </span>
          <span ng-show="events.placable.tags.length == 0">
            <span class='label label-warning text-white' title="{{ 'app.shared.cart.none' | translate }}" translate>{{ 'app.shared.cart.none' }}</span>
          </span>
        </div>
      </div>
    </div>
  </div>


  <div class="panel-footer no-padder" ng-if="events.modifiable && events.placable">
    <button class="btn btn-invalid btn-default btn-block p-l btn-lg text-u-c r-n text-base" ng-click="cancelModifySlot()" translate>{{ 'app.shared.buttons.cancel' }}</button>
    <div>
      <button class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-click="modifySlot()" translate>{{ 'app.shared.cart.confirm_my_modification' }}</button>
    </div>
  </div>

  <div class="widget-content no-bg auto wrapper" ng-show="events.moved">
    <div class="font-sbold m-b-sm " translate>{{ 'app.shared.cart.your_booking_slot_was_successfully_moved_from_' }}</div>

    <div class="panel panel-default bg-light">
      <div class="panel-body">
        <div class="font-sbold text-u-c">{{ 'app.shared.cart.datetime_to_time' | translate:{START_DATETIME:(events.moved.oldSlot.start | amDateFormat:'LLLL'), END_TIME:(events.moved.oldSlot.end | amDateFormat:'LT') } }}</div>
      </div>
    </div>

    <p class="text-center font-bold m-b-sm text-u-c" translate>{{ 'app.shared.cart.to_date' }}</p>

    <div class="panel panel-success bg-success bg-light">
      <div class="panel-body">
        <div class="font-sbold text-u-c">{{ 'app.shared.cart.datetime_to_time' | translate:{START_DATETIME:(events.moved.newSlot.start | amDateFormat:'LLLL'), END_TIME:(events.moved.newSlot.end | amDateFormat:'LT') } }}</div>
      </div>
    </div>
  </div>

</div>
<div ng-if="stripe.showModal">
  <stripe-modal is-open="stripe.showModal"
                toggle-modal="toggleStripeModal"
                after-success="afterStripeSuccess"
                cart-items="stripe.cartItems"
                current-user="currentUser"
                customer="user"
                schedule="schedule.payment_schedule"/>
</div>