mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge trunk
This commit is contained in:
Emili Castells Guasch
commit
02159b10c7
67 changed files with 1239 additions and 807 deletions
|
|
@ -8,8 +8,8 @@
|
|||
}
|
||||
|
||||
@mixin hide-input-field() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ $color-divider: #F0F0F0;
|
|||
$color-error-red: #cc1818;
|
||||
|
||||
$shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
||||
$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
$color-gradient-dark: #001435;
|
||||
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
|
||||
|
||||
|
|
@ -71,4 +70,15 @@ $card-vertical-gap: 48px;
|
|||
--block-separator-size: 1px;
|
||||
--block-separator-color: var(--color-gray-200);
|
||||
--block-action-gap: 16px; // Space between two consecutive action blocks.
|
||||
|
||||
// Default visual effects.
|
||||
--box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
--container-border-radius: 8px;
|
||||
|
||||
// Spinner/loader.
|
||||
--spinner-size: 20px;
|
||||
--spinner-overlay-width: 320px;
|
||||
--spinner-overlay-height: 320px;
|
||||
--spinner-overlay-color: #fafafa;
|
||||
--spinner-overlay-box-shadow: var(--box-shadow-active-item);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
@import './reusable-components/button';
|
||||
@import './reusable-components/elements';
|
||||
@import './reusable-components/fields';
|
||||
@import './reusable-components/hstack';
|
||||
@import './reusable-components/navigation';
|
||||
@import './reusable-components/onboarding-header';
|
||||
@import './reusable-components/payment-method-icons';
|
||||
|
|
@ -16,6 +15,7 @@
|
|||
@import './reusable-components/settings-toggle-block';
|
||||
@import './reusable-components/settings-wrapper';
|
||||
@import './reusable-components/spinner-overlay';
|
||||
@import './reusable-components/stack';
|
||||
@import './reusable-components/tab-navigation';
|
||||
@import './reusable-components/title-badge';
|
||||
@import './reusable-components/welcome-docs';
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
&--has-image-badge .ppcp-r-title-badge--info {
|
||||
display: block;
|
||||
margin: 6px 0px 0px 0px;
|
||||
margin: 6px 0 0 0;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
|
|
@ -42,9 +42,9 @@
|
|||
flex-direction: column;
|
||||
|
||||
.ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge {
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
img:first-of-type {
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ button.components-button, a.components-button {
|
|||
|
||||
/* style the button template */
|
||||
|
||||
text-align: center;
|
||||
|
||||
&:not(:disabled) {
|
||||
@extend %button-style-default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.ppcp-r-title-badge {
|
||||
text-transform: none;
|
||||
margin-left: 6px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
.ppcp-r-app {
|
||||
.components-flex {
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-box-pack: center;
|
||||
|
||||
.components-h-stack {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.components-v-stack {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Fix layout for checkboxes inside a flex-stack.
|
||||
.components-checkbox-control > .components-base-control__field > .components-flex {
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp--horizontal {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
gap: 8px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> img{
|
||||
width: 38px;
|
||||
height: 24px;
|
||||
|
|
|
|||
|
|
@ -1,74 +1,80 @@
|
|||
.ppcp-r-settings-block__payment-methods {
|
||||
&.ppcp-r-settings-block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
// Grid layout.
|
||||
.ppcp-r-settings-block.ppcp--grid > .ppcp--content {
|
||||
--block-separator-gap: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
&__item {
|
||||
@media screen and (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// Theming & visual styles.
|
||||
.ppcp-r-settings-block__payment-methods {
|
||||
.ppcp-r-settings-block {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: calc(100% / 3 - 32px / 3);
|
||||
border: 1px solid $color-gray-300;
|
||||
border-radius: var(--container-border-radius);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
.ppcp--method-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__title-wrapper {
|
||||
.ppcp--method-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 8px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
.ppcp--method-description {
|
||||
p {
|
||||
@include font(13, 20, 400);
|
||||
margin: 0;
|
||||
color: $color-text-tertiary;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
.ppcp--method-title {
|
||||
@include font(13, 20, 500);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__settings {
|
||||
line-height: 0;
|
||||
.ppcp--method-settings {
|
||||
padding: 0;
|
||||
transition: 0.2s ease-out transform;
|
||||
transform: rotate(0deg);
|
||||
zoom: 1.005;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(45deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp--method-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
button.is-secondary {
|
||||
@include small-button;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
.ppcp--method-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
.ppcp-r-select-box-wrapper {
|
||||
--box-border-color: var(--color-gray-200);
|
||||
--box-outline-color: transparent;
|
||||
--box-shadow: 0;
|
||||
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
|
|
@ -6,92 +10,62 @@
|
|||
}
|
||||
|
||||
.ppcp-r-select-box {
|
||||
border: 1px solid var(--box-border-color);
|
||||
outline: 1px solid var(--box-outline-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid $color-gray-200;
|
||||
outline: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 24px 16px 24px 16px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
--box-border-color: var(--color-gray-500);
|
||||
--box-shadow: var(--box-shadow-active-item);
|
||||
}
|
||||
|
||||
&.ppcp--selected {
|
||||
border-color: $color-blueberry;
|
||||
outline-color: $color-blueberry;
|
||||
box-shadow: $shadow-selection-box;
|
||||
--box-border-color: var(--color-blueberry);
|
||||
--box-outline-color: var(--color-blueberry);
|
||||
--box-shadow: var(--box-shadow-active-item);
|
||||
}
|
||||
|
||||
&__radio-value {
|
||||
@include hide-input-field;
|
||||
|
||||
&:checked {
|
||||
+ .ppcp-r-select-box__radio-presentation {
|
||||
background: $color-white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 6px solid $color-blueberry;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox-value {
|
||||
@include hide-input-field;
|
||||
|
||||
&:not(:checked) + .ppcp-r-select-box__checkbox-presentation img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .ppcp-r-select-box__checkbox-presentation {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
.ppcp--box-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
*:not(a){
|
||||
|
||||
*:not(a) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
.ppcp--box-title {
|
||||
@include font(14, 20, 700);
|
||||
color: $color-black;
|
||||
margin: 0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__description {
|
||||
.ppcp--box-description {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-700;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
|
||||
&:not(:last-child){
|
||||
margin-block-end:18px;
|
||||
&:not(:last-child) {
|
||||
margin-block-end: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-presentation {
|
||||
@include fake-input-field(20px);
|
||||
}
|
||||
|
||||
&__checkbox-presentation {
|
||||
@include fake-input-field(2px);
|
||||
}
|
||||
&__additional-content{
|
||||
.ppcp--box-details {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -99,15 +73,18 @@
|
|||
@media screen and (max-width: 480px) {
|
||||
gap: 16px;
|
||||
padding: 18px 16px;
|
||||
&__description {
|
||||
|
||||
.ppcp--box-description {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
&__content {
|
||||
|
||||
.ppcp--box-content {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
&__content > img {
|
||||
.ppcp--box-content > img {
|
||||
max-width: 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
// Configuration for this module.
|
||||
$width_container: 938px;
|
||||
$width_header: 280px;
|
||||
$width_gap: 24px;
|
||||
|
||||
/*
|
||||
Styles the `SettingsCard` layout component.
|
||||
|
||||
|
|
@ -14,9 +19,9 @@
|
|||
--card-layout: block;
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
--card-width-header: 280px;
|
||||
--card-width-content: 610px;
|
||||
--card-gap: 48px;
|
||||
--card-width-header: #{$width_header};
|
||||
--card-width-content: #{$width_container - $width_header - $width_gap};
|
||||
--card-gap: #{$width_gap};
|
||||
--card-layout: flex;
|
||||
}
|
||||
|
||||
|
|
@ -46,6 +51,7 @@
|
|||
&.ppcp--is-card {
|
||||
max-width: var(--card-width-content);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
.ppcp-r {
|
||||
&-container {
|
||||
max-width: var(--max-container-width, none);
|
||||
margin-right: auto;
|
||||
}
|
||||
.ppcp-r-container {
|
||||
max-width: var(--max-container-width, none);
|
||||
margin: 0 auto 0 35px;
|
||||
}
|
||||
|
||||
&-inner-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 16px 48px;
|
||||
box-sizing: content-box;
|
||||
.ppcp-r-inner-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 16px 48px;
|
||||
box-sizing: content-box;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
&-settings {
|
||||
> * {
|
||||
margin-bottom: $card-vertical-gap;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
padding-bottom: $card-vertical-gap;
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings {
|
||||
> * {
|
||||
margin-bottom: $card-vertical-gap;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
padding-bottom: $card-vertical-gap;
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
.ppcp-r-spinner-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
width: var(--spinner-overlay-width);
|
||||
height: var(--spinner-overlay-height);
|
||||
box-shadow: var(--spinner-overlay-box-shadow);
|
||||
background: var(--spinner-overlay-color);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
|
||||
.components-spinner {
|
||||
position: absolute;
|
||||
|
|
@ -13,5 +15,15 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
width: var(--spinner-size);
|
||||
height: var(--spinner-size);
|
||||
}
|
||||
|
||||
.ppcp--spinner-message {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: calc(50% + 20px + var(--spinner-size));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
.ppcp-r-app {
|
||||
.components-flex {
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-box-pack: center;
|
||||
}
|
||||
|
||||
.components-flex.components-h-stack,
|
||||
.ppcp--horizontal {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ppcp--horizontal {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.components-flex.components-v-stack {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
max-width: var(--max-container-width);
|
||||
transition: max-width 0.2s;
|
||||
padding:0 35px;
|
||||
|
||||
.components-tab-panel__tabs {
|
||||
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
.ppcp-r-title-badge{
|
||||
.ppcp-r-title-badge {
|
||||
--badge-bg-color: #F5F5F5;
|
||||
--badge-text-color: #2F2F2F;
|
||||
|
||||
color: var(--badge-text-color);
|
||||
background-color: var(--badge-bg-color);
|
||||
|
||||
@include font(12, 16, 400);
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
&--positive{
|
||||
color: #144722;
|
||||
background-color: #DAFFE0;
|
||||
|
||||
&.ppcp-r-title-badge--positive {
|
||||
--badge-bg-color: #DAFFE0;
|
||||
--badge-text-color: #144722;
|
||||
}
|
||||
&--negative{
|
||||
color:#5c0000;
|
||||
background-color: #faeded;
|
||||
}
|
||||
&--info{
|
||||
color: #2F2F2F;
|
||||
background-color: #F5F5F5;
|
||||
|
||||
&.ppcp-r-title-badge--negative {
|
||||
--badge-bg-color: #faeded;
|
||||
--badge-text-color: #5c0000;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ body:has(.ppcp-r-container--onboarding) {
|
|||
.nav-tab-wrapper.woo-nav-tab-wrapper,
|
||||
.woocommerce-layout__header,
|
||||
.wrap.woocommerce form > h2,
|
||||
#mainform .subsubsub,
|
||||
#screen-meta-links {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
.ppcp-r-container--onboarding {
|
||||
--max-container-width: var(--max-width-onboarding);
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.ppcp-r-inner-container {
|
||||
max-width: var(--max-width-onboarding-content);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,33 +86,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ppcp-r-feature-item {
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid $color-gray-400;
|
||||
.ppcp-r-tab-overview-features {
|
||||
--block-header-gap: 12px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.ppcp-r-tab-overview-help {
|
||||
--block-header-gap: 8px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.ppcp-r-settings-block__feature {
|
||||
.ppcp--action-buttons {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
|
||||
.components-button.is-tertiary {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__notes {
|
||||
.ppcp--item-notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,3 +5,20 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Fix the checkbox layout (add gap between checkbox and label).
|
||||
.components-checkbox-control > .components-base-control__field > .components-flex {
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Fix layout for radio groups inside a horizontal flex-stack.
|
||||
.components-flex.components-h-stack > .components-radio-control {
|
||||
width: 100%;
|
||||
|
||||
.components-radio-control__group-wrapper {
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.ppcp-r-paylater-configurator {
|
||||
display: flex;
|
||||
border: 1px solid var(--color-separators);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--container-border-radius);
|
||||
overflow: hidden;
|
||||
font-family: "PayPalPro", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
|
|||
|
|
@ -7,3 +7,25 @@
|
|||
--block-header-gap: 0;
|
||||
--block-separator-size: 0;
|
||||
}
|
||||
|
||||
.ppcp--webhooks {
|
||||
.ppcp--webhook-list li {
|
||||
list-style: none;
|
||||
|
||||
&::before {
|
||||
content: '✔︎';
|
||||
opacity: 0.35;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.35;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ppcp--webhook-resubscribe,
|
||||
.ppcp--webhook-simulation {
|
||||
.ppcp--action .components-button {
|
||||
min-width: 160px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
display: flex;
|
||||
border: 1px solid var(--color-separators);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--container-border-radius);
|
||||
|
||||
.ppcp-r-settings-block {
|
||||
&.header-section {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,12 @@ const ControlButton = ( {
|
|||
buttonLabel,
|
||||
} ) => (
|
||||
<Action>
|
||||
<Button isBusy={ isBusy } variant={ type } onClick={ onClick }>
|
||||
<Button
|
||||
className="small-button"
|
||||
isBusy={ isBusy }
|
||||
variant={ type }
|
||||
onClick={ onClick }
|
||||
>
|
||||
{ buttonLabel }
|
||||
</Button>
|
||||
</Action>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ const ControlTextInput = ( {
|
|||
} ) => (
|
||||
<Action>
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom={ true }
|
||||
className="ppcp-r-vertical-text-control"
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ const Checkbox = ( {
|
|||
|
||||
return (
|
||||
<CheckboxControl
|
||||
__nextHasNoMarginBottom={ true }
|
||||
label={ label }
|
||||
value={ value }
|
||||
checked={ checked }
|
||||
|
|
|
|||
|
|
@ -1,15 +1,39 @@
|
|||
import { PayPalCheckbox } from './index';
|
||||
import { useCallback } from '@wordpress/element';
|
||||
|
||||
const CheckboxGroup = ( { options, value, onChange } ) => {
|
||||
const handleChange = ( key, checked ) => {
|
||||
const getNewValue = () => {
|
||||
if ( checked ) {
|
||||
return [ ...value, key ];
|
||||
}
|
||||
return value.filter( ( val ) => val !== key );
|
||||
};
|
||||
const CheckboxGroup = ( { name, options, value, onChange } ) => {
|
||||
const handleChange = useCallback(
|
||||
( key, checked ) => {
|
||||
const getNewValue = () => {
|
||||
if ( 'boolean' === typeof value ) {
|
||||
return checked;
|
||||
}
|
||||
|
||||
onChange( getNewValue() );
|
||||
if ( checked ) {
|
||||
return [ ...value, key ];
|
||||
}
|
||||
return value.filter( ( val ) => val !== key );
|
||||
};
|
||||
|
||||
onChange( getNewValue() );
|
||||
},
|
||||
[ onChange, value ]
|
||||
);
|
||||
|
||||
const isItemChecked = ( checked, itemValue ) => {
|
||||
if ( typeof checked === 'boolean' ) {
|
||||
return checked;
|
||||
}
|
||||
|
||||
if ( Array.isArray( value ) ) {
|
||||
return value.includes( itemValue );
|
||||
}
|
||||
|
||||
if ( typeof value === 'boolean' ) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return value === itemValue;
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -21,16 +45,14 @@ const CheckboxGroup = ( { options, value, onChange } ) => {
|
|||
checked,
|
||||
disabled,
|
||||
description,
|
||||
tooltip,
|
||||
} ) => (
|
||||
<PayPalCheckbox
|
||||
key={ itemValue }
|
||||
key={ name + itemValue }
|
||||
value={ itemValue }
|
||||
label={ label }
|
||||
checked={ checked }
|
||||
checked={ isItemChecked( checked, itemValue ) }
|
||||
disabled={ disabled }
|
||||
description={ description }
|
||||
tooltip={ tooltip }
|
||||
changeCallback={ handleChange }
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -49,10 +49,12 @@ const OptionItem = ( {
|
|||
} ) => {
|
||||
const boxClassName = classNames( 'ppcp-r-select-box', {
|
||||
'ppcp--selected': isSelected,
|
||||
'ppcp--multiselect': isMulti,
|
||||
} );
|
||||
|
||||
return (
|
||||
<div className={ boxClassName }>
|
||||
// eslint-disable-next-line jsx-a11y/label-has-associated-control -- label has a nested input control.
|
||||
<label className={ boxClassName }>
|
||||
<InputField
|
||||
value={ itemValue }
|
||||
isRadio={ ! isMulti }
|
||||
|
|
@ -60,22 +62,16 @@ const OptionItem = ( {
|
|||
isSelected={ isSelected }
|
||||
/>
|
||||
|
||||
<div className="ppcp-r-select-box__content">
|
||||
<div className="ppcp-r-select-box__content-inner">
|
||||
<span className="ppcp-r-select-box__title">
|
||||
{ itemTitle }
|
||||
</span>
|
||||
<p className="ppcp-r-select-box__description">
|
||||
{ itemDescription }
|
||||
</p>
|
||||
<div className="ppcp--box-content">
|
||||
<div className="ppcp--box-content-inner">
|
||||
<span className="ppcp--box-title">{ itemTitle }</span>
|
||||
<p className="ppcp--box-description">{ itemDescription }</p>
|
||||
{ children && (
|
||||
<div className="ppcp-r-select-box__additional-content">
|
||||
{ children }
|
||||
</div>
|
||||
<div className="ppcp--box-details">{ children }</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
/**
|
||||
* Temporary component, until the experimental HStack block editor component is stable.
|
||||
*
|
||||
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
|
||||
* @file
|
||||
*/
|
||||
import classNames from 'classnames';
|
||||
|
||||
const HStack = ( { className, spacing = 3, children } ) => {
|
||||
const wrapperClass = classNames(
|
||||
'components-flex components-h-stack',
|
||||
className
|
||||
);
|
||||
|
||||
const styles = {
|
||||
gap: `calc(${ 4 * spacing }px)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ wrapperClass } style={ styles }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HStack;
|
||||
|
|
@ -1,15 +1,20 @@
|
|||
import { Icon } from '@wordpress/components';
|
||||
|
||||
import data from '../../utils/data';
|
||||
|
||||
const PaymentMethodIcon = ( props ) => {
|
||||
if (
|
||||
( Array.isArray( props.icons ) &&
|
||||
props.icons.includes( props.type ) ) ||
|
||||
props.icons === 'all'
|
||||
) {
|
||||
return data().getImage( 'icon-button-' + props.type + '.svg' );
|
||||
const PaymentMethodIcon = ( { icons, type } ) => {
|
||||
const validIcon = Array.isArray( icons ) && icons.includes( type );
|
||||
|
||||
if ( validIcon || icons === 'all' ) {
|
||||
return (
|
||||
<Icon
|
||||
icon={ data().getImage( 'icon-button-' + type + '.svg' ) }
|
||||
className="ppcp--method-icon"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <></>;
|
||||
return null;
|
||||
};
|
||||
|
||||
export default PaymentMethodIcon;
|
||||
|
|
|
|||
|
|
@ -15,22 +15,6 @@ const SettingsBlock = ( {
|
|||
'ppcp--horizontal': horizontalLayout,
|
||||
} );
|
||||
|
||||
const BlockTitle = ( { blockTitle, blockSuffix, blockDescription } ) => {
|
||||
if ( ! blockTitle && ! blockDescription ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Header>
|
||||
<Title>
|
||||
{ blockTitle }
|
||||
<TitleExtra>{ blockSuffix }</TitleExtra>
|
||||
</Title>
|
||||
<Description>{ blockDescription }</Description>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ blockClassName } id={ className }>
|
||||
<BlockTitle
|
||||
|
|
@ -45,3 +29,19 @@ const SettingsBlock = ( {
|
|||
};
|
||||
|
||||
export default SettingsBlock;
|
||||
|
||||
const BlockTitle = ( { blockTitle, blockSuffix, blockDescription } ) => {
|
||||
if ( ! blockTitle && ! blockDescription ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Header>
|
||||
<Title>
|
||||
{ blockTitle }
|
||||
<TitleExtra>{ blockSuffix }</TitleExtra>
|
||||
</Title>
|
||||
<Description>{ blockDescription }</Description>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span className="ppcp-r-feature-item__notes">
|
||||
<span className="ppcp--item-notes">
|
||||
{ notes.map( ( note, index ) => (
|
||||
<span key={ index }>{ note }</span>
|
||||
) ) }
|
||||
|
|
@ -20,6 +20,32 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
|
|||
);
|
||||
};
|
||||
|
||||
const FeatureButton = ( {
|
||||
className,
|
||||
variant,
|
||||
text,
|
||||
isBusy,
|
||||
url,
|
||||
urls,
|
||||
onClick,
|
||||
} ) => {
|
||||
const buttonProps = {
|
||||
className,
|
||||
isBusy,
|
||||
variant,
|
||||
};
|
||||
|
||||
if ( url || urls ) {
|
||||
buttonProps.href = urls ? urls.live : url;
|
||||
buttonProps.target = '_blank';
|
||||
}
|
||||
if ( ! buttonProps.href ) {
|
||||
buttonProps.onClick = onClick;
|
||||
}
|
||||
|
||||
return <Button { ...buttonProps }>{ text }</Button>;
|
||||
};
|
||||
|
||||
const renderDescription = () => {
|
||||
return (
|
||||
<span
|
||||
|
|
@ -29,32 +55,6 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
|
|||
);
|
||||
};
|
||||
|
||||
const renderButton = ( button ) => {
|
||||
const buttonElement = (
|
||||
<Button
|
||||
className={ button.class ? button.class : '' }
|
||||
key={ button.text }
|
||||
isBusy={ props.actionProps?.isBusy }
|
||||
variant={ button.type }
|
||||
onClick={ button.onClick }
|
||||
>
|
||||
{ button.text }
|
||||
</Button>
|
||||
);
|
||||
|
||||
// If there's a URL (either direct or in urls object), wrap in anchor tag
|
||||
if ( button.url || button.urls ) {
|
||||
const href = button.urls ? button.urls.live : button.url;
|
||||
return (
|
||||
<a href={ href } key={ button.text }>
|
||||
{ buttonElement }
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return buttonElement;
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
|
||||
<Header>
|
||||
|
|
@ -70,8 +70,28 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
|
|||
</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.actionProps?.buttons.map( renderButton ) }
|
||||
<div className="ppcp--action-buttons">
|
||||
{ props.actionProps?.buttons.map(
|
||||
( {
|
||||
class: className,
|
||||
type,
|
||||
text,
|
||||
url,
|
||||
urls,
|
||||
onClick,
|
||||
} ) => (
|
||||
<FeatureButton
|
||||
key={ text }
|
||||
className={ className }
|
||||
variant={ type }
|
||||
text={ text }
|
||||
isBusy={ props.actionProps.isBusy }
|
||||
url={ url }
|
||||
urls={ urls }
|
||||
onClick={ onClick }
|
||||
/>
|
||||
)
|
||||
) }
|
||||
</div>
|
||||
</Action>
|
||||
</SettingsBlock>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { ToggleControl } from '@wordpress/components';
|
|||
|
||||
import SettingsBlock from '../SettingsBlock';
|
||||
import PaymentMethodIcon from '../PaymentMethodIcon';
|
||||
import data from '../../../utils/data';
|
||||
|
||||
const PaymentMethodItemBlock = ( {
|
||||
paymentMethod,
|
||||
|
|
@ -11,33 +10,35 @@ const PaymentMethodItemBlock = ( {
|
|||
isSelected,
|
||||
} ) => {
|
||||
return (
|
||||
<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__inner">
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ paymentMethod.icon ] }
|
||||
type={ paymentMethod.icon }
|
||||
/>
|
||||
<span className="ppcp-r-settings-block__payment-methods__item__title">
|
||||
<SettingsBlock className="ppcp--method-item" separatorAndGap={ false }>
|
||||
<div className="ppcp--method-inner">
|
||||
<div className="ppcp--method-title-wrapper">
|
||||
{ paymentMethod?.icon && (
|
||||
<PaymentMethodIcon
|
||||
icons={ [ paymentMethod.icon ] }
|
||||
type={ paymentMethod.icon }
|
||||
/>
|
||||
) }
|
||||
<span className="ppcp--method-title">
|
||||
{ paymentMethod.itemTitle }
|
||||
</span>
|
||||
</div>
|
||||
<p className="ppcp-r-settings-block__payment-methods__item__description">
|
||||
<p className="ppcp--method-description">
|
||||
{ paymentMethod.itemDescription }
|
||||
</p>
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__footer">
|
||||
<div className="ppcp--method-footer">
|
||||
<ToggleControl
|
||||
__nextHasNoMarginBottom={ true }
|
||||
checked={ isSelected }
|
||||
onChange={ onSelect }
|
||||
/>
|
||||
{ paymentMethod?.fields && onTriggerModal && (
|
||||
<div
|
||||
className="ppcp-r-settings-block__payment-methods__item__settings"
|
||||
<Button
|
||||
className="ppcp--method-settings"
|
||||
onClick={ onTriggerModal }
|
||||
>
|
||||
{ data().getImage( 'icon-settings.svg' ) }
|
||||
</div>
|
||||
<Icon icon={ cog } />
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,38 @@
|
|||
import SettingsBlock from '../SettingsBlock';
|
||||
import PaymentMethodItemBlock from './PaymentMethodItemBlock';
|
||||
import { usePaymentMethods } from '../../../data/payment/hooks';
|
||||
import { PaymentHooks } from '../../../data';
|
||||
|
||||
const PaymentMethodsBlock = ( {
|
||||
paymentMethods,
|
||||
className = '',
|
||||
onTriggerModal,
|
||||
} ) => {
|
||||
const { setPersistent } = usePaymentMethods();
|
||||
// TODO: This is not a reusable component, as it's connected to the Redux store.
|
||||
const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => {
|
||||
const { changePaymentSettings } = PaymentHooks.useStore();
|
||||
|
||||
if ( ! paymentMethods?.length ) {
|
||||
const handleSelect = ( methodId, isSelected ) =>
|
||||
changePaymentSettings( methodId, {
|
||||
enabled: isSelected,
|
||||
} );
|
||||
|
||||
if ( ! paymentMethods.length ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSelect = ( paymentMethod, isSelected ) => {
|
||||
setPersistent( paymentMethod.id, {
|
||||
...paymentMethod,
|
||||
enabled: isSelected,
|
||||
} );
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsBlock
|
||||
className={ `ppcp-r-settings-block__payment-methods ${ className }` }
|
||||
>
|
||||
{ paymentMethods.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItemBlock
|
||||
key={ paymentMethod.id }
|
||||
paymentMethod={ paymentMethod }
|
||||
isSelected={ paymentMethod.enabled }
|
||||
onSelect={ ( checked ) =>
|
||||
handleSelect( paymentMethod, checked )
|
||||
}
|
||||
onTriggerModal={ () =>
|
||||
onTriggerModal?.( paymentMethod.id )
|
||||
}
|
||||
/>
|
||||
) ) }
|
||||
<SettingsBlock className="ppcp--grid ppcp-r-settings-block__payment-methods">
|
||||
{ paymentMethods
|
||||
// Remove empty/invalid payment method entries.
|
||||
.filter( ( m ) => m.id )
|
||||
.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItemBlock
|
||||
key={ paymentMethod.id }
|
||||
paymentMethod={ paymentMethod }
|
||||
isSelected={ paymentMethod.enabled }
|
||||
onSelect={ ( checked ) =>
|
||||
handleSelect( paymentMethod.id, checked )
|
||||
}
|
||||
onTriggerModal={ () =>
|
||||
onTriggerModal?.( paymentMethod.id )
|
||||
}
|
||||
/>
|
||||
) ) }
|
||||
</SettingsBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,55 +1,47 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { Content, ContentWrapper } from './Elements';
|
||||
import { Content } from './Elements';
|
||||
|
||||
const SettingsCard = ( {
|
||||
id,
|
||||
className: extraClassName,
|
||||
className,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
contentItems,
|
||||
contentContainer = true,
|
||||
} ) => {
|
||||
const className = classNames( 'ppcp-r-settings-card', extraClassName );
|
||||
|
||||
const renderContent = () => {
|
||||
// If contentItems array is provided, wrap each item in Content component
|
||||
if ( contentItems ) {
|
||||
return (
|
||||
<ContentWrapper>
|
||||
{ contentItems.map( ( item ) => (
|
||||
<Content key={ item.key } id={ item.key }>
|
||||
{ item }
|
||||
</Content>
|
||||
) ) }
|
||||
</ContentWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
// Otherwise handle regular children with contentContainer prop
|
||||
if ( contentContainer ) {
|
||||
return <Content>{ children }</Content>;
|
||||
}
|
||||
|
||||
return children;
|
||||
const cardClassNames = classNames( 'ppcp-r-settings-card', className );
|
||||
const cardProps = {
|
||||
className: cardClassNames,
|
||||
id,
|
||||
};
|
||||
|
||||
return (
|
||||
<div id={ id } className={ className }>
|
||||
<div { ...cardProps }>
|
||||
<div className="ppcp-r-settings-card__header">
|
||||
<div className="ppcp-r-settings-card__content-inner">
|
||||
<span className="ppcp-r-settings-card__title">
|
||||
{ title }
|
||||
</span>
|
||||
<p className="ppcp-r-settings-card__description">
|
||||
<div className="ppcp-r-settings-card__description">
|
||||
{ description }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ renderContent() }
|
||||
|
||||
<InnerContent showCards={ contentContainer }>
|
||||
{ children }
|
||||
</InnerContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsCard;
|
||||
|
||||
const InnerContent = ( { showCards, children } ) => {
|
||||
if ( showCards ) {
|
||||
return <Content>{ children }</Content>;
|
||||
}
|
||||
|
||||
return children;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ const SpinnerOverlay = ( { message = null } ) => {
|
|||
return (
|
||||
<div className="ppcp-r-spinner-overlay">
|
||||
{ message && (
|
||||
<span className="ppcp-r-spinner-overlay__message">
|
||||
{ message }
|
||||
</span>
|
||||
<span className="ppcp--spinner-message">{ message }</span>
|
||||
) }
|
||||
<Spinner />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Temporary component, until the experimental VStack/HStack block editor component is stable.
|
||||
*
|
||||
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
|
||||
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-vstack--docs
|
||||
* @file
|
||||
*/
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Stack = ( { type, className, spacing, children } ) => {
|
||||
const wrapperClass = classNames(
|
||||
'components-flex',
|
||||
`components-${ type }-stack`,
|
||||
className
|
||||
);
|
||||
|
||||
const styles = {
|
||||
gap: `calc(${ 4 * spacing }px)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ wrapperClass } style={ styles }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const HStack = ( { className, spacing = 3, children } ) => {
|
||||
return (
|
||||
<Stack type="h" className={ className } spacing={ spacing }>
|
||||
{ children }
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const VStack = ( { className, spacing = 3, children } ) => {
|
||||
return (
|
||||
<Stack type="v" className={ className } spacing={ spacing }>
|
||||
{ children }
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import SettingsCard from '../../ReusableComponents/SettingsCard';
|
||||
import { PaymentMethodsBlock } from '../../ReusableComponents/SettingsBlocks';
|
||||
import { PaymentHooks } from '../../../data';
|
||||
import { useActiveModal } from '../../../data/common/hooks';
|
||||
import Modal from './TabSettingsElements/Blocks/Modal';
|
||||
import { usePaymentMethods } from '../../../data/payment/hooks';
|
||||
|
||||
const TabPaymentMethods = () => {
|
||||
const { paymentMethodsPayPalCheckout } =
|
||||
PaymentHooks.usePaymentMethodsPayPalCheckout();
|
||||
const { paymentMethodsOnlineCardPayments } =
|
||||
PaymentHooks.usePaymentMethodsOnlineCardPayments();
|
||||
const { paymentMethodsAlternative } =
|
||||
PaymentHooks.usePaymentMethodsAlternative();
|
||||
|
||||
const { setPersistent } = usePaymentMethods();
|
||||
|
||||
const { activeModal, setActiveModal } = useActiveModal();
|
||||
|
||||
const getActiveMethod = () => {
|
||||
if ( ! activeModal ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const allMethods = [
|
||||
...paymentMethodsPayPalCheckout,
|
||||
...paymentMethodsOnlineCardPayments,
|
||||
...paymentMethodsAlternative,
|
||||
];
|
||||
|
||||
return allMethods.find( ( method ) => method.id === activeModal );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-payment-methods">
|
||||
<SettingsCard
|
||||
id="ppcp-paypal-checkout-card"
|
||||
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Select your preferred checkout option with PayPal for easy payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-standard.svg"
|
||||
contentContainer={ false }
|
||||
>
|
||||
<PaymentMethodsBlock
|
||||
paymentMethods={ paymentMethodsPayPalCheckout }
|
||||
onTriggerModal={ setActiveModal }
|
||||
/>
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
id="ppcp-card-payments-card"
|
||||
title={ __(
|
||||
'Online Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Select your preferred card payment options for efficient payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-online-methods.svg"
|
||||
contentContainer={ false }
|
||||
>
|
||||
<PaymentMethodsBlock
|
||||
paymentMethods={ paymentMethodsOnlineCardPayments }
|
||||
onTriggerModal={ setActiveModal }
|
||||
/>
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
id="ppcp-alternative-payments-card"
|
||||
title={ __(
|
||||
'Alternative Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'With alternative payment methods, customers across the globe can pay with their bank accounts and other local payment methods.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-alternative-methods.svg"
|
||||
contentContainer={ false }
|
||||
>
|
||||
<PaymentMethodsBlock
|
||||
paymentMethods={ paymentMethodsAlternative }
|
||||
onTriggerModal={ setActiveModal }
|
||||
/>
|
||||
</SettingsCard>
|
||||
|
||||
{ activeModal && (
|
||||
<Modal
|
||||
method={ getActiveMethod() }
|
||||
setModalIsVisible={ () => setActiveModal( null ) }
|
||||
onSave={ ( methodId, settings ) => {
|
||||
setPersistent( methodId, {
|
||||
...getActiveMethod(),
|
||||
title: settings.checkoutPageTitle,
|
||||
description: settings.checkoutPageDescription,
|
||||
} );
|
||||
|
||||
if ( 'paypalShowLogo' in settings ) {
|
||||
setPersistent(
|
||||
'paypalShowLogo',
|
||||
settings.paypalShowLogo
|
||||
);
|
||||
}
|
||||
if ( 'threeDSecure' in settings ) {
|
||||
setPersistent(
|
||||
'threeDSecure',
|
||||
settings.threeDSecure
|
||||
);
|
||||
}
|
||||
if ( 'fastlaneCardholderName' in settings ) {
|
||||
setPersistent(
|
||||
'fastlaneCardholderName',
|
||||
settings.fastlaneCardholderName
|
||||
);
|
||||
}
|
||||
if ( 'fastlaneDisplayWatermark' in settings ) {
|
||||
setPersistent(
|
||||
'fastlaneDisplayWatermark',
|
||||
settings.fastlaneDisplayWatermark
|
||||
);
|
||||
}
|
||||
|
||||
setActiveModal( null );
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabPaymentMethods;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
|
||||
import Container from '../ReusableComponents/Container';
|
||||
import SettingsCard from '../ReusableComponents/SettingsCard';
|
||||
|
|
@ -9,7 +10,7 @@ const SendOnlyMessage = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SettingsNavigation />
|
||||
<SettingsNavigation canSave={ false } />
|
||||
<Container page="settings">
|
||||
<SettingsCard
|
||||
title={ __(
|
||||
|
|
@ -45,6 +46,19 @@ const SendOnlyMessage = () => {
|
|||
),
|
||||
} }
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
href={ settingsPageUrl }
|
||||
variant="primary"
|
||||
className="small-button"
|
||||
>
|
||||
{ __(
|
||||
'Go to WooCommerce settings',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
</Container>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -2,21 +2,20 @@ import { Button } from '@wordpress/components';
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import TopNavigation from '../../../ReusableComponents/TopNavigation';
|
||||
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
|
||||
import { useSaveSettings } from '../../../../hooks/useSaveSettings';
|
||||
|
||||
const SettingsNavigation = () => {
|
||||
const SettingsNavigation = ( { canSave = true } ) => {
|
||||
const { persistAll } = useSaveSettings();
|
||||
|
||||
const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
|
||||
|
||||
return (
|
||||
<TopNavigation title={ title } exitOnTitleClick={ true }>
|
||||
<BusyStateWrapper>
|
||||
{ canSave && (
|
||||
<Button variant="primary" onClick={ persistAll }>
|
||||
{ __( 'Save', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</BusyStateWrapper>
|
||||
) }
|
||||
</TopNavigation>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,290 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { TAB_IDS, selectTab } from '../../../../../utils/tabSelector';
|
||||
import { payLaterMessaging } from './pay-later-messaging';
|
||||
|
||||
export const getFeatures = ( setActiveModal ) => {
|
||||
const storeCountry = ppcpSettings?.storeCountry;
|
||||
const features = [
|
||||
{
|
||||
id: 'save_paypal_and_venmo',
|
||||
title: __( 'Save PayPal and Venmo', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Securely save PayPal and Venmo payment methods for subscriptions or return buyers.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
onClick: () => {
|
||||
selectTab(
|
||||
TAB_IDS.PAYMENT_METHODS,
|
||||
'ppcp-paypal-checkout-card'
|
||||
).then( () => {
|
||||
setActiveModal( 'paypal' );
|
||||
} );
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
urls: {
|
||||
sandbox:
|
||||
'https://www.sandbox.paypal.com/bizsignup/entry?product=ADVANCED_VAULTING',
|
||||
live: 'https://www.paypal.com/bizsignup/entry?product=ADVANCED_VAULTING',
|
||||
},
|
||||
showWhen: 'disabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'tertiary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
urls: {
|
||||
sandbox: '#',
|
||||
live: '#',
|
||||
},
|
||||
class: 'small-button',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'advanced_credit_and_debit_cards',
|
||||
title: __(
|
||||
'Advanced Credit and Debit Cards',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Process major credit and debit cards including Visa, Mastercard, American Express and Discover.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
onClick: () => {
|
||||
selectTab(
|
||||
TAB_IDS.PAYMENT_METHODS,
|
||||
'ppcp-card-payments-card'
|
||||
).then( () => {
|
||||
setActiveModal(
|
||||
'advanced_credit_and_debit_card_payments'
|
||||
);
|
||||
} );
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
urls: {
|
||||
sandbox:
|
||||
'https://www.sandbox.paypal.com/bizsignup/entry?product=ppcp',
|
||||
live: 'https://www.paypal.com/bizsignup/entry?product=ppcp',
|
||||
},
|
||||
showWhen: 'disabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'tertiary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: 'https://developer.paypal.com/studio/checkout/advanced',
|
||||
class: 'small-button',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'alternative_payment_methods',
|
||||
title: __(
|
||||
'Alternative Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Offer global, country-specific payment options for your customers.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
onClick: () => {
|
||||
selectTab(
|
||||
TAB_IDS.PAYMENT_METHODS,
|
||||
'ppcp-alternative-payments-card'
|
||||
);
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
url: 'https://developer.paypal.com/docs/checkout/apm/',
|
||||
showWhen: 'disabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'tertiary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: 'https://developer.paypal.com/docs/checkout/apm/',
|
||||
class: 'small-button',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'google_pay',
|
||||
title: __( 'Google Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Let customers pay using their Google Pay wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
onClick: () => {
|
||||
selectTab(
|
||||
TAB_IDS.PAYMENT_METHODS,
|
||||
'ppcp-card-payments-card'
|
||||
).then( () => {
|
||||
setActiveModal( 'google_pay' );
|
||||
} );
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
urls: {
|
||||
sandbox:
|
||||
'https://www.sandbox.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=GOOGLE_PAY',
|
||||
live: 'https://www.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=GOOGLE_PAY',
|
||||
},
|
||||
showWhen: 'disabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'tertiary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: 'https://developer.paypal.com/docs/checkout/apm/google-pay/',
|
||||
class: 'small-button',
|
||||
},
|
||||
],
|
||||
notes: [
|
||||
__(
|
||||
'¹PayPal Q2 Earnings-2021.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'apple_pay',
|
||||
title: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Let customers pay using their Apple Pay wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
onClick: () => {
|
||||
selectTab(
|
||||
TAB_IDS.PAYMENT_METHODS,
|
||||
'ppcp-card-payments-card'
|
||||
).then( () => {
|
||||
setActiveModal( 'apple_pay' );
|
||||
} );
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __(
|
||||
'Domain registration',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
urls: {
|
||||
sandbox:
|
||||
'https://www.sandbox.paypal.com/uccservicing/apm/applepay',
|
||||
live: 'https://www.paypal.com/uccservicing/apm/applepay',
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
urls: {
|
||||
sandbox:
|
||||
'https://www.sandbox.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=APPLE_PAY',
|
||||
live: 'https://www.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=APPLE_PAY',
|
||||
},
|
||||
showWhen: 'disabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'tertiary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: 'https://developer.paypal.com/docs/checkout/apm/apple-pay/',
|
||||
class: 'small-button',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const countryData = payLaterMessaging[ storeCountry ] || {};
|
||||
|
||||
// Add "Pay Later Messaging" to the feature list, if it's available.
|
||||
if (
|
||||
!! window.ppcpSettings?.isPayLaterConfiguratorAvailable &&
|
||||
countryData
|
||||
) {
|
||||
features.push( {
|
||||
id: 'pay_later_messaging',
|
||||
title: __( 'Pay Later Messaging', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Let customers know they can buy now and pay later with PayPal. Adding this messaging can boost conversion rates and increase cart sizes by 39%¹, with no extra cost to you—plus, you get paid up front.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
onClick: () => {
|
||||
selectTab(
|
||||
TAB_IDS.PAYMENT_METHODS,
|
||||
'ppcp-paypal-checkout-card'
|
||||
).then( () => {
|
||||
setActiveModal( 'paypal' );
|
||||
} );
|
||||
},
|
||||
showWhen: 'enabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
urls: {
|
||||
sandbox: '#',
|
||||
live: '#',
|
||||
},
|
||||
showWhen: 'disabled',
|
||||
class: 'small-button',
|
||||
},
|
||||
{
|
||||
type: 'tertiary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: 'https://developer.paypal.com/studio/checkout/pay-later/us',
|
||||
class: 'small-button',
|
||||
},
|
||||
],
|
||||
} );
|
||||
}
|
||||
|
||||
return features;
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
|
||||
export const payLaterMessagingComponentData = {
|
||||
export const payLaterMessaging = {
|
||||
US: {
|
||||
description: sprintf(
|
||||
__(
|
||||
|
|
@ -6,20 +6,18 @@ import {
|
|||
RadioControl,
|
||||
} from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModal';
|
||||
import {
|
||||
usePaymentMethods,
|
||||
usePaymentMethodsModal,
|
||||
} from '../../../../../data/payment/hooks';
|
||||
import { PaymentHooks } from '../../../../../data';
|
||||
|
||||
const Modal = ( { method, setModalIsVisible, onSave } ) => {
|
||||
const { paymentMethods } = usePaymentMethods();
|
||||
const { paymentMethods } = PaymentHooks.usePaymentMethods();
|
||||
const {
|
||||
paypalShowLogo,
|
||||
threeDSecure,
|
||||
fastlaneCardholderName,
|
||||
fastlaneDisplayWatermark,
|
||||
} = usePaymentMethodsModal();
|
||||
} = PaymentHooks.usePaymentMethodsModal();
|
||||
|
||||
const [ settings, setSettings ] = useState( () => {
|
||||
if ( ! method?.id ) {
|
||||
|
|
@ -68,6 +66,7 @@ const Modal = ( { method, setModalIsVisible, onSave } ) => {
|
|||
return (
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<TextControl
|
||||
__nextHasNoMarginBottom={ true }
|
||||
className="ppcp-r-vertical-text-control"
|
||||
label={ field.label }
|
||||
value={ settings[ key ] }
|
||||
|
|
@ -4,9 +4,9 @@ import { Button } from '@wordpress/components';
|
|||
import {
|
||||
ControlTextInput,
|
||||
ControlRadioGroup,
|
||||
} from '../../../../ReusableComponents/Controls';
|
||||
import Accordion from '../../../../ReusableComponents/AccordionSection';
|
||||
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
|
||||
} from '../../../../../ReusableComponents/Controls';
|
||||
import Accordion from '../../../../../ReusableComponents/AccordionSection';
|
||||
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
|
||||
|
||||
const ConnectionDetails = ( { settings, updateFormValue } ) => {
|
||||
const isSandbox = settings.sandboxConnected;
|
||||
|
|
@ -4,7 +4,7 @@ import { CommonHooks } from '../../../../../../data';
|
|||
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
|
||||
import { Title } from '../../../../../ReusableComponents/Elements';
|
||||
|
||||
const HooksTableBlock = () => {
|
||||
const HooksListBlock = () => {
|
||||
const { webhooks } = CommonHooks.useWebhooks();
|
||||
const { url, events } = webhooks;
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ const HooksTableBlock = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<SettingsBlock separatorAndGap={ false }>
|
||||
<SettingsBlock separatorAndGap={ false } className="ppcp--webhooks">
|
||||
<WebhookUrl url={ url } />
|
||||
<WebhookEvents events={ events } />
|
||||
</SettingsBlock>
|
||||
|
|
@ -37,7 +37,7 @@ const WebhookEvents = ( { events } ) => {
|
|||
<Title>
|
||||
{ __( 'Subscribed Events', 'woocommerce-paypal-payments' ) }
|
||||
</Title>
|
||||
<ul>
|
||||
<ul className="ppcp--webhook-list">
|
||||
{ events.map( ( event, index ) => (
|
||||
<li key={ index }>{ event }</li>
|
||||
) ) }
|
||||
|
|
@ -46,4 +46,4 @@ const WebhookEvents = ( { events } ) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default HooksTableBlock;
|
||||
export default HooksListBlock;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import Accordion from '../../../../ReusableComponents/AccordionSection';
|
||||
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
|
||||
import { ControlSelect } from '../../../../ReusableComponents/Controls';
|
||||
import { SettingsHooks } from '../../../../../data';
|
||||
import Accordion from '../../../../../ReusableComponents/AccordionSection';
|
||||
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
|
||||
import { ControlSelect } from '../../../../../ReusableComponents/Controls';
|
||||
import { SettingsHooks } from '../../../../../../data';
|
||||
|
||||
const OtherSettings = () => {
|
||||
const { disabledCards, setDisabledCards } = SettingsHooks.useSettings();
|
||||
|
|
@ -5,10 +5,10 @@ import {
|
|||
ControlToggleButton,
|
||||
ControlTextInput,
|
||||
ControlSelect,
|
||||
} from '../../../../ReusableComponents/Controls';
|
||||
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
|
||||
import Accordion from '../../../../ReusableComponents/AccordionSection';
|
||||
import { SettingsHooks } from '../../../../../data';
|
||||
} from '../../../../../ReusableComponents/Controls';
|
||||
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
|
||||
import Accordion from '../../../../../ReusableComponents/AccordionSection';
|
||||
import { SettingsHooks } from '../../../../../../data';
|
||||
|
||||
const PaypalSettings = () => {
|
||||
const {
|
||||
|
|
@ -59,6 +59,7 @@ const ResubscribeBlock = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
horizontalLayout={ true }
|
||||
className="ppcp--webhook-resubscribe"
|
||||
>
|
||||
<ControlButton
|
||||
type={ 'secondary' }
|
||||
|
|
@ -116,6 +116,7 @@ const SimulationBlock = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
horizontalLayout={ true }
|
||||
className="ppcp--webhook-simulation"
|
||||
>
|
||||
<ControlButton
|
||||
type={ 'secondary' }
|
||||
|
|
@ -6,7 +6,7 @@ import Accordion from '../../../../../ReusableComponents/AccordionSection';
|
|||
|
||||
import SimulationBlock from './SimulationBlock';
|
||||
import ResubscribeBlock from './ResubscribeBlock';
|
||||
import HooksTableBlock from './HooksTableBlock';
|
||||
import HooksListBlock from './HooksListBlock';
|
||||
import { SettingsHooks } from '../../../../../../data';
|
||||
|
||||
const Troubleshooting = () => {
|
||||
|
|
@ -43,7 +43,7 @@ const Troubleshooting = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#webhook-status'
|
||||
) }
|
||||
>
|
||||
<HooksTableBlock />
|
||||
<HooksListBlock />
|
||||
<ResubscribeBlock />
|
||||
<SimulationBlock />
|
||||
</SettingsBlock>
|
||||
|
|
@ -4,10 +4,10 @@ import {
|
|||
Content,
|
||||
ContentWrapper,
|
||||
} from '../../../../ReusableComponents/Elements';
|
||||
import ConnectionDetails from '../../../Overview/TabSettingsElements/Blocks/ConnectionDetails';
|
||||
import Troubleshooting from '../../../Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting';
|
||||
import PaypalSettings from '../../../Overview/TabSettingsElements/Blocks/PaypalSettings';
|
||||
import OtherSettings from '../../../Overview/TabSettingsElements/Blocks/OtherSettings';
|
||||
import ConnectionDetails from './Blocks/ConnectionDetails';
|
||||
import Troubleshooting from './Blocks/Troubleshooting';
|
||||
import PaypalSettings from './Blocks/PaypalSettings';
|
||||
import OtherSettings from './Blocks/OtherSettings';
|
||||
|
||||
const ExpertSettings = () => {
|
||||
const settings = {}; // dummy object
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const LocationSelector = ( { location, setLocation } ) => {
|
|||
) }
|
||||
</SelectStylingSection>
|
||||
<CheckboxStylingSection
|
||||
className="location-activation"
|
||||
name="location-activation"
|
||||
separatorAndGap={ false }
|
||||
options={ [ activateCheckbox ] }
|
||||
value={ isActive }
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const SectionPaymentMethods = ( { location } ) => {
|
|||
|
||||
return (
|
||||
<CheckboxStylingSection
|
||||
name="payment-methods"
|
||||
title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
|
||||
className="payment-methods"
|
||||
options={ choices }
|
||||
value={ paymentMethods }
|
||||
onChange={ setPaymentMethods }
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const SectionTagline = ( { location } ) => {
|
|||
|
||||
return (
|
||||
<CheckboxStylingSection
|
||||
className="tagline"
|
||||
name="tagline"
|
||||
separatorAndGap={ false }
|
||||
options={ [ checkbox ] }
|
||||
value={ tagline }
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const StylingSection = ( {
|
|||
separatorAndGap={ separatorAndGap }
|
||||
>
|
||||
<Header>
|
||||
<Title altStyle={ true } big={ bigTitle }>
|
||||
<Title noCaps={ true } big={ bigTitle }>
|
||||
{ title }
|
||||
</Title>
|
||||
<Description>{ description }</Description>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { CheckboxGroup } from '../../../../../ReusableComponents/Fields';
|
||||
import HStack from '../../../../../ReusableComponents/HStack';
|
||||
import { VStack } from '../../../../../ReusableComponents/Stack';
|
||||
import StylingSection from './StylingSection';
|
||||
|
||||
const StylingSectionWithCheckboxes = ( {
|
||||
title,
|
||||
name,
|
||||
className = '',
|
||||
description = '',
|
||||
separatorAndGap = true,
|
||||
|
|
@ -14,7 +15,14 @@ const StylingSectionWithCheckboxes = ( {
|
|||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'ppcp--has-checkboxes', className );
|
||||
className = classNames( 'ppcp--has-checkboxes', name, className );
|
||||
|
||||
if ( ! name ) {
|
||||
console.error(
|
||||
'Checkbox sections need a unique name! No name given to:',
|
||||
title
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
|
|
@ -23,13 +31,14 @@ const StylingSectionWithCheckboxes = ( {
|
|||
description={ description }
|
||||
separatorAndGap={ separatorAndGap }
|
||||
>
|
||||
<HStack spacing={ 6 }>
|
||||
<VStack spacing={ 6 }>
|
||||
<CheckboxGroup
|
||||
name={ name }
|
||||
options={ options }
|
||||
value={ value }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</HStack>
|
||||
</VStack>
|
||||
|
||||
{ children }
|
||||
</StylingSection>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { RadioControl } from '@wordpress/components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import HStack from '../../../../../ReusableComponents/HStack';
|
||||
import { HStack } from '../../../../../ReusableComponents/Stack';
|
||||
import StylingSection from './StylingSection';
|
||||
|
||||
const StylingSectionWithRadiobuttons = ( {
|
||||
|
|
|
|||
|
|
@ -9,11 +9,12 @@ import {
|
|||
TodoSettingsBlock,
|
||||
FeatureSettingsBlock,
|
||||
} from '../../../ReusableComponents/SettingsBlocks';
|
||||
import { Content, ContentWrapper } from '../../../ReusableComponents/Elements';
|
||||
import SettingsCard from '../../../ReusableComponents/SettingsCard';
|
||||
import { TITLE_BADGE_POSITIVE } from '../../../ReusableComponents/TitleBadge';
|
||||
import { useMerchantInfo } from '../../../../data/common/hooks';
|
||||
import { STORE_NAME } from '../../../../data/common';
|
||||
import Features from '../Components/Overview/Features';
|
||||
import { getFeatures } from '../Components/Overview/features-config';
|
||||
import { todosData } from '../todo-items';
|
||||
|
||||
import {
|
||||
|
|
@ -22,8 +23,34 @@ import {
|
|||
} from '../../../ReusableComponents/Icons';
|
||||
|
||||
const TabOverview = () => {
|
||||
const [ isRefreshing, setIsRefreshing ] = useState( false );
|
||||
return (
|
||||
<div className="ppcp-r-tab-overview">
|
||||
{ todosData.length > 0 && (
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-todo"
|
||||
title={ __(
|
||||
'Things to do next',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Complete these tasks to keep your store updated with the latest products and services.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<TodoSettingsBlock todosData={ todosData } />
|
||||
</SettingsCard>
|
||||
) }
|
||||
|
||||
<OverviewFeatures />
|
||||
<OverviewHelp />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabOverview;
|
||||
|
||||
const OverviewFeatures = () => {
|
||||
const [ isRefreshing, setIsRefreshing ] = useState( false );
|
||||
const { merchant, features: merchantFeatures } = useMerchantInfo();
|
||||
const { refreshFeatureStatuses, setActiveModal } =
|
||||
useDispatch( STORE_NAME );
|
||||
|
|
@ -32,7 +59,7 @@ const TabOverview = () => {
|
|||
|
||||
// Get the features data with access to setActiveModal
|
||||
const featuresData = useMemo(
|
||||
() => Features.getFeatures( setActiveModal ),
|
||||
() => getFeatures( setActiveModal ),
|
||||
[ setActiveModal ]
|
||||
);
|
||||
|
||||
|
|
@ -49,6 +76,7 @@ const TabOverview = () => {
|
|||
|
||||
const refreshHandler = async () => {
|
||||
setIsRefreshing( true );
|
||||
|
||||
try {
|
||||
const result = await refreshFeatureStatuses();
|
||||
if ( result && ! result.success ) {
|
||||
|
|
@ -79,7 +107,6 @@ const TabOverview = () => {
|
|||
icon: NOTIFICATION_SUCCESS,
|
||||
}
|
||||
);
|
||||
console.log( 'Features refreshed successfully.' );
|
||||
}
|
||||
} finally {
|
||||
setIsRefreshing( false );
|
||||
|
|
@ -87,111 +114,132 @@ const TabOverview = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-tab-overview">
|
||||
{ todosData.length > 0 && (
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-todo"
|
||||
title={ __(
|
||||
'Things to do next',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Complete these tasks to keep your store updated with the latest products and services.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<TodoSettingsBlock todosData={ todosData } />
|
||||
</SettingsCard>
|
||||
) }
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-features"
|
||||
title={ __( 'Features', 'woocommerce-paypal-payments' ) }
|
||||
description={
|
||||
<OverviewFeatureDescription
|
||||
refreshHandler={ refreshHandler }
|
||||
isRefreshing={ isRefreshing }
|
||||
/>
|
||||
}
|
||||
contentContainer={ false }
|
||||
>
|
||||
<ContentWrapper>
|
||||
{ features.map( ( { id, ...feature } ) => (
|
||||
<OverviewFeatureItem
|
||||
key={ id }
|
||||
isBusy={ isRefreshing }
|
||||
isSandbox={ merchant.isSandbox }
|
||||
title={ feature.title }
|
||||
description={ feature.description }
|
||||
buttons={ feature.buttons }
|
||||
enabled={ feature.enabled }
|
||||
notes={ feature.notes }
|
||||
/>
|
||||
) ) }
|
||||
</ContentWrapper>
|
||||
</SettingsCard>
|
||||
);
|
||||
};
|
||||
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-features"
|
||||
title={ __( 'Features', 'woocommerce-paypal-payments' ) }
|
||||
description={
|
||||
<>
|
||||
<p>
|
||||
{ __(
|
||||
'Enable additional features and capabilities on your WooCommerce store.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<p>
|
||||
{ __(
|
||||
'Click Refresh to update your current features after making changes.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
onClick={ refreshHandler }
|
||||
disabled={ isRefreshing }
|
||||
>
|
||||
<Icon icon={ reusableBlock } size={ 18 } />
|
||||
{ isRefreshing
|
||||
? __(
|
||||
'Refreshing…',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Refresh',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
contentItems={ features.map( ( feature ) => {
|
||||
return (
|
||||
<FeatureSettingsBlock
|
||||
key={ feature.id }
|
||||
title={ feature.title }
|
||||
description={ feature.description }
|
||||
actionProps={ {
|
||||
buttons: feature.buttons
|
||||
.filter(
|
||||
( button ) =>
|
||||
! button.showWhen || // Learn more buttons
|
||||
( feature.enabled &&
|
||||
button.showWhen ===
|
||||
'enabled' ) ||
|
||||
( ! feature.enabled &&
|
||||
button.showWhen === 'disabled' )
|
||||
)
|
||||
.map( ( button ) => ( {
|
||||
...button,
|
||||
url: button.urls
|
||||
? merchant?.isSandbox
|
||||
? button.urls.sandbox
|
||||
: button.urls.live
|
||||
: button.url,
|
||||
} ) ),
|
||||
isBusy: isRefreshing,
|
||||
enabled: feature.enabled,
|
||||
notes: feature.notes,
|
||||
badge: feature.enabled
|
||||
? {
|
||||
text: __(
|
||||
'Active',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
type: TITLE_BADGE_POSITIVE,
|
||||
}
|
||||
: undefined,
|
||||
} }
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
const OverviewFeatureItem = ( {
|
||||
isBusy,
|
||||
isSandbox,
|
||||
title,
|
||||
description,
|
||||
buttons,
|
||||
enabled,
|
||||
notes,
|
||||
} ) => {
|
||||
const getButtonUrl = ( button ) => {
|
||||
if ( button.urls ) {
|
||||
return isSandbox ? button.urls.sandbox : button.urls.live;
|
||||
}
|
||||
|
||||
return button.url;
|
||||
};
|
||||
|
||||
const visibleButtons = buttons.filter(
|
||||
( button ) =>
|
||||
! button.showWhen || // Learn more buttons
|
||||
( enabled && button.showWhen === 'enabled' ) ||
|
||||
( ! enabled && button.showWhen === 'disabled' )
|
||||
);
|
||||
|
||||
const actionProps = {
|
||||
isBusy,
|
||||
enabled,
|
||||
notes,
|
||||
buttons: visibleButtons.map( ( button ) => ( {
|
||||
...button,
|
||||
url: getButtonUrl( button ),
|
||||
} ) ),
|
||||
};
|
||||
|
||||
if ( enabled ) {
|
||||
actionProps.badge = {
|
||||
text: __( 'Active', 'woocommerce-paypal-payments' ),
|
||||
type: TITLE_BADGE_POSITIVE,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Content>
|
||||
<FeatureSettingsBlock
|
||||
title={ title }
|
||||
description={ description }
|
||||
actionProps={ actionProps }
|
||||
/>
|
||||
</Content>
|
||||
);
|
||||
};
|
||||
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-help"
|
||||
title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Access detailed guides and responsive support to streamline setup and enhance your experience.',
|
||||
const OverviewFeatureDescription = ( { refreshHandler, isRefreshing } ) => {
|
||||
const buttonLabel = isRefreshing
|
||||
? __( 'Refreshing…', 'woocommerce-paypal-payments' )
|
||||
: __( 'Refresh', 'woocommerce-paypal-payments' );
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
{ __(
|
||||
'Enable additional features and capabilities on your WooCommerce store.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
contentItems={ [
|
||||
</p>
|
||||
<p>
|
||||
{ __(
|
||||
'Click Refresh to update your current features after making changes.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
onClick={ refreshHandler }
|
||||
disabled={ isRefreshing }
|
||||
>
|
||||
<Icon icon={ reusableBlock } size={ 18 } />
|
||||
{ buttonLabel }
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const OverviewHelp = () => {
|
||||
return (
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-overview-help"
|
||||
title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Access detailed guides and responsive support to streamline setup and enhance your experience.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
contentContainer={ false }
|
||||
>
|
||||
<ContentWrapper>
|
||||
<Content>
|
||||
<FeatureSettingsBlock
|
||||
key="documentation"
|
||||
title={ __(
|
||||
'Documentation',
|
||||
'woocommerce-paypal-payments'
|
||||
|
|
@ -212,9 +260,11 @@ const TabOverview = () => {
|
|||
},
|
||||
],
|
||||
} }
|
||||
/>,
|
||||
/>
|
||||
</Content>
|
||||
|
||||
<Content>
|
||||
<FeatureSettingsBlock
|
||||
key="support"
|
||||
title={ __( 'Support', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Need help? Access troubleshooting tips or contact our support team for personalized assistance.',
|
||||
|
|
@ -232,11 +282,9 @@ const TabOverview = () => {
|
|||
},
|
||||
],
|
||||
} }
|
||||
/>,
|
||||
] }
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</Content>
|
||||
</ContentWrapper>
|
||||
</SettingsCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabOverview;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { useCallback } from '@wordpress/element';
|
||||
|
||||
import SettingsCard from '../../../ReusableComponents/SettingsCard';
|
||||
import { PaymentMethodsBlock } from '../../../ReusableComponents/SettingsBlocks';
|
||||
import { PaymentHooks } from '../../../../data';
|
||||
import { useActiveModal } from '../../../../data/common/hooks';
|
||||
import Modal from '../Components/Payment/Modal';
|
||||
|
||||
const TabPaymentMethods = () => {
|
||||
const methods = PaymentHooks.usePaymentMethods();
|
||||
const { setPersistent, changePaymentSettings } = PaymentHooks.useStore();
|
||||
const { activeModal, setActiveModal } = useActiveModal();
|
||||
|
||||
const getActiveMethod = () => {
|
||||
if ( ! activeModal ) {
|
||||
return null;
|
||||
}
|
||||
return methods.all.find( ( method ) => method.id === activeModal );
|
||||
};
|
||||
|
||||
const handleSave = useCallback(
|
||||
( methodId, settings ) => {
|
||||
changePaymentSettings( methodId, {
|
||||
title: settings.checkoutPageTitle,
|
||||
description: settings.checkoutPageDescription,
|
||||
} );
|
||||
|
||||
const persistentSettings = [
|
||||
'paypalShowLogo',
|
||||
'threeDSecure',
|
||||
'fastlaneCardholderName',
|
||||
'fastlaneDisplayWatermark',
|
||||
];
|
||||
|
||||
persistentSettings.forEach( ( setting ) => {
|
||||
if ( setting in settings ) {
|
||||
// TODO: Create a dedicated setter for those values.
|
||||
setPersistent( setting, settings[ setting ] );
|
||||
}
|
||||
} );
|
||||
|
||||
setActiveModal( null );
|
||||
},
|
||||
[ changePaymentSettings, setActiveModal, setPersistent ]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-payment-methods">
|
||||
<PaymentMethodCard
|
||||
id="ppcp-paypal-checkout-card"
|
||||
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Select your preferred checkout option with PayPal for easy payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-standard.svg"
|
||||
methods={ methods.paypal }
|
||||
onTriggerModal={ setActiveModal }
|
||||
/>
|
||||
<PaymentMethodCard
|
||||
id="ppcp-card-payments-card"
|
||||
title={ __(
|
||||
'Online Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Select your preferred card payment options for efficient payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-online-methods.svg"
|
||||
methods={ methods.cardPayment }
|
||||
onTriggerModal={ setActiveModal }
|
||||
/>
|
||||
<PaymentMethodCard
|
||||
id="ppcp-alternative-payments-card"
|
||||
title={ __(
|
||||
'Alternative Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'With alternative payment methods, customers across the globe can pay with their bank accounts and other local payment methods.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-alternative-methods.svg"
|
||||
methods={ methods.apm }
|
||||
onTriggerModal={ setActiveModal }
|
||||
/>
|
||||
|
||||
{ activeModal && (
|
||||
<Modal
|
||||
method={ getActiveMethod() }
|
||||
setModalIsVisible={ () => setActiveModal( null ) }
|
||||
onSave={ handleSave }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabPaymentMethods;
|
||||
|
||||
const PaymentMethodCard = ( {
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
methods,
|
||||
onTriggerModal,
|
||||
} ) => (
|
||||
<SettingsCard
|
||||
id={ id }
|
||||
title={ title }
|
||||
description={ description }
|
||||
icon={ icon }
|
||||
contentContainer={ false }
|
||||
>
|
||||
<PaymentMethodsBlock
|
||||
paymentMethods={ methods }
|
||||
onTriggerModal={ onTriggerModal }
|
||||
/>
|
||||
</SettingsCard>
|
||||
);
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import TabOverview from './TabOverview';
|
||||
import TabPaymentMethods from '../../Overview/TabPaymentMethods';
|
||||
import TabPaymentMethods from './TabPaymentMethods';
|
||||
import TabSettings from './TabSettings';
|
||||
import TabStyling from './TabStyling';
|
||||
import TabPayLaterMessaging from '../../Overview/TabPayLaterMessaging';
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export default {
|
|||
SET_PERSISTENT: 'PAYMENT:SET_PERSISTENT',
|
||||
RESET: 'PAYMENT:RESET',
|
||||
HYDRATE: 'PAYMENT:HYDRATE',
|
||||
CHANGE_PAYMENT_SETTING: 'PAYMENT:CHANGE_PAYMENT_SETTING',
|
||||
|
||||
// Controls - always start with "DO_".
|
||||
DO_PERSIST_DATA: 'PAYMENT:DO_PERSIST_DATA',
|
||||
|
|
|
|||
|
|
@ -37,27 +37,17 @@ export const hydrate = ( payload ) => ( {
|
|||
} );
|
||||
|
||||
/**
|
||||
* Transient. Marks the store as "ready", i.e., fully initialized.
|
||||
* Generic transient-data updater.
|
||||
*
|
||||
* @param {boolean} isReady
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsReady = ( isReady ) => ( {
|
||||
export const setTransient = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { isReady },
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Side effect. Triggers the persistence of store data to the server.
|
||||
*
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const persist = function* () {
|
||||
const data = yield select( STORE_NAME ).persistentData();
|
||||
|
||||
yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
|
||||
};
|
||||
|
||||
/**
|
||||
* Generic persistent-data updater.
|
||||
*
|
||||
|
|
@ -69,3 +59,34 @@ export const setPersistent = ( prop, value ) => ( {
|
|||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Transient. Marks the store as "ready", i.e., fully initialized.
|
||||
*
|
||||
* @param {boolean} isReady
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
|
||||
|
||||
/**
|
||||
* Modify properties of a specific payment method.
|
||||
*
|
||||
* @param {string} id The payment method ID.
|
||||
* @param {Object} props New props.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const changePaymentSettings = ( id, props ) => ( {
|
||||
type: ACTION_TYPES.CHANGE_PAYMENT_SETTING,
|
||||
payload: { id, props },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Side effect. Triggers the persistence of store data to the server.
|
||||
*
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const persist = function* () {
|
||||
const data = yield select( STORE_NAME ).persistentData();
|
||||
|
||||
yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,60 +7,53 @@
|
|||
* @file
|
||||
*/
|
||||
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
|
||||
import { STORE_NAME } from './constants';
|
||||
|
||||
const useTransient = ( key ) =>
|
||||
useSelect(
|
||||
( select ) => select( STORE_NAME ).transientData()?.[ key ],
|
||||
[ key ]
|
||||
);
|
||||
|
||||
const usePersistent = ( key ) =>
|
||||
useSelect(
|
||||
( select ) => select( STORE_NAME ).persistentData()?.[ key ],
|
||||
[ key ]
|
||||
);
|
||||
import { createHooksForStore } from '../utils';
|
||||
|
||||
const useHooks = () => {
|
||||
const { persist, setPersistent } = useDispatch( STORE_NAME );
|
||||
const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
|
||||
const { persist, setPersistent, changePaymentSettings } =
|
||||
useDispatch( STORE_NAME );
|
||||
|
||||
// Read-only flags and derived state.
|
||||
// Nothing here yet.
|
||||
|
||||
// Transient accessors.
|
||||
const isReady = useTransient( 'isReady' );
|
||||
const [ isReady ] = useTransient( 'isReady' );
|
||||
|
||||
// PayPal checkout.
|
||||
const paypal = usePersistent( 'ppcp-gateway' );
|
||||
const venmo = usePersistent( 'venmo' );
|
||||
const payLater = usePersistent( 'pay-later' );
|
||||
const creditCard = usePersistent( 'ppcp-card-button-gateway' );
|
||||
const [ paypal ] = usePersistent( 'ppcp-gateway' );
|
||||
const [ venmo ] = usePersistent( 'venmo' );
|
||||
const [ payLater ] = usePersistent( 'pay-later' );
|
||||
const [ creditCard ] = usePersistent( 'ppcp-card-button-gateway' );
|
||||
|
||||
// Online card Payments.
|
||||
const advancedCreditCard = usePersistent( 'ppcp-credit-card-gateway' );
|
||||
const fastlane = usePersistent( 'ppcp-axo-gateway' );
|
||||
const applePay = usePersistent( 'ppcp-applepay' );
|
||||
const googlePay = usePersistent( 'ppcp-googlepay' );
|
||||
const [ advancedCreditCard ] = usePersistent( 'ppcp-credit-card-gateway' );
|
||||
const [ fastlane ] = usePersistent( 'ppcp-axo-gateway' );
|
||||
const [ applePay ] = usePersistent( 'ppcp-applepay' );
|
||||
const [ googlePay ] = usePersistent( 'ppcp-googlepay' );
|
||||
|
||||
// Alternative payment methods.
|
||||
const bancontact = usePersistent( 'ppcp-bancontact' );
|
||||
const blik = usePersistent( 'ppcp-blik' );
|
||||
const eps = usePersistent( 'ppcp-eps' );
|
||||
const ideal = usePersistent( 'ppcp-ideal' );
|
||||
const mybank = usePersistent( 'ppcp-mybank' );
|
||||
const p24 = usePersistent( 'ppcp-p24' );
|
||||
const trustly = usePersistent( 'ppcp-trustly' );
|
||||
const multibanco = usePersistent( 'ppcp-multibanco' );
|
||||
const pui = usePersistent( 'ppcp-pay-upon-invoice-gateway' );
|
||||
const oxxo = usePersistent( 'ppcp-oxxo-gateway' );
|
||||
const [ bancontact ] = usePersistent( 'ppcp-bancontact' );
|
||||
const [ blik ] = usePersistent( 'ppcp-blik' );
|
||||
const [ eps ] = usePersistent( 'ppcp-eps' );
|
||||
const [ ideal ] = usePersistent( 'ppcp-ideal' );
|
||||
const [ mybank ] = usePersistent( 'ppcp-mybank' );
|
||||
const [ p24 ] = usePersistent( 'ppcp-p24' );
|
||||
const [ trustly ] = usePersistent( 'ppcp-trustly' );
|
||||
const [ multibanco ] = usePersistent( 'ppcp-multibanco' );
|
||||
const [ pui ] = usePersistent( 'ppcp-pay-upon-invoice-gateway' );
|
||||
const [ oxxo ] = usePersistent( 'ppcp-oxxo-gateway' );
|
||||
|
||||
// Custom modal data.
|
||||
const paypalShowLogo = usePersistent( 'paypalShowLogo' );
|
||||
const threeDSecure = usePersistent( 'threeDSecure' );
|
||||
const fastlaneCardholderName = usePersistent( 'fastlaneCardholderName' );
|
||||
const fastlaneDisplayWatermark = usePersistent(
|
||||
const [ paypalShowLogo ] = usePersistent( 'paypalShowLogo' );
|
||||
const [ threeDSecure ] = usePersistent( 'threeDSecure' );
|
||||
const [ fastlaneCardholderName ] = usePersistent(
|
||||
'fastlaneCardholderName'
|
||||
);
|
||||
const [ fastlaneDisplayWatermark ] = usePersistent(
|
||||
'fastlaneDisplayWatermark'
|
||||
);
|
||||
|
||||
|
|
@ -68,6 +61,7 @@ const useHooks = () => {
|
|||
persist,
|
||||
isReady,
|
||||
setPersistent,
|
||||
changePaymentSettings,
|
||||
paypal,
|
||||
venmo,
|
||||
payLater,
|
||||
|
|
@ -94,21 +88,26 @@ const useHooks = () => {
|
|||
};
|
||||
|
||||
export const useStore = () => {
|
||||
const { persist, isReady } = useHooks();
|
||||
return { persist, isReady };
|
||||
const { persist, isReady, setPersistent, changePaymentSettings } =
|
||||
useHooks();
|
||||
return { persist, isReady, setPersistent, changePaymentSettings };
|
||||
};
|
||||
|
||||
export const usePaymentMethods = () => {
|
||||
const {
|
||||
setPersistent,
|
||||
// PayPal Checkout.
|
||||
paypal,
|
||||
venmo,
|
||||
payLater,
|
||||
creditCard,
|
||||
|
||||
// Online card payments.
|
||||
advancedCreditCard,
|
||||
fastlane,
|
||||
applePay,
|
||||
googlePay,
|
||||
|
||||
// Local APMs.
|
||||
bancontact,
|
||||
blik,
|
||||
eps,
|
||||
|
|
@ -121,6 +120,25 @@ export const usePaymentMethods = () => {
|
|||
oxxo,
|
||||
} = useHooks();
|
||||
|
||||
const payPalCheckout = [ paypal, venmo, payLater, creditCard ];
|
||||
const onlineCardPayments = [
|
||||
advancedCreditCard,
|
||||
fastlane,
|
||||
applePay,
|
||||
googlePay,
|
||||
];
|
||||
const alternative = [
|
||||
bancontact,
|
||||
blik,
|
||||
eps,
|
||||
ideal,
|
||||
mybank,
|
||||
p24,
|
||||
trustly,
|
||||
multibanco,
|
||||
pui,
|
||||
oxxo,
|
||||
];
|
||||
const paymentMethods = [
|
||||
paypal,
|
||||
venmo,
|
||||
|
|
@ -143,8 +161,10 @@ export const usePaymentMethods = () => {
|
|||
];
|
||||
|
||||
return {
|
||||
setPersistent,
|
||||
paymentMethods,
|
||||
all: paymentMethods,
|
||||
paypal: payPalCheckout,
|
||||
cardPayment: onlineCardPayments,
|
||||
apm: alternative,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -163,64 +183,3 @@ export const usePaymentMethodsModal = () => {
|
|||
fastlaneDisplayWatermark,
|
||||
};
|
||||
};
|
||||
|
||||
export const usePaymentMethodsPayPalCheckout = () => {
|
||||
const { paypal, venmo, payLater, creditCard } = useHooks();
|
||||
|
||||
const paymentMethodsPayPalCheckout = [
|
||||
paypal,
|
||||
venmo,
|
||||
payLater,
|
||||
creditCard,
|
||||
].filter( ( item ) => Object.keys( item ).length !== 0 );
|
||||
|
||||
return {
|
||||
paymentMethodsPayPalCheckout,
|
||||
};
|
||||
};
|
||||
|
||||
export const usePaymentMethodsOnlineCardPayments = () => {
|
||||
const { advancedCreditCard, fastlane, applePay, googlePay } = useHooks();
|
||||
const paymentMethodsOnlineCardPayments = [
|
||||
advancedCreditCard,
|
||||
fastlane,
|
||||
applePay,
|
||||
googlePay,
|
||||
].filter( ( item ) => Object.keys( item ).length !== 0 );
|
||||
|
||||
return {
|
||||
paymentMethodsOnlineCardPayments,
|
||||
};
|
||||
};
|
||||
|
||||
export const usePaymentMethodsAlternative = () => {
|
||||
const {
|
||||
bancontact,
|
||||
blik,
|
||||
eps,
|
||||
ideal,
|
||||
mybank,
|
||||
p24,
|
||||
trustly,
|
||||
multibanco,
|
||||
pui,
|
||||
oxxo,
|
||||
} = useHooks();
|
||||
|
||||
const paymentMethodsAlternative = [
|
||||
bancontact,
|
||||
blik,
|
||||
eps,
|
||||
ideal,
|
||||
mybank,
|
||||
p24,
|
||||
trustly,
|
||||
multibanco,
|
||||
pui,
|
||||
oxxo,
|
||||
].filter( ( item ) => Object.keys( item ).length !== 0 );
|
||||
|
||||
return {
|
||||
paymentMethodsAlternative,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -57,6 +57,20 @@ const reducer = createReducer( defaultTransient, defaultPersistent, {
|
|||
[ ACTION_TYPES.SET_PERSISTENT ]: ( state, payload ) =>
|
||||
changePersistent( state, payload ),
|
||||
|
||||
[ ACTION_TYPES.CHANGE_PAYMENT_SETTING ]: ( state, payload ) => {
|
||||
const methodId = payload.id;
|
||||
const oldProps = state.data[ methodId ];
|
||||
|
||||
if ( ! oldProps || oldProps.id !== methodId ) {
|
||||
return state;
|
||||
}
|
||||
|
||||
return changePersistent( state, {
|
||||
...state,
|
||||
[ methodId ]: { ...oldProps, ...payload.props },
|
||||
} );
|
||||
},
|
||||
|
||||
[ ACTION_TYPES.RESET ]: ( state ) => {
|
||||
const cleanState = changeTransient(
|
||||
changePersistent( state, defaultPersistent ),
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { useCallback } from '@wordpress/element';
|
||||
|
||||
import {
|
||||
CommonHooks,
|
||||
PaymentHooks,
|
||||
|
|
@ -12,7 +14,7 @@ export const useSaveSettings = () => {
|
|||
const { persist: persistSettings } = SettingsHooks.useStore();
|
||||
const { persist: persistStyling } = StylingHooks.useStore();
|
||||
|
||||
const persistAll = () => {
|
||||
const persistAll = useCallback( () => {
|
||||
withActivity(
|
||||
'persist-methods',
|
||||
'Save payment methods',
|
||||
|
|
@ -28,7 +30,7 @@ export const useSaveSettings = () => {
|
|||
'Save styling details',
|
||||
persistStyling
|
||||
);
|
||||
};
|
||||
}, [ persistPayment, persistSettings, persistStyling, withActivity ] );
|
||||
|
||||
return { persistAll };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -37,24 +37,18 @@ class SettingsModel {
|
|||
$settings = get_option( self::OPTION_NAME, array() );
|
||||
|
||||
$formatted = array(
|
||||
'invoicePrefix' => $settings['invoice_prefix'] ?? '',
|
||||
'authorizeOnly' => (bool) ( $settings['authorize_only'] ?? false ),
|
||||
'captureVirtualOnlyOrders' => (bool) ( $settings['capture_virtual_only_orders'] ?? false ),
|
||||
'savePaypalAndVenmo' => (bool) ( $settings['save_paypal_and_venmo'] ?? false ),
|
||||
'saveCardDetails' => (bool) ( $settings['save_credit_card_and_debit_card'] ?? false ),
|
||||
'payNowExperience' => (bool) ( $settings['pay_now_experience'] ?? false ),
|
||||
'sandboxAccountCredentials' => (bool) ( $settings['sandbox_account_credentials'] ?? false ),
|
||||
'sandboxMode' => $settings['sandbox_mode'] ?? null,
|
||||
'sandboxEnabled' => (bool) ( $settings['sandbox_enabled'] ?? false ),
|
||||
'sandboxClientId' => $settings['sandbox_client_id'] ?? '',
|
||||
'sandboxSecretKey' => $settings['sandbox_secret_key'] ?? '',
|
||||
'sandboxConnected' => (bool) ( $settings['sandbox_connected'] ?? false ),
|
||||
'logging' => (bool) ( $settings['logging'] ?? false ),
|
||||
'subtotalAdjustment' => $settings['subtotal_mismatch_fallback'] ?? null,
|
||||
'brandName' => $settings['brand_name'] ?? '',
|
||||
'softDescriptor' => $settings['soft_descriptor'] ?? '',
|
||||
'landingPage' => $settings['paypal_landing_page'] ?? null,
|
||||
'buttonLanguage' => $settings['button_language'] ?? '',
|
||||
'invoicePrefix' => $settings['invoice_prefix'] ?? '',
|
||||
'authorizeOnly' => (bool) ( $settings['authorize_only'] ?? false ),
|
||||
'captureVirtualOnlyOrders' => (bool) ( $settings['capture_virtual_only_orders'] ?? false ),
|
||||
'savePaypalAndVenmo' => (bool) ( $settings['save_paypal_and_venmo'] ?? false ),
|
||||
'saveCardDetails' => (bool) ( $settings['save_credit_card_and_debit_card'] ?? false ),
|
||||
'payNowExperience' => (bool) ( $settings['pay_now_experience'] ?? false ),
|
||||
'logging' => (bool) ( $settings['logging'] ?? false ),
|
||||
'subtotalAdjustment' => $settings['subtotal_mismatch_fallback'] ?? null,
|
||||
'brandName' => $settings['brand_name'] ?? '',
|
||||
'softDescriptor' => $settings['soft_descriptor'] ?? '',
|
||||
'landingPage' => $settings['paypal_landing_page'] ?? null,
|
||||
'buttonLanguage' => $settings['button_language'] ?? '',
|
||||
);
|
||||
|
||||
return $formatted;
|
||||
|
|
@ -78,12 +72,6 @@ class SettingsModel {
|
|||
'save_paypal_and_venmo' => (bool) ( $data['savePaypalAndVenmo'] ?? false ),
|
||||
'save_credit_card_and_debit_card' => (bool) ( $data['saveCardDetails'] ?? false ),
|
||||
'pay_now_experience' => (bool) ( $data['payNowExperience'] ?? false ),
|
||||
'sandbox_account_credentials' => (bool) ( $data['sandboxAccountCredentials'] ?? false ),
|
||||
'sandbox_mode' => $data['sandboxMode'] ?? null,
|
||||
'sandbox_enabled' => (bool) ( $data['sandboxEnabled'] ?? false ),
|
||||
'sandbox_client_id' => $data['sandboxClientId'] ?? '',
|
||||
'sandbox_secret_key' => $data['sandboxSecretKey'] ?? '',
|
||||
'sandbox_connected' => (bool) ( $data['sandboxConnected'] ?? false ),
|
||||
'logging' => (bool) ( $data['logging'] ?? false ),
|
||||
'subtotal_mismatch_fallback' => $data['subtotalAdjustment'] ?? null,
|
||||
'brand_name' => $data['brandName'] ?? '',
|
||||
|
|
|
|||
|
|
@ -576,7 +576,7 @@ class PaymentRestEndpoint extends RestEndpoint {
|
|||
'OXXO is a Mexican chain of convenience stores. *Get PayPal account permission to use OXXO payment functionality by contacting us at (+52) 800–925–0304',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'icon' => '',
|
||||
'icon' => 'payment-method-oxxo',
|
||||
'itemTitle' => __( 'OXXO', 'woocommerce-paypal-payments' ),
|
||||
'itemDescription' => __(
|
||||
'OXXO is a Mexican chain of convenience stores. *Get PayPal account permission to use OXXO payment functionality by contacting us at (+52) 800–925–0304',
|
||||
|
|
@ -669,7 +669,7 @@ class PaymentRestEndpoint extends RestEndpoint {
|
|||
|
||||
$gateway_settings[ $key ] = array(
|
||||
'enabled' => 'yes' === $gateway->enabled,
|
||||
'title' => $gateway->get_title(),
|
||||
'title' => str_replace( '&', '&', $gateway->get_title() ),
|
||||
'description' => $gateway->get_description(),
|
||||
'id' => $this->gateways()[ $key ]['id'] ?? $key,
|
||||
'icon' => $this->gateways()[ $key ]['icon'] ?? '',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
