1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-20 14:54:15 +01:00

[ongoing] move payment to cart component

This commit is contained in:
Sylvain 2017-02-20 17:17:27 +01:00
parent 9b7f74e02d
commit 85572a03db
4 changed files with 215 additions and 362 deletions

View File

@ -466,62 +466,6 @@ Application.Controllers.controller "ReserveMachineController", ["$scope", "$stat
$scope.selectedPlan = null
Member.get {id: $scope.ctrl.member.id}, (member) ->
$scope.ctrl.member = member
updateCartPrice()
##
# Add the provided slot to the shopping cart (state transition from free to 'about to be reserved')
# and increment the total amount of the cart if needed.
# @param machineSlot {Object} fullCalendar event object
##
$scope.validMachineSlot = (machineSlot)->
machineSlot.isValid = true
updateCartPrice()
##
# Remove the provided slot from the shopping cart (state transition from 'about to be reserved' to free)
# and decrement the total amount of the cart if needed.
# @param machineSlot {Object} fullCalendar event object
# @param e {Object} see https://docs.angularjs.org/guide/expression#-event-
##
$scope.removeMachineSlot = (machineSlot, e)->
e.preventDefault() if e
machineSlot.backgroundColor = 'white'
machineSlot.borderColor = FREE_SLOT_BORDER_COLOR
machineSlot.title = ''
machineSlot.isValid = false
if machineSlot.machine.is_reduced_amount
angular.forEach $scope.ctrl.member.machine_credits, (credit)->
if credit.machine_id = machineSlot.machine.id
credit.hours_used--
machineSlot.machine.is_reduced_amount = false
index = $scope.eventsReserved.indexOf(machineSlot)
$scope.eventsReserved.splice(index, 1)
if $scope.eventsReserved.length == 0
if $scope.plansAreShown
$scope.selectedPlan = null
$scope.plansAreShown = false
updateCartPrice()
$timeout ->
uiCalendarConfig.calendars.calendar.fullCalendar 'refetchEvents'
uiCalendarConfig.calendars.calendar.fullCalendar 'rerenderEvents'
##
# Checks that every selected slots were added to the shopping cart. Ie. will return false if
# any checked slot was not validated by the user.
##
$scope.machineSlotsValid = ->
isValid = true
angular.forEach $scope.eventsReserved, (m)->
isValid = false if !m.isValid
isValid
@ -536,27 +480,6 @@ Application.Controllers.controller "ReserveMachineController", ["$scope", "$stat
##
# Validates the shopping chart and redirect the user to the payment step
##
$scope.payMachine = ->
# first, we check that a user was selected
if Object.keys($scope.ctrl.member).length > 0
reservation = mkReservation($scope.ctrl.member, $scope.eventsReserved, $scope.selectedPlan)
Wallet.getWalletByUser {user_id: $scope.ctrl.member.id}, (wallet) ->
amountToPay = helpers.getAmountToPay($scope.amountTotal, wallet.amount)
if $scope.currentUser.role isnt 'admin' and amountToPay > 0
payByStripe(reservation)
else
if $scope.currentUser.role is 'admin' or amountToPay is 0
payOnSite(reservation)
else
# otherwise we alert, this error musn't occur when the current user is not admin
growl.error(_t('please_select_a_member_first'))
##
# Switch the user's view from the reservation agenda to the plan subscription
##
@ -589,15 +512,53 @@ Application.Controllers.controller "ReserveMachineController", ["$scope", "$stat
return true
false
$scope.updateCalendar = ->
uiCalendarConfig.calendars.calendar.fullCalendar 'rerenderEvents'
$scope.refetchCalendar = ->
$timeout ->
uiCalendarConfig.calendars.calendar.fullCalendar 'refetchEvents'
uiCalendarConfig.calendars.calendar.fullCalendar 'rerenderEvents'
##
# Once the reservation is booked (payment process successfully completed), change the event style
# in fullCalendar, update the user's subscription and free-credits if needed
# @param reservation {Object}
##
$scope.afterPayment = (reservation)->
angular.forEach $scope.eventsReserved, (machineSlot, key) ->
machineSlot.is_reserved = true
machineSlot.can_modify = true
if $scope.currentUser.role isnt 'admin'
machineSlot.title = _t('i_ve_reserved')
machineSlot.borderColor = BOOKED_SLOT_BORDER_COLOR
updateMachineSlot(machineSlot, reservation, $scope.currentUser)
else
machineSlot.title = _t('not_available')
machineSlot.borderColor = UNAVAILABLE_SLOT_BORDER_COLOR
updateMachineSlot(machineSlot, reservation, $scope.ctrl.member)
machineSlot.backgroundColor = 'white'
$scope.paidMachineSlots = $scope.eventsReserved
$scope.eventsReserved = []
$scope.coupon.applied = null
if $scope.selectedPlan
$scope.ctrl.member.subscribed_plan = angular.copy($scope.selectedPlan)
Auth._currentUser.subscribed_plan = angular.copy($scope.selectedPlan)
$scope.plansAreShown = false
uiCalendarConfig.calendars.calendar.fullCalendar 'refetchEvents'
uiCalendarConfig.calendars.calendar.fullCalendar 'rerenderEvents'
### PRIVATE SCOPE ###
##
@ -612,75 +573,6 @@ Application.Controllers.controller "ReserveMachineController", ["$scope", "$stat
if $scope.currentUser.role isnt 'admin'
$scope.ctrl.member = $scope.currentUser
# watch when a coupon is applied to re-compute the total price
$scope.$watch 'coupon.applied', (newValue, oldValue) ->
unless newValue == null and oldValue == null
updateCartPrice()
##
# Create an hash map implementing the Reservation specs
# @param member {Object} User as retreived from the API: current user / selected user if current is admin
# @param slots {Array<Object>} Array of fullCalendar events: slots selected on the calendar
# @param [plan] {Object} Plan as retrived from the API: plan to buy with the current reservation
# @return {{user_id:Number, reservable_id:Number, reservable_type:String, slots_attributes:Array<Object>, plan_id:Number|null}}
##
mkReservation = (member, slots, plan = null) ->
reservation =
user_id: member.id
reservable_id: (slots[0].machine.id if slots.length > 0)
reservable_type: 'Machine'
slots_attributes: []
plan_id: (plan.id if plan)
angular.forEach slots, (slot, key) ->
reservation.slots_attributes.push
start_at: slot.start
end_at: slot.end
availability_id: slot.availability_id
offered: slot.offered || false
reservation
##
# Format the parameters expected by /api/prices/compute or /api/reservations and return the resulting object
# @param reservation {Object} as returned by mkReservation()
# @param coupon {Object} Coupon as returned from the API
# @return {{reservation:Object, coupon_code:string}}
##
mkRequestParams = (reservation, coupon) ->
params =
reservation: reservation
coupon_code: (coupon.code if coupon)
params
##
# Update the total price of the current selection/reservation
##
updateCartPrice = ->
if Object.keys($scope.ctrl.member).length > 0
r = mkReservation($scope.ctrl.member, $scope.eventsReserved, $scope.selectedPlan)
Price.compute mkRequestParams(r, $scope.coupon.applied), (res) ->
$scope.amountTotal = res.price
$scope.totalNoCoupon = res.price_without_coupon
setSlotsDetails(res.details)
else
# otherwise we alert, this error musn't occur when the current user is not admin
growl.warning(_t('please_select_a_member_first'))
$scope.amountTotal = null
setSlotsDetails = (details) ->
angular.forEach $scope.eventsReserved, (slot) ->
angular.forEach details.slots, (s) ->
if moment(s.start_at).isSame(slot.start)
slot.promo = s.promo
slot.price = s.price
##
@ -711,201 +603,6 @@ Application.Controllers.controller "ReserveMachineController", ["$scope", "$stat
##
# Open a modal window that allows the user to process a credit card payment for his current shopping cart.
##
payByStripe = (reservation) ->
$uibModal.open
templateUrl: '<%= asset_path "stripe/payment_modal.html" %>'
size: 'md'
resolve:
reservation: ->
reservation
price: ->
Price.compute(mkRequestParams(reservation, $scope.coupon.applied)).$promise
wallet: ->
Wallet.getWalletByUser({user_id: reservation.user_id}).$promise
cgv: ->
CustomAsset.get({name: 'cgv-file'}).$promise
coupon: ->
$scope.coupon.applied
controller: ['$scope', '$uibModalInstance', '$state', 'reservation', 'price', 'cgv', 'Auth', 'Reservation', 'wallet', 'helpers', '$filter', 'coupon',
($scope, $uibModalInstance, $state, reservation, price, cgv, Auth, Reservation, wallet, helpers, $filter, coupon) ->
# user wallet amount
$scope.walletAmount = wallet.amount
# Price
$scope.amount = helpers.getAmountToPay(price.price, wallet.amount)
# CGV
$scope.cgv = cgv.custom_asset
# Reservation
$scope.reservation = reservation
# Used in wallet info template to interpolate some translations
$scope.numberFilter = $filter('number')
##
# Callback to process the payment with Stripe, triggered on button click
##
$scope.payment = (status, response) ->
if response.error
growl.error(response.error.message)
else
$scope.attempting = true
$scope.reservation.card_token = response.id
Reservation.save mkRequestParams($scope.reservation, coupon), (reservation) ->
$uibModalInstance.close(reservation)
, (response)->
$scope.alerts = []
if response.status == 500
$scope.alerts.push
msg: response.statusText
type: 'danger'
else
if response.data.card and response.data.card.join('').length > 0
$scope.alerts.push
msg: response.data.card.join('. ')
type: 'danger'
else if response.data.payment and response.data.payment.join('').length > 0
$scope.alerts.push
msg: response.data.payment.join('. ')
type: 'danger'
$scope.attempting = false
]
.result['finally'](null).then (reservation)->
afterPayment(reservation)
##
# Open a modal window that allows the user to process a local payment for his current shopping cart (admin only).
##
payOnSite = (reservation) ->
$uibModal.open
templateUrl: '<%= asset_path "shared/valid_reservation_modal.html" %>'
size: 'sm'
resolve:
reservation: ->
reservation
price: ->
Price.compute(mkRequestParams(reservation, $scope.coupon.applied)).$promise
wallet: ->
Wallet.getWalletByUser({user_id: reservation.user_id}).$promise
coupon: ->
$scope.coupon.applied
controller: ['$scope', '$uibModalInstance', '$state', 'reservation', 'price', 'Auth', 'Reservation', 'wallet', 'helpers', '$filter', 'coupon',
($scope, $uibModalInstance, $state, reservation, price, Auth, Reservation, wallet, helpers, $filter, coupon) ->
# user wallet amount
$scope.walletAmount = wallet.amount
# Global price (total of all items)
$scope.price = price.price
# Price to pay (wallet deducted)
$scope.amount = helpers.getAmountToPay(price.price, wallet.amount)
# Reservation
$scope.reservation = reservation
# Used in wallet info template to interpolate some translations
$scope.numberFilter = $filter('number')
# Button label
if $scope.amount > 0
$scope.validButtonName = _t('confirm_payment_of_html', {ROLE:$scope.currentUser.role, AMOUNT:$filter('currency')($scope.amount)}, "messageformat")
else
if price.price > 0 and $scope.walletAmount == 0
$scope.validButtonName = _t('confirm_payment_of_html', {ROLE:$scope.currentUser.role, AMOUNT:$filter('currency')(price.price)}, "messageformat")
else
$scope.validButtonName = _t('confirm')
##
# Callback to process the local payment, triggered on button click
##
$scope.ok = ->
$scope.attempting = true
Reservation.save mkRequestParams($scope.reservation, coupon), (reservation) ->
$uibModalInstance.close(reservation)
$scope.attempting = true
, (response)->
$scope.alerts = []
$scope.alerts.push({msg: _t('a_problem_occured_during_the_payment_process_please_try_again_later'), type: 'danger' })
$scope.attempting = false
$scope.cancel = ->
$uibModalInstance.dismiss('cancel')
]
.result['finally'](null).then (reservation)->
afterPayment(reservation)
##
# Determines if the provided booked slot is able to be modified by the user.
# @param slot {Object} fullCalendar event object
##
slotCanBeModified = (slot)->
return true if $scope.currentUser.role is 'admin'
slotStart = moment(slot.start)
now = moment()
if slot.can_modify and $scope.enableBookingMove and slotStart.diff(now, "hours") >= $scope.moveBookingDelay
return true
else
return false
##
# Determines if the provided booked slot is able to be canceled by the user.
# @param slot {Object} fullCalendar event object
##
slotCanBeCanceled = (slot) ->
return true if $scope.currentUser.role is 'admin'
slotStart = moment(slot.start)
now = moment()
if slot.can_modify and $scope.enableBookingCancel and slotStart.diff(now, "hours") >= $scope.cancelBookingDelay
return true
else
return false
##
# Once the reservation is booked (payment process successfully completed), change the event style
# in fullCalendar, update the user's subscription and free-credits if needed
# @param reservation {Object}
##
afterPayment = (reservation)->
angular.forEach $scope.eventsReserved, (machineSlot, key) ->
machineSlot.is_reserved = true
machineSlot.can_modify = true
if $scope.currentUser.role isnt 'admin'
machineSlot.title = _t('i_ve_reserved')
machineSlot.borderColor = BOOKED_SLOT_BORDER_COLOR
updateMachineSlot(machineSlot, reservation, $scope.currentUser)
else
machineSlot.title = _t('not_available')
machineSlot.borderColor = UNAVAILABLE_SLOT_BORDER_COLOR
updateMachineSlot(machineSlot, reservation, $scope.ctrl.member)
machineSlot.backgroundColor = 'white'
$scope.paidMachineSlots = $scope.eventsReserved
$scope.eventsReserved = []
$scope.coupon.applied = null
if $scope.selectedPlan
$scope.ctrl.member.subscribed_plan = angular.copy($scope.selectedPlan)
Auth._currentUser.subscribed_plan = angular.copy($scope.selectedPlan)
$scope.plansAreShown = false
uiCalendarConfig.calendars.calendar.fullCalendar 'refetchEvents'
uiCalendarConfig.calendars.calendar.fullCalendar 'rerenderEvents'
##
# After payment, update the id of the newly reserved slot with the id returned by the server.
# This will allow the user to modify the reservation he just booked. The associated user will also be registered
@ -922,18 +619,6 @@ Application.Controllers.controller "ReserveMachineController", ["$scope", "$stat
##
# Search for the requested plan in the provided array and return its price.
# @param plansArray {Array} full list of plans
# @param planId {Number} plan identifier
# @returns {Number|null} price of the given plan or null if not found
##
findAmountByPlanId = (plansArray, planId)->
for plan in plansArray
return plan.amount if plan.plan_id == planId
return null
## !!! MUST BE CALLED AT THE END of the controller
initialize()
]

View File

@ -10,27 +10,27 @@ UNAVAILABLE_SLOT_BORDER_COLOR = '<%= AvailabilityHelper::MACHINE_IS_RESERVED_BY_
BOOKED_SLOT_BORDER_COLOR = '<%= AvailabilityHelper::IS_RESERVED_BY_CURRENT_USER %>'
Application.Directives.directive 'cart', [ '$rootScope', 'dialogs', 'growl', 'Auth', 'Price', '_t', ($rootScope, dialogs, growl, Auth, Price, _t) ->
Application.Directives.directive 'cart', [ '$rootScope', '$uibModal', 'dialogs', 'growl', 'Auth', 'Price', 'Wallet', 'CustomAsset', 'helpers', '_t'
, ($rootScope, $uibModal, dialogs, growl, Auth, Price, Wallet, CustomAsset, helpers, _t) ->
{
restrict: 'E'
scope:
slot: '='
slotSelectionTime: '='
eventsReserved: '='
onUpdate: '='
onOutdated: '='
user: '='
modePlans: '='
plan: '='
planSelectionTime: '='
afterPayment: '='
templateUrl: '<%= asset_path "shared/_cart.html" %>'
link: ($scope, element, attributes) ->
## fullCalendar event. An already booked slot that the user want to modify
$scope.slotToModify = null
## array of fullCalendar events. Slots where the user want to book
$scope.eventsReserved = []
## fullCalendar event. The last selected slot that the user want to book
$scope.slotToPlace = null
@ -114,6 +114,25 @@ Application.Directives.directive 'cart', [ '$rootScope', 'dialogs', 'growl', 'Au
$scope.showPlans = ->
$scope.modePlans = true
##
# Validates the shopping chart and redirect the user to the payment step
##
$scope.payMachine = ->
# first, we check that a user was selected
if Object.keys($scope.user).length > 0
reservation = mkReservation($scope.user, $scope.eventsReserved, $scope.selectedPlan)
Wallet.getWalletByUser {user_id: $scope.user.id}, (wallet) ->
amountToPay = helpers.getAmountToPay($scope.amountTotal, wallet.amount)
if $rootScope.currentUser.role isnt 'admin' and amountToPay > 0
payByStripe(reservation)
else
if $rootScope.currentUser.role is 'admin' or amountToPay is 0
payOnSite(reservation)
else
# otherwise we alert, this error musn't occur when the current user is not admin
growl.error(_t('please_select_a_member_first'))
### PRIVATE SCOPE ###
@ -205,7 +224,23 @@ Application.Directives.directive 'cart', [ '$rootScope', 'dialogs', 'growl', 'Au
updateCartPrice()
##
# Determines if the provided booked slot is able to be modified by the user.
# @param slot {Object} fullCalendar event object
##
slotCanBeModified = (slot)->
return true if $rootScope.currentUser.role is 'admin'
slotStart = moment(slot.start)
now = moment()
if slot.can_modify and $scope.enableBookingMove and slotStart.diff(now, "hours") >= $scope.moveBookingDelay #FIXME
return true
else
return false
##
# Callback triggered when the selected slot changed
##
planSelectionChanged = ->
@ -285,7 +320,138 @@ Application.Directives.directive 'cart', [ '$rootScope', 'dialogs', 'growl', 'Au
## !!! MUST BE CALLED AT THE END of the directive
##
# Open a modal window that allows the user to process a credit card payment for his current shopping cart.
##
payByStripe = (reservation) ->
$uibModal.open
templateUrl: '<%= asset_path "stripe/payment_modal.html" %>'
size: 'md'
resolve:
reservation: ->
reservation
price: ->
Price.compute(mkRequestParams(reservation, $scope.coupon.applied)).$promise
wallet: ->
Wallet.getWalletByUser({user_id: reservation.user_id}).$promise
cgv: ->
CustomAsset.get({name: 'cgv-file'}).$promise
coupon: ->
$scope.coupon.applied
controller: ['$scope', '$uibModalInstance', '$state', 'reservation', 'price', 'cgv', 'Auth', 'Reservation', 'wallet', 'helpers', '$filter', 'coupon',
($scope, $uibModalInstance, $state, reservation, price, cgv, Auth, Reservation, wallet, helpers, $filter, coupon) ->
# user wallet amount
$scope.walletAmount = wallet.amount
# Price
$scope.amount = helpers.getAmountToPay(price.price, wallet.amount)
# CGV
$scope.cgv = cgv.custom_asset
# Reservation
$scope.reservation = reservation
# Used in wallet info template to interpolate some translations
$scope.numberFilter = $filter('number')
##
# Callback to process the payment with Stripe, triggered on button click
##
$scope.payment = (status, response) ->
if response.error
growl.error(response.error.message)
else
$scope.attempting = true
$scope.reservation.card_token = response.id
Reservation.save mkRequestParams($scope.reservation, coupon), (reservation) ->
$uibModalInstance.close(reservation)
, (response)->
$scope.alerts = []
if response.status == 500
$scope.alerts.push
msg: response.statusText
type: 'danger'
else
if response.data.card and response.data.card.join('').length > 0
$scope.alerts.push
msg: response.data.card.join('. ')
type: 'danger'
else if response.data.payment and response.data.payment.join('').length > 0
$scope.alerts.push
msg: response.data.payment.join('. ')
type: 'danger'
$scope.attempting = false
]
.result['finally'](null).then (reservation)->
$scope.afterPayment(reservation) if typeof $scope.afterPayment == 'function'
##
# Open a modal window that allows the user to process a local payment for his current shopping cart (admin only).
##
payOnSite = (reservation) ->
$uibModal.open
templateUrl: '<%= asset_path "shared/valid_reservation_modal.html" %>'
size: 'sm'
resolve:
reservation: ->
reservation
price: ->
Price.compute(mkRequestParams(reservation, $scope.coupon.applied)).$promise
wallet: ->
Wallet.getWalletByUser({user_id: reservation.user_id}).$promise
coupon: ->
$scope.coupon.applied
controller: ['$scope', '$uibModalInstance', '$state', 'reservation', 'price', 'Auth', 'Reservation', 'wallet', 'helpers', '$filter', 'coupon',
($scope, $uibModalInstance, $state, reservation, price, Auth, Reservation, wallet, helpers, $filter, coupon) ->
# user wallet amount
$scope.walletAmount = wallet.amount
# Global price (total of all items)
$scope.price = price.price
# Price to pay (wallet deducted)
$scope.amount = helpers.getAmountToPay(price.price, wallet.amount)
# Reservation
$scope.reservation = reservation
# Used in wallet info template to interpolate some translations
$scope.numberFilter = $filter('number')
# Button label
if $scope.amount > 0
$scope.validButtonName = _t('confirm_payment_of_html', {ROLE:$rootScope.currentUser.role, AMOUNT:$filter('currency')($scope.amount)}, "messageformat")
else
if price.price > 0 and $scope.walletAmount == 0
$scope.validButtonName = _t('confirm_payment_of_html', {ROLE:$rootScope.currentUser.role, AMOUNT:$filter('currency')(price.price)}, "messageformat")
else
$scope.validButtonName = _t('confirm')
##
# Callback to process the local payment, triggered on button click
##
$scope.ok = ->
$scope.attempting = true
Reservation.save mkRequestParams($scope.reservation, coupon), (reservation) ->
$uibModalInstance.close(reservation)
$scope.attempting = true
, (response)->
$scope.alerts = []
$scope.alerts.push({msg: _t('a_problem_occured_during_the_payment_process_please_try_again_later'), type: 'danger' })
$scope.attempting = false
$scope.cancel = ->
$uibModalInstance.dismiss('cancel')
]
.result['finally'](null).then (reservation)->
$scope.afterPayment(reservation) if typeof $scope.afterPayment == 'function'
## !!! MUST BE CALLED AT THE END of the directive
initialize()
}
]

View File

@ -42,12 +42,14 @@
<cart slot="selectedEvent"
slot-selection-time="selectionTime"
events-reserved="eventsReserved"
on-update="updateCalendar"
on-outdated="refetchCalendar"
user="ctrl.member"
mode-plans="plansAreShown"
plan="selectedPlan"
plan-selection-time="planSelectionTime"></cart>
plan-selection-time="planSelectionTime"
after-payment="afterPayment"></cart>
<uib-alert type="warning m">
<p class="text-sm">

View File

@ -36,10 +36,10 @@
<div class="clear"><a class="pull-right m-b-sm text-u-l ng-scope m-r-sm" href="#" ng-click="removeMachineSlot(machineSlot, $event)" ng-if="machineSlot.isValid" translate>{{ 'remove_this_slot' }}</a></div>
</div>
<coupon show="machineSlotsValid() && (!plansAreShown || selectedPlan)" coupon="coupon.applied" total="totalNoCoupon" user-id="{{user.id}}"></coupon>
<coupon show="machineSlotsValid() && (!modePlans || selectedPlan)" coupon="coupon.applied" total="totalNoCoupon" user-id="{{user.id}}"></coupon>
<span ng-hide="fablabWithoutPlans">
<div ng-if="machineSlotsValid() && !user.subscribed_plan" ng-show="!plansAreShown">
<div ng-if="machineSlotsValid() && !user.subscribed_plan" ng-show="!modePlans">
<p class="font-sbold text-base l-h-2x" translate>{{ 'to_benefit_from_attractive_prices' }}</p>
<div><button class="btn btn-warning-full rounded btn-block text-xs" ng-click="showPlans()" translate>{{ 'view_our_subscriptions' }}</button></div>
<p class="font-bold text-base text-u-c text-center m-b-xs" translate>{{ 'or' }}</p>
@ -59,7 +59,7 @@
</div>
<div class="panel-footer no-padder" ng-if="eventsReserved.length > 0">
<button class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-click="payMachine()" ng-if="machineSlotsValid() && (!plansAreShown || selectedPlan)">{{ 'confirm_and_pay' | translate }} {{amountTotal | currency}}</button>
<button class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-click="payMachine()" ng-if="machineSlotsValid() && (!modePlans || selectedPlan)">{{ 'confirm_and_pay' | translate }} {{amountTotal | currency}}</button>
</div>
<div class="widget-content no-bg auto wrapper" ng-if="paidMachineSlots">