Skip to content

Commit 837bcf9

Browse files
DinamikoDinamiko
authored
Merge pull request #3625 from woocommerce/PCP-5050-fastlane-placeholder
Update Fastlane card placeholder design (5050)
2 parents 1482f56 + 11299d7 commit 837bcf9

File tree

4 files changed

+114
-110
lines changed

4 files changed

+114
-110
lines changed

‎modules/ppcp-axo-block/resources/css/gateway.scss‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,51 +49,68 @@ $fast-transition-duration: 0.5s;
4949
&__content {
5050
position: relative;
5151
box-sizing: border-box;
52-
aspect-ratio: 1.586;
5352
margin: 1em 0;
5453
border-radius: 10px;
5554
width: 100%;
56-
box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .2666666667);
57-
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.0666666667), rgba(204, 204, 204, 0.0666666667) 65%, rgba(255, 255, 255, 0.4) 68%, rgba(255, 255, 255, 0));
58-
border: 2px solid #ccc;
59-
background-color: #f6f6f6;
55+
background-color: #F8F9FA;
56+
border: 2px solid #ECEEF2;
6057
}
6158

6259
&__meta {
6360
width: 100%;
6461
text-align: left;
62+
padding: 15px;
63+
display: flex;
64+
gap: 15px;
6565

6666
&-digits {
67-
margin-top: 76px;
68-
font-size: 24px;
69-
text-shadow: 0 -1px 1px #fff, 0 1px 1px rgba(0, 0, 0, .2666666667);
67+
font-size: 18px;
68+
line-height: 1em;
7069
color: #666;
71-
text-align: center;
7270
font-family: monospace;
71+
font-weight: bold;
72+
width: 100%;
7373
}
7474

7575
&-logo {
76-
position: absolute;
77-
right: 32px;
78-
top: 32px;
79-
height: 40px;
80-
}
76+
width: 60px;
77+
align-self: center;
78+
flex-grow: 1;
79+
flex-shrink: 0;
8180

82-
&-expiry {
83-
text-align: right;
84-
font-size: 14px;
85-
padding-right: 32px;
81+
img {
82+
max-width: 100%;
83+
display: block;
84+
margin: 0;
85+
}
8686
}
8787

8888
&-name {
89-
text-transform: uppercase;
90-
position: absolute;
91-
left: 24px;
92-
bottom: 20px;
89+
padding-right: 20px;
90+
position: relative;
91+
&::after {
92+
content: "•";
93+
position: absolute;
94+
right: 10px;
95+
transform: translateX(50%);
96+
color: #6d6d6d;
97+
}
98+
}
99+
100+
&-name,
101+
&-expiry {
102+
font-size: 16px;
93103
line-height: 1em;
104+
color: #6d6d6d;
94105
}
95106
}
96107

108+
&__meta-container {
109+
display: flex;
110+
flex-wrap: wrap;
111+
row-gap: .5em;
112+
}
113+
97114
&__edit {
98115
flex-grow: 1;
99116
margin-left: auto;
@@ -112,10 +129,6 @@ $fast-transition-duration: 0.5s;
112129
}
113130
}
114131

