Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the new payment method logos to the connect page #8977

Merged
merged 37 commits into from
Jul 18, 2024
Merged

Add the new payment method logos to the connect page #8977

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
3ead38b
Add the new payment method logos to the connect page
Jun 18, 2024
02d303e
change list key name
Jun 21, 2024
e07d488
change test snapshots
Jun 21, 2024
f879326
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jun 21, 2024
d856ba7
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jun 21, 2024
6dac2ce
change logos from js to svg files
Jun 24, 2024
af009a5
Merge remote-tracking branch 'refs/remotes/origin/add/8808-woo-paymen…
Jun 24, 2024
e31613c
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jun 24, 2024
b7e6326
add google pay icon
Jun 25, 2024
8792ead
update tests
Jun 25, 2024
70db966
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jun 25, 2024
0d88ca4
Optimise SVG assets
Jun 25, 2024
08325cc
remove icons that are not needed
Jun 26, 2024
a141688
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jun 26, 2024
9505361
add assets to svgs
Jul 1, 2024
5262e12
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jul 1, 2024
8485573
remove css style for mobile
Jul 2, 2024
16d81aa
Merge remote-tracking branch 'refs/remotes/origin/add/8808-woo-paymen…
Jul 2, 2024
6564ac2
change css structure
Jul 2, 2024
be665c6
fix css class name
Jul 2, 2024
bb4616e
Merge branch 'develop' into add/8808-woo-payment-method-logo
mordeth Jul 2, 2024
11a0695
remove unused payment methods
Jul 3, 2024
6140268
Merge remote-tracking branch 'refs/remotes/origin/add/8808-woo-paymen…
Jul 3, 2024
7bb483f
Merge branch 'develop' into add/8808-woo-payment-method-logo
mordeth Jul 3, 2024
b05ea90
Merge branch 'develop' into add/8808-woo-payment-method-logo
mordeth Jul 3, 2024
535bae1
Merge branch 'develop' into add/8808-woo-payment-method-logo
mordeth Jul 9, 2024
a8827d3
change scss style
Jul 9, 2024
ba6ce96
Merge remote-tracking branch 'refs/remotes/origin/add/8808-woo-paymen…
Jul 9, 2024
4cbc726
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jul 9, 2024
9fe143d
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jul 10, 2024
65aa3cd
Merge branch 'develop' into add/8808-woo-payment-method-logo
mordeth Jul 12, 2024
ba2b030
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jul 16, 2024
0b86794
remove unnecessary outline
Jul 16, 2024
0ad8d24
change icon borders; and PM total number
Jul 17, 2024
f76624f
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jul 18, 2024
231709e
fix tests
Jul 18, 2024
1f770b4
Merge branch 'develop' into add/8808-woo-payment-method-logo
dpaun1985 Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 21 additions & 24 deletions client/components/payment-method-logos/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import React from 'react';
import React, { useState, useEffect } from 'react';

