-
Notifications
You must be signed in to change notification settings - Fork 0
/
plasticsPage.template.html
167 lines (159 loc) · 10.8 KB
/
plasticsPage.template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<md-content flex="fill" layout="column">
<div layout="row" ng-show="plastics.loading" layout-align="center center" style="z-index:9000;position:absolute;width:100%;height:100%;top:0;left:0;background-color: rgba(255, 255, 255, 0.84);">
<md-progress-circular flex="none" md-mode="indeterminate"></md-progress-circular>
</div>
<!-- <div ng-show="!plastics.loading && !plastics.plastics" class="md-padding">
<strong>Nenhum cartão salvo.</strong> Aqui você gerencia os cartões salvos para utilização na loja.
</div> -->
<div flex="none" style="margin-top:8px"></div>
<div flex="none" class="md-padding md-caption" layout="row" layout-align="center end" ng-click="app.showSingleFAQ('22')"> <span><md-icon md-svg-icon="imgs/https.svg" class="svg-green" style="height: 1.5em;position:relative;top:-0.25em;"></md-icon>Você está em segurança. Saiba mais<md-icon md-svg-icon="imgs/info.svg" class="svg-lightgrey" style="height:1.5em;position:relative;top:-0.15em;"></md-icon></span> </div>
<md-divider></md-divider>
<!-- <div flex="none" class="" layout="row" layout-align="start center">
<md-button class="" ng-click="$state.go('storePage.offerPage')">
<md-icon md-svg-icon="imgs/arrow_left.svg" class="svg-black"></md-icon>
Voltar à Loja
</md-button>
</div>
<md-divider></md-divider> -->
<!-- <div flex="none" style="height:2em;"></div> -->
<!-- PLASTICS ELEMENT -->
<div flex="none" plastics-element>
<!-- DOCUMENT -->
<div ng-hide="app.auth.user.document">
<md-card flex="none" class="card-full md-padding background-white no-shadow" style="position:relative">
<div flex="none"> <strong>Adicionar Documento</strong>
<div class="md-caption">Antes de salvar seu primeito cartão, preencha seu CPF para a emissão de notas fiscais das compras realizadas.</div>
</div>
<form layout="column" name="documentForm">
<md-input-container flex class="no-errors">
<label>CPF</label>
<input type="tel" name="document" ng-model="plastics.document" validate-cpf minlength="11" maxlength="11" ng-required="true" required ng-blur="Keyboard.close()" />
<div ng-messages="documentForm.document.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'cpf']" class="ng-animate">Digite um CPF válido.</div>
</div>
</md-input-container>
</form>
<div flex="none" layout="row" ng-show="plastics.sendingDocument" layout-align="center center" style="z-index:9000;position:absolute;width:100%;height:100%;top:0;left:0;background-color: rgba(255, 255, 255, 0.84);">
<md-progress-circular flex="none" md-mode="indeterminate"></md-progress-circular>
</div>
</md-card>
<div flex="none" layout="row">
<md-button class="md-raised md-accent full-button" ng-click="plastics.saveDucument()" ng-disabled="documentForm.$invalid || plastics.sendingDocument">Próximo</md-button>
</div>
</div>
<!-- END DOCUMENT -->
<!-- CARDS GROUP -->
<div ng-show="app.auth.user.document">
<!-- CARDS -->
<div flex="none" class="md-padding"> <strong>Cartões de Crédito</strong>
<!-- <div class="md-caption" ng-show="plastics.plastics.length">Estes são seus cartões salvos. Eles estão seguros</div> -->
<div class="md-caption" ng-hide="plastics.plastics.length">Você não possui nenhum cartão salvo.</div>
</div>
<div ng-repeat="plastic in plastics.plastics track by plastic.path">
<md-card flex="none" layout="row" class="card-full card-credit md-padding no-shadow" ng-class="plastics.plastic.path == plastic.path ? 'background-white' : '' " style="margin-top:0px;position:relative;margin-bottom:0px !important">
<div flex layout="row" layout-align="center center" class="md-body"> ****{{plastic.object.mask}} </div>
<div flex layout="row" layout-align="start center" class="md-body"> {{plastic.object.expiry}} </div>
<div flex layout="row" layout-align="center center">
<md-button class="card-action md-caption" style="color:#FF6666" ng-click="plastics.remove(plastic);plastic.deleting=true">Apagar</md-button>
</div>
<div flex layout="row" layout-align="center center">
<md-button class="card-action" ng-class="plastics.plastic.path == plastic.path ? '' : 'md-accent'" ng-click="plastics.activate(plastic)" ng-disable="plastics.plastic.path == plastic.path"> {{plastics.plastic.path == plastic.path ? "Em Uso" : "Usar"}} </md-button>
</div>
<div layout="row" ng-show="plastic.deleting" layout-align="center center" style="z-index:9000;position:absolute;width:100%;height:100%;top:0;left:0;background-color: rgba(255, 255, 255, 0.84);">
<md-progress-circular flex="none" md-mode="indeterminate"></md-progress-circular>
</div>
</md-card>
</div>
<!-- END CARDS -->
<!-- NEW CARD -->
<md-card flex="none" class="card-full card-credit md-padding background-white no-shadow" style="position:relative;background-color:white;margin:0!important">
<div flex="none"> <strong>Adicionar Cartão</strong>
<div class="md-caption">Aceitamos cartões de crédito Visa e Mastercard.</div>
</div>
<form layout="column" name="plasticForm">
<md-input-container flex="none" class="no-errors">
<label>Número do Cartão</label>
<input type="tel" name="number" ng-model="plastics.new.number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class='creditForm.number.$card.type' ng-required="true" required/> </md-input-container>
<div flex="none" layout="row" layout-align="spacebetween center">
<md-input-container flex class="no-errors">
<label>Validade</label>
<input type="tel" ng-model="plastics.new.expiry" payments-validate="expiry" payments-format="expiry" ng-required="true" required/> </md-input-container>
<md-input-container flex class="no-errors">
<label>Código de Segurança</label>
<input type="tel" ng-model="plastics.new.cvc" payments-validate="cvc" payments-format="cvc" ng-required="true" required payments-type-model="type" /> </md-input-container>
</div>
</form>
<div flex="none" layout="row" ng-show="plastics.sending" layout-align="center center" style="z-index:9000;position:absolute;width:100%;height:100%;top:0;left:0;background-color: rgba(255, 255, 255, 0.84);">
<md-progress-circular flex="none" md-mode="indeterminate"></md-progress-circular>
</div>
</md-card>
<div flex="none" layout="row" style="background-color:white;margin:0!important">
<md-button class="md-raised md-accent full-button" ng-click="plastics.save()" ng-disabled="plasticForm.$invalid || plastics.sending">Adicionar Cartão</md-button>
</div>
<!-- END NEW CARD -->
</div>
<!-- END CARDS -->
</div>
<!-- END PLASTICS ELEMENT -->
<md-divider></md-divider>
<div flex="none" style="height:2em;"></div>
<!-- VOUCHERS ELEMENT -->
<div flex="none" vouchers-element>
<div flex="none">
<div flex="none" class="md-padding"> <strong>Cupons</strong>
<div class="md-caption" ng-hide="vouchers.vouchers.length">Você não possui nenhum coupon salvo.</div>
</div>
<div ng-repeat="voucher in vouchers.vouchers track by voucher.path" ng-if="!voucher.object.burns.burnt || voucher.object.burns.before_start || voucher.object.burns.blocked">
<md-card flex="none" layout="column" class="card-full md-padding no-shadow" style="margin-top:0px;position:relative;margin-bottom:0px !important">
<div flex layout="row" layout-align="start center">
<div flex="none">
<md-icon flex="none" md-svg-icon="imgs/whatshot.svg" ng-class="voucher.object.burns.burnt ? 'svg-lightgrey' : 'svg-red'" style="height: 1.5em;position:relative;top:0em;padding:0"></md-icon>
</div>
<div flex class="md-caption" ng-class="voucher.object.burns.burnt ? 'voucher-bad' : 'voucher-good'"> {{voucher.object.description}} </div>
<div flex="none">
<md-button flex="none" class="card-action" ng-class="vouchers.active == voucher ? '' : 'md-accent'" ng-click="vouchers.activate(voucher)" ng-disable="vouchers.active == voucher" ng-show="!voucher.object.burns.burnt"> {{vouchers.active == voucher ? "Em Uso" : "Usar"}} </md-button>
</div>
</div>
<div flex layout="row" layout-align="start center" ng-show="voucher.object.burns.before_start">
<md-icon flex="none" md-svg-icon="imgs/alarm.svg" class="svg-green" style="height: 1em;position:relative;top:0em;padding:0"></md-icon>
<div flex class="md-caption">Início: {{voucher.object.start | date : 'dd/MM/yyyy'}}</div>
</div>
<div flex layout="row" layout-align="start center" ng-show="voucher.object.burns.blocked">
<md-icon flex="none" md-svg-icon="imgs/alarm.svg" class="svg-green" style="height: 1em;position:relative;top:0em;padding:0"></md-icon>
<div flex class="md-caption">Seu amigo ainda não usou o cupom dele.</div>
</div>
<!-- <span ng-show="voucher.object.value_available > 0" class="md-caption">Valor disponível: {{voucher.object.value_available | currency}}</span> --></div>
</md-card>
</div>
<!-- NEW VOUCHER -->
<md-card flex="none" class="card-full md-padding no-shadow" style="position:relative;background-color:white;margin:0!important">
<div flex="none"> <strong>Adicionar Cupom</strong>
<div class="md-caption">Garanta promoções especiais.</div>
</div>
<form layout="column" name="voucherForm">
<md-input-container flex="none" class="no-errors">
<label>Código do Cupom</label>
<input name="code" ng-model="vouchers.code" ng-required="true" required minlength="8" maxlength="16" ng-blur="Keyboard.close()" />
<div ng-messages="voucherForm.code.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength']" class="ng-animate">Nossos códigos possuem pelo menos 8 caracteres.</div>
</div>
</md-input-container>
</form>
<div flex="none" layout="row" ng-show="vouchers.sending" layout-align="center center" style="z-index:9000;position:absolute;width:100%;height:100%;top:0;left:0;background-color: rgba(255, 255, 255, 0.84);">
<md-progress-circular flex="none" md-mode="indeterminate"></md-progress-circular>
</div>
</md-card>
<div flex="none" layout="row" style="background-color:white;margin:0!important">
<md-button class="md-raised md-accent full-button" ng-click="vouchers.save()" ng-disabled="voucherForm.$invalid || vouchers.sending">Adicionar Cupom</md-button>
</div>
<md-divider></md-divider>
<div class="md-padding"> <strong>Indique e ganhe cupons!</strong>
<div class="profilecode md-whiteframe-1dp"><center>{{app.auth.user.code}}</center></div>
<div class="md-caption" ng-click="app.showSingleFAQ('22')">
Passe este código para seus amigos. Eles ganharão cupons de desconto de R$20,00 e, quando os utilizarem, você também terá vários cupons de R$20,00!
Saiba mais<md-icon md-svg-icon="imgs/info.svg" class="svg-lightgrey" style="height:1.5em;position:relative;top:-0.15em;"></md-icon>
</div>
</div>
</div>
<!-- END VOUCHERS ELEMENT -->
</md-content>