115-
.wc-block-axo-block-card__meta-icon {
116-
max-height: 25px;
117-
}
118-
119132
// 3. Express Payment Block
120133
.wc-block-components-express-payment--checkout, .wp-block-woocommerce-checkout-express-payment-block {
121134
transition: opacity $transition-duration ease-in,

‎modules/ppcp-axo-block/resources/js/components/Card/Card.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,16 @@ const Card = ( { fastlaneSdk, showWatermark = true } ) => {
4848
<div className="wc-block-checkout-axo-block-card__meta-logo">
4949
{ cardLogo }
5050
</div>
51-
<div className="wc-block-checkout-axo-block-card__meta-digits">
52-
{ `**** **** **** ${ lastDigits }` }
53-
</div>
54-
<div className="wc-block-checkout-axo-block-card__meta-expiry">
55-
{ formattedExpiry }
56-
</div>
57-
<div className="wc-block-checkout-axo-block-card__meta-name">
58-
{ name }
51+
<div className="wc-block-checkout-axo-block-card__meta-container">
52+
<div className="wc-block-checkout-axo-block-card__meta-digits">
53+
{ `•••• ${ lastDigits }` }
54+
</div>
55+
<div className="wc-block-checkout-axo-block-card__meta-name">
56+
{ name }
57+
</div>
58+
<div className="wc-block-checkout-axo-block-card__meta-expiry">
59+
{ formattedExpiry }
60+
</div>
5961
</div>
6062
</div>
6163
</div>

‎modules/ppcp-axo/resources/css/styles.scss‎

Lines changed: 50 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101

102102
.axo-checkout-wrapper {
103103
margin-bottom: 20px;
104+
padding: 0 10px;
104105

105106
.axo-checkout-header-section {
106107
display: flex;
@@ -109,82 +110,66 @@
109110
margin-bottom: 1em;
110111
}
111112

112-
.axo-checkout-card-preview {
113-
border: 2px solid #cccccc;
114-
border-radius: 10px;
115-
padding: 16px 20px;
116-
background-color: #f6f6f6;
117-
}
118-
119-
.ppcp-card-icon-wrapper {
120-
float: right;
121-
}
122-
123-
.ppcp-card-icon {
124-
width: auto;
125-
height: 25px;
126-
}
127-
128-
.axo-card-number {
129-
font-family: monospace;
130-
font-size: 1rem;
131-
margin-top: 10px;
132-
}
133-
134-
.axo-card-owner {
135-
text-transform: uppercase;
136-
}
137113

138114
.styled-card {
139115
position: relative;
140-
width: 100%;
141-
max-width: 340px;
142-
height: 210px;
143-
margin: 0 auto;
144-
box-shadow: 0 3px 10px -3px #0004;
145-
background-image: linear-gradient(60deg, #0001, #ccc1 65%, #fff6 68%, #fff0);
146116
box-sizing: border-box;
147-
padding: 0;
117+
margin: 1em 0;
118+
border-radius: 10px;
119+
width: 100%;
120+
max-width: 350px;
121+
background-color: #F8F9FA;
122+
border: 2px solid #ECEEFE;
123+
text-align: left;
124+
padding: 15px;
125+
display: flex;
126+
gap: 15px;
148127

149128
.ppcp-card-icon-wrapper {
150-
position: absolute;
151-
right: 32px;
152-
top: 32px;
153-
height: 40px;
154-
}
155-
156-
.axo-card-number {
157-
margin-top: 76px;
158-
font-size: 24px;
159-
text-shadow: 0 -1px 1px #fff, 0 1px 1px #0004;
160-
color: #666;
161-
text-align: center;
129+
width: 60px;
130+
align-self: center;
131+
flex-grow: 1;
132+
flex-shrink: 0;
133+
134+
img {
135+
max-width: 100%;
136+
display: block;
137+
margin: 0!important;
138+
}
162139
}
163140

164-
.axo-card-expiry {
165-
font-size: 14px;
166-
padding-right: 32px;
167-
text-align: right;
141+
.axo-card-meta-wrapper {
142+
display: flex;
143+
flex-wrap: wrap;
144+
row-gap: .5em;
168145
}
169146

170-
.axo-card-owner {
171-
position: absolute;
172-
left: 24px;
173-
bottom: 20px;
147+
.axo-card-number {
148+
font-size: 18px;
174149
line-height: 1em;
150+
color: #666;
151+
font-family: monospace;
152+
font-weight: bold;
153+
width: 100%;
175154
}
176155

177-
@media (max-width: 480px) {
178-
.axo-card-number {
179-
font-size: 20px;
180-
text-align: left;
181-
padding-left: 20px;
156+
.axo-card-owner {
157+
padding-right: 20px;
158+
position: relative;
159+
&::after {
160+
content: "•";
161+
position: absolute;
162+
right: 10px;
163+
transform: translateX(50%);
164+
color: #6d6d6d;
182165
}
183166
}
184-
@media (max-width: 360px) {
185-
.axo-card-number {
186-
font-size: 16px;
187-
}
167+
168+
.axo-card-owner,
169+
.axo-card-expiry{
170+
font-size: 16px;
171+
color: #6d6d6d;
172+
line-height: 1em;
188173
}
189174
}
190175
}
@@ -227,10 +212,11 @@
227212
float: none;
228213
vertical-align: middle;
229214
}
215+
}
230216

231-
.ppcp-card-icon {
232-
max-height: 25px;
233-
}
217+
#payment .payment_methods li.payment_method_ppcp-axo-gateway .ppcp-card-icon {
218+
float: none;
219+
max-height: initial
234220
}
235221

236222
@media screen and (max-width: 719px) {

‎modules/ppcp-axo/resources/js/Views/CardView.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,21 @@ class CardView {
5555
alt="${ data.value( 'brand' ) }"
5656
>
5757
</div>
58-
<div class="axo-card-number">${
59-
data.value( 'lastDigits' )
60-
? '**** **** **** ' +
61-
data.value( 'lastDigits' )
62-
: ''
63-
}</div>
64-
<div class="axo-card-expiry">${ expiry[ 1 ] }/${
65-
expiry[ 0 ]
66-
}</div>
67-
<div class="axo-card-owner">${ data.value(
68-
'name'
69-
) }</div>
58+
<div class="axo-card-meta-wrapper">
59+
<div class="axo-card-number">${
60+
data.value( 'lastDigits' )
61+
? '•••• ' + data.value( 'lastDigits' )
62+
: ''
63+
}</div>
64+
<div class="axo-card-owner">${ data.value(
65+
'name'
66+
) }</div>
67+
<div class="axo-card-expiry">${ expiry[ 1 ] }/${
68+
expiry[ 0 ]
69+
}</div>
70+
71+
</div>
72+
7073
</div>
7174
${ selectOtherPaymentMethod() }
7275
</div>

0 commit comments

Comments
 (0)