/**
* Internal dependencies
Expand Down Expand Up @@ -71,11 +71,27 @@ export const WooPaymentMethodsLogos: React.VFC< {
maxElements: number;
} > = ( { maxElements = 10 } ) => {
const totalPaymentMethods = 21;
const maxElementsMiniView = 5;
const [ maxShownElements, setMaxShownElements ] = useState( maxElements );

useEffect( () => {
const getShowElements = () => {
dpaun1985 marked this conversation as resolved.
Show resolved Hide resolved
if ( window.innerWidth <= 480 ) {
setMaxShownElements( 5 );
} else if ( window.innerWidth <= 768 ) {
setMaxShownElements( 7 );
} else {
setMaxShownElements( maxElements );
}
};

getShowElements();
dpaun1985 marked this conversation as resolved.
Show resolved Hide resolved
window.addEventListener( 'resize', getShowElements );
dpaun1985 marked this conversation as resolved.
Show resolved Hide resolved
}, [ maxElements ] );

return (
<>
<div className="woocommerce-payments-method-logos">
dpaun1985 marked this conversation as resolved.
Show resolved Hide resolved
{ PaymentMethods.slice( 0, maxElements ).map( ( pm ) => {
{ PaymentMethods.slice( 0, maxShownElements ).map( ( pm ) => {
return (
<img
key={ pm.name }
Expand All @@ -86,31 +102,12 @@ export const WooPaymentMethodsLogos: React.VFC< {
/>
);
} ) }
{ maxElements < totalPaymentMethods && (
{ maxShownElements < totalPaymentMethods && (
<div className="woocommerce-payments-method-logos_count">
dpaun1985 marked this conversation as resolved.
Show resolved Hide resolved
+ { totalPaymentMethods - maxElements }
+ { totalPaymentMethods - maxShownElements }
</div>
) }
</div>

<div className="woocommerce-payments-method-logos_mini">
{ PaymentMethods.slice( 0, maxElementsMiniView ).map(
( pm ) => {
return (
<img
key={ pm.name }
alt={ pm.name }
src={ pm.component }
width={ 38 }
height={ 24 }
/>
);
}
) }
<div className="woocommerce-payments-method-logos_count">
+ { totalPaymentMethods - maxElementsMiniView }
</div>
</div>
</>
);
};
24 changes: 4 additions & 20 deletions client/components/payment-method-logos/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,22 @@
font-weight: 600;
}

.woocommerce-payments-method-logos > svg,
.woocommerce-payments-method-logos_mini > svg {
.woocommerce-payments-method-logos > svg {
width: 38px;
height: 24px;
}

.woocommerce-payments-method-logos img,
.woocommerce-payments-method-logos_mini img {
.woocommerce-payments-method-logos img {
margin-right: 8px;
}

.connect-account-page__payment-methods .woocommerce-payments-method-logos,
.connect-account-page__payment-methods .woocommerce-payments-method-logos_mini {
.connect-account-page__payment-methods .woocommerce-payments-method-logos {
border: 1px solid #ddd;
border-bottom: none;
padding: 12px;
}

.woocommerce-payments-method-logos,
.woocommerce-payments-method-logos_mini {
.woocommerce-payments-method-logos {
display: flex;
align-items: center;
}

@media only screen and ( min-width: 480px ) {
.woocommerce-payments-method-logos_mini {
display: none;
}
}

@media only screen and ( max-width: 480px ) {
.woocommerce-payments-method-logos {
display: none;
}
}
120 changes: 0 additions & 120 deletions client/connect-account-page/test/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,46 +128,6 @@ exports[`ConnectAccountPage should render correctly 1`] = `
11
</div>
</div>
<div
class="woocommerce-payments-method-logos_mini"
>
<img
alt="visa"
height="24"
src="assets/images/payment-method-icons/visa.svg"
width="38"
/>
<img
alt="mastercard"
height="24"
src="assets/images/payment-method-icons/mastercard.svg"
width="38"
/>
<img
alt="amex"
height="24"
src="assets/images/payment-method-icons/amex.svg"
width="38"
/>
<img
alt="discover"
height="24"
src="assets/images/payment-method-icons/discover.svg"
width="38"
/>
<img
alt="woopay"
height="24"
src="assets/images/payment-method-icons/woopay.svg"
width="38"
/>
<div
class="woocommerce-payments-method-logos_count"
>
+
16
</div>
</div>
<div
class="connect-account-page__payment-methods__description"
>
Expand Down Expand Up @@ -433,46 +393,6 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = `
11
</div>
</div>
<div
class="woocommerce-payments-method-logos_mini"
>
<img
alt="visa"
height="24"
src="assets/images/payment-method-icons/visa.svg"
width="38"
/>
<img
alt="mastercard"
height="24"
src="assets/images/payment-method-icons/mastercard.svg"
width="38"
/>
<img
alt="amex"
height="24"
src="assets/images/payment-method-icons/amex.svg"
width="38"
/>
<img
alt="discover"
height="24"
src="assets/images/payment-method-icons/discover.svg"
width="38"
/>
<img
alt="woopay"
height="24"
src="assets/images/payment-method-icons/woopay.svg"
width="38"
/>
<div
class="woocommerce-payments-method-logos_count"
>
+
16
</div>
</div>
<div
class="connect-account-page__payment-methods__description"
>
Expand Down Expand Up @@ -700,46 +620,6 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = `
11
</div>
</div>
<div
class="woocommerce-payments-method-logos_mini"
>
<img
alt="visa"
height="24"
src="assets/images/payment-method-icons/visa.svg"
width="38"
/>
<img
alt="mastercard"
height="24"
src="assets/images/payment-method-icons/mastercard.svg"
width="38"
/>
<img
alt="amex"
height="24"
src="assets/images/payment-method-icons/amex.svg"
width="38"
/>
<img
alt="discover"
height="24"
src="assets/images/payment-method-icons/discover.svg"
width="38"
/>
<img
alt="woopay"
height="24"
src="assets/images/payment-method-icons/woopay.svg"
width="38"
/>
<div
class="woocommerce-payments-method-logos_count"
>
+
16
</div>
</div>
<div
class="connect-account-page__payment-methods__description"
>
Expand Down
Loading