mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
Merge pull request #2987 from woocommerce/PCP-4095-redux-store-for-styles
Add Redux store for "Styling" tab (4095)
This commit is contained in:
Philipp Stracker
GitHub
commit
339d34e715
62 changed files with 2466 additions and 1033 deletions
|
|
@ -43,3 +43,14 @@
|
|||
display: flex;
|
||||
gap: $gap;
|
||||
}
|
||||
|
||||
@mixin disabled-state($control-type) {
|
||||
.components-#{$control-type}-control.is-disabled {
|
||||
.components-#{$control-type}-control__input,
|
||||
.components-#{$control-type}-control__label,
|
||||
.components-base-control__help {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@ $card-vertical-gap: 48px;
|
|||
--color-gray-100: #{$color-gray-100};
|
||||
--color-gradient-dark: #{$color-gradient-dark};
|
||||
|
||||
--color-preview-background: #FAF8F5;
|
||||
--color-separators: #{$color-gray-200};
|
||||
--color-text-title: #{$color-gray-900};
|
||||
--color-text-main: #{$color-text-text};
|
||||
--color-text-teriary: #{$color-text-tertiary};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
@import './reusable-components/busy-state';
|
||||
@import './reusable-components/button';
|
||||
@import './reusable-components/fields';
|
||||
@import './reusable-components/hstack';
|
||||
@import './reusable-components/navigation';
|
||||
@import './reusable-components/onboarding-header';
|
||||
@import './reusable-components/payment-method-icons';
|
||||
|
|
|
|||
|
|
@ -1,27 +1,96 @@
|
|||
.ppcp-r {
|
||||
.ppcp-r__radio-value {
|
||||
@include hide-input-field;
|
||||
|
||||
&__radio-value {
|
||||
@include hide-input-field;
|
||||
&:checked + .ppcp-r__radio-presentation {
|
||||
position: relative;
|
||||
|
||||
&:checked + .ppcp-r__radio-presentation {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: $color-blueberry;
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
background-color: $color-blueberry;
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
.ppcp-r__radio-presentation {
|
||||
@include fake-input-field(20px);
|
||||
}
|
||||
|
||||
.ppcp-r__checkbox-presentation {
|
||||
@include fake-input-field(2px);
|
||||
}
|
||||
|
||||
.ppcp-r__radio-wrapper {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r__radio-description {
|
||||
@include font(13, 20, 400);
|
||||
margin: 0;
|
||||
color: $color-gray-800;
|
||||
}
|
||||
|
||||
.ppcp-r__radio-content-additional {
|
||||
padding-left: 38px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
|
||||
.ppcp-r-app {
|
||||
@include disabled-state('base');
|
||||
@include disabled-state('checkbox');
|
||||
|
||||
.components-base-control__label {
|
||||
@include font(13, 16, 600);
|
||||
color: $color-gray-900;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.components-base-control__input {
|
||||
border: 1px solid $color-gray-700;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
.components-base-control__help {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Text input fields.
|
||||
input[type='text'] {
|
||||
@include font(14, 20, 400);
|
||||
@include primaryFont;
|
||||
padding: 7px 11px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// Select lists.
|
||||
select {
|
||||
@include font(14, 20, 400);
|
||||
padding: 7px 27px 7px 11px;
|
||||
}
|
||||
|
||||
// Checkboxes.
|
||||
.components-checkbox-control {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
|
|
@ -30,7 +99,7 @@
|
|||
|
||||
&:checked {
|
||||
background-color: $color-blueberry;
|
||||
border-color:$color-blueberry;
|
||||
border-color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -43,78 +112,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__radio-presentation {
|
||||
@include fake-input-field(20px);
|
||||
// Custom styles.
|
||||
.components-form-toggle.is-checked > .components-form-toggle__track {
|
||||
background-color: $color-blueberry;
|
||||
}
|
||||
|
||||
&__checkbox-presentation {
|
||||
@include fake-input-field(2px);
|
||||
}
|
||||
|
||||
&__radio-wrapper {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-description {
|
||||
@include font(13, 20, 400);
|
||||
margin: 0;
|
||||
color: $color-gray-800;
|
||||
}
|
||||
|
||||
&__radio-content-additional {
|
||||
padding-left: 38px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.components-base-control {
|
||||
&__label {
|
||||
color: $color-gray-900;
|
||||
@include font(13, 16, 600);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
&__input {
|
||||
border: 1px solid $color-gray-700;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $color-blueberry;
|
||||
.ppcp-r-vertical-text-control {
|
||||
.components-base-control__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type='text'] {
|
||||
padding: 7px 11px;
|
||||
@include font(14, 20, 400);
|
||||
@include primaryFont;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 7px 27px 7px 11px;
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
|
||||
.components-form-toggle.is-checked > .components-form-toggle__track {
|
||||
background-color: $color-blueberry;
|
||||
}
|
||||
|
||||
.ppcp-r-vertical-text-control {
|
||||
.components-base-control__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
.components-flex {
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
|
||||
.components-h-stack {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
// Fix layout for checkboxes inside a flex-stack.
|
||||
.components-checkbox-control >.components-base-control__field > .components-flex {
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
.ppcp-r-settings-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px 0;
|
||||
gap: var(--block-item-gap, 16px);
|
||||
|
||||
&.ppcp-r-settings-block__input,
|
||||
&.ppcp-r-settings-block__select {
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
|
||||
padding-bottom: 6px;
|
||||
&:not(:last-child) {
|
||||
padding-bottom: var(--block-header-gap, 6px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +27,15 @@
|
|||
display: block;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.style-alt {
|
||||
@include font(14, 16, 600);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
&.style-big {
|
||||
@include font(16, 20, 600);
|
||||
}
|
||||
|
||||
.ppcp-r-title-badge {
|
||||
text-transform: none;
|
||||
margin-left: 6px;
|
||||
|
|
@ -88,9 +97,18 @@
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.components-flex {
|
||||
row-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+ .ppcp-r-settings-block:not(.no-gap) {
|
||||
margin-top: 32px;
|
||||
padding-top: 32px;
|
||||
margin-top: var(--block-separator-gap, 32px);
|
||||
padding-top: var(--block-separator-gap, 32px);
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import './settings/input';
|
||||
@import './settings/connection-status';
|
||||
@import './settings/tab-styling';
|
||||
@import './settings/tab-paylater-configurator';
|
||||
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.ppcp-r-todo-item__inner {
|
||||
.ppcp-r-todo-item__description {
|
||||
color: $color-text-text;
|
||||
|
|
@ -117,91 +119,7 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
margin-top:24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Connection Status
|
||||
.ppcp-r-connection-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
&__status-status {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
strong {
|
||||
@include font(14, 24, 700);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&__show-all-data {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&__status-label {
|
||||
@include font(11, 22, 600);
|
||||
color: $color-gray-900;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__status-value {
|
||||
@include font(13, 26, 400);
|
||||
color: $color-text-tertiary;
|
||||
}
|
||||
|
||||
&__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__status-toggle--toggled {
|
||||
.ppcp-r-connection-status__show-all-data {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__status-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
strong {
|
||||
@include font(14, 24, 600);
|
||||
color: $color-gray-800;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status__status-toggle {
|
||||
line-height: 0;
|
||||
}
|
||||
&--first {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-wrap: wrap;
|
||||
&__status {
|
||||
width: 100%;
|
||||
}
|
||||
&__status-row {
|
||||
flex-wrap: wrap;
|
||||
strong {
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
// Connection Status
|
||||
.ppcp-r-connection-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
&__status-status {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
strong {
|
||||
@include font(14, 24, 700);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&__status-label {
|
||||
@include font(11, 22, 600);
|
||||
color: $color-gray-900;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__status-value {
|
||||
@include font(13, 26, 400);
|
||||
color: $color-text-tertiary;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__status-toggle--toggled {
|
||||
.ppcp-r-connection-status__show-all-data {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__status-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
strong {
|
||||
@include font(14, 24, 600);
|
||||
color: $color-gray-800;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status__status-toggle {
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-wrap: wrap;
|
||||
&__status {
|
||||
width: 100%;
|
||||
}
|
||||
&__status-row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
strong {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.ppcp-r-paylater-configurator {
|
||||
display: flex;
|
||||
border: 1px solid $color-gray-200;
|
||||
border: 1px solid var(--color-separators);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,121 +1,96 @@
|
|||
.ppcp-r-styling {
|
||||
--block-item-gap: 0;
|
||||
--block-separator-gap: 24px;
|
||||
--block-header-gap: 18px;
|
||||
--panel-width: 422px;
|
||||
--sticky-offset-top: 92px; // 32px admin-bar + 60px TopNavigation height
|
||||
--preview-height-reduction: 236px; // 32px admin-bar + 60px TopNavigation height + 48px TopNavigation margin + 48px TabList height + 48px TabList margin
|
||||
|
||||
display: flex;
|
||||
border: 1px solid $color-gray-200;
|
||||
border: 1px solid var(--color-separators);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&__section:not(:last-child) {
|
||||
border-bottom: 1px solid black;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 1px solid $color-gray-600;
|
||||
.ppcp-r-settings-block {
|
||||
&.header-section {
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
&.location-selector {
|
||||
position: sticky;
|
||||
top: var(--sticky-offset-top);
|
||||
background: var(--ppcp-color-app-bg);
|
||||
z-index: 5;
|
||||
padding: 16px 10px 8px;
|
||||
margin: 0 -10px -8px;
|
||||
|
||||
.section-content {
|
||||
display: flex;
|
||||
|
||||
& > .components-base-control:first-of-type {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Select-fields have a smaller gap between the header and input field.
|
||||
&.has-select {
|
||||
--block-header-gap: 8px;
|
||||
}
|
||||
|
||||
// Above the payment methods is a slightly larger gap.
|
||||
&.payment-methods {
|
||||
--block-separator-gap: 28px;
|
||||
}
|
||||
|
||||
// It has no header; adjusts the gap to the control right above the tagline.
|
||||
&.tagline {
|
||||
--block-header-gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-title {
|
||||
@include font(14, 20, 600);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 8px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
&__settings {
|
||||
width: 422px;
|
||||
background-color: $color-white;
|
||||
/* The settings-panel (left side) */
|
||||
.settings-panel {
|
||||
width: var(--panel-width);
|
||||
padding: 48px;
|
||||
|
||||
.ppcp-r-styling__section {
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 1px solid var(--color-separators);
|
||||
|
||||
&.no-gap,
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal radio buttons have a width of 100px.
|
||||
.components-radio-control__option {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: calc(100% - 422px);
|
||||
background-color: #FAF8F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* The preview area (right side) */
|
||||
.preview-panel {
|
||||
width: calc(100% - var(--panel-width));
|
||||
background-color: var(--color-preview-background);
|
||||
z-index: 0;
|
||||
|
||||
&-inner {
|
||||
.preview-panel-inner {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
height: calc(100vh - var(--preview-height-reduction));
|
||||
top: var(--sticky-offset-top);
|
||||
|
||||
&__section--rc {
|
||||
.ppcp-r-styling__title {
|
||||
@include font(13, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__section--empty.ppcp-r-styling__section {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__select {
|
||||
label {
|
||||
@include font(13, 16, 600);
|
||||
color: $color-black;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
select {
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r__checkbox {
|
||||
.components-checkbox-control {
|
||||
&__label {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.components-flex {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__payment-method-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r {
|
||||
&__horizontal-control {
|
||||
.components-flex {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
|
||||
.components-radio-control {
|
||||
&__option {
|
||||
gap: 12px;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
// Disable interactions with the preview.
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,138 @@
|
|||
import { CheckboxControl } from '@wordpress/components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const PayPalCheckbox = ( props ) => {
|
||||
let isChecked = null;
|
||||
export const PayPalCheckbox = ( {
|
||||
currentValue,
|
||||
label,
|
||||
value,
|
||||
checked = null,
|
||||
disabled = null,
|
||||
changeCallback,
|
||||
} ) => {
|
||||
let isChecked = checked;
|
||||
|
||||
if ( Array.isArray( props.currentValue ) ) {
|
||||
isChecked = props.currentValue.includes( props.value );
|
||||
} else {
|
||||
isChecked = props.currentValue;
|
||||
if ( null === isChecked ) {
|
||||
if ( Array.isArray( currentValue ) ) {
|
||||
isChecked = currentValue.includes( value );
|
||||
} else {
|
||||
isChecked = currentValue;
|
||||
}
|
||||
}
|
||||
|
||||
const className = classNames( { 'is-disabled': disabled } );
|
||||
|
||||
const onChange = ( newState ) => {
|
||||
let newValue;
|
||||
|
||||
if ( ! Array.isArray( currentValue ) ) {
|
||||
newValue = newState;
|
||||
} else if ( newState ) {
|
||||
newValue = [ ...currentValue, value ];
|
||||
} else {
|
||||
newValue = currentValue.filter(
|
||||
( optionValue ) => optionValue !== value
|
||||
);
|
||||
}
|
||||
|
||||
changeCallback( newValue );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
<CheckboxControl
|
||||
label={ props?.label ? props.label : '' }
|
||||
value={ props.value }
|
||||
checked={ isChecked }
|
||||
onChange={ ( checked ) =>
|
||||
handleCheckboxState( checked, props )
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<CheckboxControl
|
||||
label={ label }
|
||||
value={ value }
|
||||
checked={ isChecked }
|
||||
disabled={ disabled }
|
||||
onChange={ onChange }
|
||||
className={ className }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalCheckboxGroup = ( props ) => {
|
||||
const renderCheckboxGroup = () => {
|
||||
return props.value.map( ( checkbox ) => {
|
||||
return (
|
||||
<PayPalCheckbox
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
key={ checkbox.value }
|
||||
currentValue={ props.currentValue }
|
||||
changeCallback={ props.changeCallback }
|
||||
/>
|
||||
);
|
||||
} );
|
||||
};
|
||||
export const CheckboxGroup = ( { options, value, onChange } ) => (
|
||||
<>
|
||||
{ options.map( ( checkbox ) => (
|
||||
<PayPalCheckbox
|
||||
key={ checkbox.value }
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
checked={ checkbox.checked }
|
||||
disabled={ checkbox.disabled }
|
||||
description={ checkbox.description }
|
||||
tooltip={ checkbox.tooltip }
|
||||
currentValue={ value }
|
||||
changeCallback={ onChange }
|
||||
/>
|
||||
) ) }
|
||||
</>
|
||||
);
|
||||
|
||||
return <>{ renderCheckboxGroup() }</>;
|
||||
};
|
||||
|
||||
export const PayPalRdb = ( props ) => {
|
||||
export const PayPalRdb = ( {
|
||||
id,
|
||||
name,
|
||||
value,
|
||||
currentValue,
|
||||
handleRdbState,
|
||||
} ) => {
|
||||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
{ /* todo: Can we remove the wrapper div? */ }
|
||||
<input
|
||||
id={ props?.id }
|
||||
className="ppcp-r__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ () => props.handleRdbState( props.value ) }
|
||||
id={ id }
|
||||
checked={ value === currentValue }
|
||||
name={ name }
|
||||
value={ value }
|
||||
onChange={ () => handleRdbState( value ) }
|
||||
/>
|
||||
<span className="ppcp-r__radio-presentation"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalRdbWithContent = ( props ) => {
|
||||
const className = [ 'ppcp-r__radio-wrapper' ];
|
||||
|
||||
if ( props?.className ) {
|
||||
className.push( props.className );
|
||||
}
|
||||
export const PayPalRdbWithContent = ( {
|
||||
className,
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
description,
|
||||
value,
|
||||
currentValue,
|
||||
handleRdbState,
|
||||
toggleAdditionalContent,
|
||||
children,
|
||||
} ) => {
|
||||
const wrapperClasses = classNames( 'ppcp-r__radio-wrapper', className );
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__radio-outer-wrapper">
|
||||
<div className={ className }>
|
||||
<PayPalRdb { ...props } />
|
||||
<div className={ wrapperClasses }>
|
||||
<PayPalRdb
|
||||
id={ id }
|
||||
name={ name }
|
||||
value={ value }
|
||||
currentValue={ currentValue }
|
||||
handleRdbState={ handleRdbState }
|
||||
/>
|
||||
|
||||
<div className="ppcp-r__radio-content">
|
||||
<label htmlFor={ props?.id }>{ props.label }</label>
|
||||
{ props.description && (
|
||||
<label htmlFor={ id }>{ label }</label>
|
||||
{ description && (
|
||||
<p
|
||||
className="ppcp-r__radio-description"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
__html: description,
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
{ props?.toggleAdditionalContent &&
|
||||
props.children &&
|
||||
props.value === props.currentValue && (
|
||||
<div className="ppcp-r__radio-content-additional">
|
||||
{ props.children }
|
||||
</div>
|
||||
) }
|
||||
{ toggleAdditionalContent && children && value === currentValue && (
|
||||
<div className="ppcp-r__radio-content-additional">
|
||||
{ children }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const handleCheckboxState = ( checked, props ) => {
|
||||
let newValue = null;
|
||||
if ( ! Array.isArray( props.currentValue ) ) {
|
||||
newValue = checked;
|
||||
} else if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
);
|
||||
}
|
||||
props.changeCallback( newValue );
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* 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,9 +1,24 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
// Block Elements
|
||||
export const Title = ( { children, className = '' } ) => (
|
||||
<span className={ `ppcp-r-settings-block__title ${ className }`.trim() }>
|
||||
{ children }
|
||||
</span>
|
||||
);
|
||||
export const Title = ( {
|
||||
children,
|
||||
altStyle = false,
|
||||
big = false,
|
||||
className = '',
|
||||
} ) => {
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-block__title',
|
||||
className,
|
||||
{
|
||||
'style-alt': altStyle,
|
||||
'style-big': big,
|
||||
}
|
||||
);
|
||||
|
||||
return <span className={ elementClasses }>{ children }</span>;
|
||||
};
|
||||
|
||||
export const TitleWrapper = ( { children } ) => (
|
||||
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
|
||||
);
|
||||
|
|
@ -14,13 +29,28 @@ export const SupplementaryLabel = ( { children } ) => (
|
|||
</span>
|
||||
);
|
||||
|
||||
export const Description = ( { children, className = '' } ) => (
|
||||
<span
|
||||
className={ `ppcp-r-settings-block__description ${ className }`.trim() }
|
||||
>
|
||||
{ children }
|
||||
</span>
|
||||
);
|
||||
export const Description = ( { children, asHtml = false, className = '' } ) => {
|
||||
// Don't output anything if description is empty.
|
||||
if ( ! children ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-block__description',
|
||||
className
|
||||
);
|
||||
|
||||
if ( ! asHtml ) {
|
||||
return <span className={ elementClasses }>{ children }</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={ elementClasses }
|
||||
dangerouslySetInnerHTML={ { __html: children } }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Action = ( { children } ) => (
|
||||
<div className="ppcp-r-settings-block__action">{ children }</div>
|
||||
|
|
@ -33,11 +63,18 @@ export const Header = ( { children, className = '' } ) => (
|
|||
);
|
||||
|
||||
// Card Elements
|
||||
export const Content = ( { children, id = '' } ) => (
|
||||
<div id={ id } className="ppcp-r-settings-card__content">
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
export const Content = ( { children, className = '', id = '' } ) => {
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-card__content',
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<div id={ id } className={ elementClasses }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ContentWrapper = ( { children } ) => (
|
||||
<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
|
||||
|
|
|
|||
|
|
@ -1,336 +0,0 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { SelectControl, RadioControl } from '@wordpress/components';
|
||||
import { PayPalCheckboxGroup } from '../../ReusableComponents/Fields';
|
||||
import { useState, useMemo, useEffect } from '@wordpress/element';
|
||||
import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';
|
||||
|
||||
import {
|
||||
defaultLocationSettings,
|
||||
paymentMethodOptions,
|
||||
colorOptions,
|
||||
shapeOptions,
|
||||
buttonLayoutOptions,
|
||||
buttonLabelOptions,
|
||||
} from '../../../data/settings/tab-styling-data';
|
||||
|
||||
const TabStyling = () => {
|
||||
const [ location, setLocation ] = useState( 'cart' );
|
||||
const [ canRender, setCanRender ] = useState( false );
|
||||
const [ locationSettings, setLocationSettings ] = useState( {
|
||||
...defaultLocationSettings,
|
||||
} );
|
||||
|
||||
// Sometimes buttons won't render. This fixes the timing problem.
|
||||
useEffect( () => {
|
||||
const handleDOMContentLoaded = () => setCanRender( true );
|
||||
if (
|
||||
document.readyState === 'interactive' ||
|
||||
document.readyState === 'complete'
|
||||
) {
|
||||
handleDOMContentLoaded();
|
||||
} else {
|
||||
document.addEventListener(
|
||||
'DOMContentLoaded',
|
||||
handleDOMContentLoaded
|
||||
);
|
||||
}
|
||||
}, [] );
|
||||
|
||||
const currentLocationSettings = useMemo( () => {
|
||||
return locationSettings[ location ];
|
||||
}, [ location, locationSettings ] );
|
||||
|
||||
const locationOptions = useMemo( () => {
|
||||
return Object.keys( locationSettings ).reduce(
|
||||
( locationOptionsData, key ) => {
|
||||
locationOptionsData.push( {
|
||||
value: locationSettings[ key ].value,
|
||||
label: locationSettings[ key ].label,
|
||||
} );
|
||||
|
||||
return locationOptionsData;
|
||||
},
|
||||
[]
|
||||
);
|
||||
}, [] );
|
||||
|
||||
const updateButtonSettings = ( key, value ) => {
|
||||
setLocationSettings( {
|
||||
...locationSettings,
|
||||
[ location ]: {
|
||||
...currentLocationSettings,
|
||||
settings: {
|
||||
...currentLocationSettings.settings,
|
||||
[ key ]: value,
|
||||
},
|
||||
},
|
||||
} );
|
||||
};
|
||||
|
||||
const updateButtonStyle = ( key, value ) => {
|
||||
setLocationSettings( {
|
||||
...locationSettings,
|
||||
[ location ]: {
|
||||
...currentLocationSettings,
|
||||
settings: {
|
||||
...currentLocationSettings.settings,
|
||||
style: {
|
||||
...currentLocationSettings.settings.style,
|
||||
[ key ]: value,
|
||||
},
|
||||
},
|
||||
},
|
||||
} );
|
||||
};
|
||||
|
||||
if ( ! canRender ) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-styling">
|
||||
<div className="ppcp-r-styling__settings">
|
||||
<SectionIntro location={ location } />
|
||||
<SectionLocations
|
||||
locationOptions={ locationOptions }
|
||||
location={ location }
|
||||
setLocation={ setLocation }
|
||||
/>
|
||||
<SectionPaymentMethods
|
||||
locationSettings={ currentLocationSettings }
|
||||
updateButtonSettings={ updateButtonSettings }
|
||||
/>
|
||||
|
||||
<SectionButtonLayout
|
||||
locationSettings={ currentLocationSettings }
|
||||
updateButtonStyle={ updateButtonStyle }
|
||||
/>
|
||||
|
||||
<SectionButtonShape
|
||||
locationSettings={ currentLocationSettings }
|
||||
updateButtonStyle={ updateButtonStyle }
|
||||
/>
|
||||
<SectionButtonLabel
|
||||
locationSettings={ currentLocationSettings }
|
||||
updateButtonStyle={ updateButtonStyle }
|
||||
/>
|
||||
<SectionButtonColor
|
||||
locationSettings={ currentLocationSettings }
|
||||
updateButtonStyle={ updateButtonStyle }
|
||||
/>
|
||||
<SectionButtonTagline
|
||||
locationSettings={ currentLocationSettings }
|
||||
updateButtonStyle={ updateButtonStyle }
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-preview ppcp-r-button-preview ppcp-r-styling__preview">
|
||||
<div className="ppcp-r-styling__preview-inner">
|
||||
<SectionButtonPreview
|
||||
locationSettings={ currentLocationSettings }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TabStylingSection = ( props ) => {
|
||||
let sectionTitleClassName = 'ppcp-r-styling__section';
|
||||
|
||||
if ( props?.className ) {
|
||||
sectionTitleClassName += ` ${ props.className }`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ sectionTitleClassName }>
|
||||
<span className="ppcp-r-styling__title">{ props.title }</span>
|
||||
{ props?.description && (
|
||||
<p
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
} }
|
||||
className="ppcp-r-styling__description"
|
||||
/>
|
||||
) }
|
||||
{ props.children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionIntro = ( { location } ) => {
|
||||
const { description, descriptionLink } =
|
||||
defaultLocationSettings[ location ];
|
||||
const buttonStyleDescription = sprintf( description, descriptionLink );
|
||||
|
||||
return (
|
||||
<TabStylingSection
|
||||
className="ppcp-r-styling__section--rc ppcp-r-styling__section--empty"
|
||||
title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
|
||||
description={ buttonStyleDescription }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionLocations = ( { locationOptions, location, setLocation } ) => {
|
||||
return (
|
||||
<TabStylingSection className="ppcp-r-styling__section--rc">
|
||||
<SelectControl
|
||||
className="ppcp-r-styling__select"
|
||||
value={ location }
|
||||
onChange={ ( newLocation ) => setLocation( newLocation ) }
|
||||
label={ __( 'Locations', 'woocommerce-paypal-payments' ) }
|
||||
options={ locationOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionPaymentMethods = ( {
|
||||
locationSettings,
|
||||
updateButtonSettings,
|
||||
} ) => {
|
||||
return (
|
||||
<TabStylingSection
|
||||
title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
|
||||
className="ppcp-r-styling__section--rc"
|
||||
>
|
||||
<div className="ppcp-r-styling__payment-method-checkboxes">
|
||||
<PayPalCheckboxGroup
|
||||
value={ paymentMethodOptions }
|
||||
changeCallback={ ( newValue ) =>
|
||||
updateButtonSettings( 'paymentMethods', newValue )
|
||||
}
|
||||
currentValue={ locationSettings.settings.paymentMethods }
|
||||
/>
|
||||
</div>
|
||||
</TabStylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionButtonLayout = ( { locationSettings, updateButtonStyle } ) => {
|
||||
const buttonLayoutIsAllowed =
|
||||
locationSettings.settings.style?.layout &&
|
||||
locationSettings.settings.style?.tagline === false;
|
||||
return (
|
||||
buttonLayoutIsAllowed && (
|
||||
<TabStylingSection
|
||||
className="ppcp-r-styling__section--rc"
|
||||
title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
|
||||
>
|
||||
<RadioControl
|
||||
className="ppcp-r__horizontal-control"
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonStyle( 'layout', newValue )
|
||||
}
|
||||
selected={ locationSettings.settings.style.layout }
|
||||
options={ buttonLayoutOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const SectionButtonShape = ( { locationSettings, updateButtonStyle } ) => {
|
||||
return (
|
||||
<TabStylingSection
|
||||
title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
|
||||
className="ppcp-r-styling__section--rc"
|
||||
>
|
||||
<RadioControl
|
||||
className="ppcp-r__horizontal-control"
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonStyle( 'shape', newValue )
|
||||
}
|
||||
selected={ locationSettings.settings.style.shape }
|
||||
options={ shapeOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionButtonLabel = ( { locationSettings, updateButtonStyle } ) => {
|
||||
return (
|
||||
<TabStylingSection>
|
||||
<SelectControl
|
||||
className="ppcp-r-styling__select"
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonStyle( 'label', newValue )
|
||||
}
|
||||
value={ locationSettings.settings.style.label }
|
||||
label={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
|
||||
options={ buttonLabelOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionButtonColor = ( { locationSettings, updateButtonStyle } ) => {
|
||||
return (
|
||||
<TabStylingSection>
|
||||
<SelectControl
|
||||
className=" ppcp-r-styling__select"
|
||||
label={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
|
||||
onChange={ ( newValue ) =>
|
||||
updateButtonStyle( 'color', newValue )
|
||||
}
|
||||
value={ locationSettings.settings.style.color }
|
||||
options={ colorOptions }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionButtonTagline = ( { locationSettings, updateButtonStyle } ) => {
|
||||
const taglineIsAllowed =
|
||||
locationSettings.settings.style.hasOwnProperty( 'tagline' ) &&
|
||||
locationSettings.settings.style?.layout === 'horizontal';
|
||||
|
||||
return (
|
||||
taglineIsAllowed && (
|
||||
<TabStylingSection
|
||||
title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
|
||||
className="ppcp-r-styling__section--rc"
|
||||
>
|
||||
<PayPalCheckboxGroup
|
||||
value={ [
|
||||
{
|
||||
value: 'tagline',
|
||||
label: __(
|
||||
'Enable Tagline',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
] }
|
||||
changeCallback={ ( newValue ) => {
|
||||
updateButtonStyle( 'tagline', newValue );
|
||||
} }
|
||||
currentValue={ locationSettings.settings.style.tagline }
|
||||
/>
|
||||
</TabStylingSection>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const SectionButtonPreview = ( { locationSettings } ) => {
|
||||
return (
|
||||
<PayPalScriptProvider
|
||||
options={ {
|
||||
clientId: 'test',
|
||||
merchantId: 'QTQX5NP6N9WZU',
|
||||
components: 'buttons,googlepay',
|
||||
'disable-funding': 'card',
|
||||
'buyer-country': 'US',
|
||||
currency: 'USD',
|
||||
} }
|
||||
>
|
||||
<PayPalButtons
|
||||
style={ locationSettings.settings.style }
|
||||
forceReRender={ [ locationSettings.settings.style ] }
|
||||
>
|
||||
Error
|
||||
</PayPalButtons>
|
||||
</PayPalScriptProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabStyling;
|
||||
|
|
@ -1,16 +1,34 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { CommonHooks, StylingHooks } from '../../../../data';
|
||||
import TopNavigation from '../../../ReusableComponents/TopNavigation';
|
||||
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
|
||||
|
||||
const SettingsNavigation = () => {
|
||||
const { withActivity } = CommonHooks.useBusyState();
|
||||
|
||||
// Todo: Implement other stores here.
|
||||
const { persist: persistStyling } = StylingHooks.useStore();
|
||||
|
||||
const handleSaveClick = () => {
|
||||
// Todo: Add other stores here.
|
||||
withActivity(
|
||||
'persist-styling',
|
||||
'Save styling details',
|
||||
persistStyling
|
||||
);
|
||||
};
|
||||
|
||||
const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
|
||||
|
||||
return (
|
||||
<TopNavigation title={ title } exitOnTitleClick={ true }>
|
||||
<Button variant="primary" disabled={ false }>
|
||||
{ __( 'Save', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
<BusyStateWrapper>
|
||||
<Button variant="primary" onClick={ handleSaveClick }>
|
||||
{ __( 'Save', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</BusyStateWrapper>
|
||||
</TopNavigation>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import { SelectStylingSection } from '../Layout';
|
||||
|
||||
const SectionButtonColor = ( { location } ) => {
|
||||
const { color, setColor, choices } = StylingHooks.useColorProps( location );
|
||||
|
||||
return (
|
||||
<SelectStylingSection
|
||||
title={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
|
||||
className="button-color"
|
||||
options={ choices }
|
||||
value={ color }
|
||||
onChange={ setColor }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionButtonColor;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import { SelectStylingSection } from '../Layout';
|
||||
|
||||
const SectionButtonLabel = ( { location } ) => {
|
||||
const { label, setLabel, choices } = StylingHooks.useLabelProps( location );
|
||||
|
||||
return (
|
||||
<SelectStylingSection
|
||||
title={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
|
||||
className="button-label"
|
||||
options={ choices }
|
||||
value={ label }
|
||||
onChange={ setLabel }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionButtonLabel;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import { RadiobuttonStylingSection } from '../Layout';
|
||||
import { Tagline } from './index';
|
||||
|
||||
const SectionButtonLayout = ( { location } ) => {
|
||||
const { isAvailable, layout, setLayout, choices } =
|
||||
StylingHooks.useLayoutProps( location );
|
||||
|
||||
if ( ! isAvailable ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<RadiobuttonStylingSection
|
||||
className="button-layout"
|
||||
title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
|
||||
options={ choices }
|
||||
selected={ layout }
|
||||
onChange={ setLayout }
|
||||
/>
|
||||
<Tagline location={ location } />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionButtonLayout;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import { RadiobuttonStylingSection } from '../Layout';
|
||||
|
||||
const SectionButtonShape = ( { location } ) => {
|
||||
const { shape, setShape, choices } = StylingHooks.useShapeProps( location );
|
||||
|
||||
return (
|
||||
<RadiobuttonStylingSection
|
||||
title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
|
||||
className="button-shape"
|
||||
options={ choices }
|
||||
selected={ shape }
|
||||
onChange={ setShape }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionButtonShape;
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { help } from '@wordpress/icons';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import {
|
||||
SelectStylingSection,
|
||||
StylingSection,
|
||||
CheckboxStylingSection,
|
||||
} from '../Layout';
|
||||
|
||||
const LocationSelector = ( { location, setLocation } ) => {
|
||||
const { choices, details, isActive, setActive } =
|
||||
StylingHooks.useLocationProps( location );
|
||||
|
||||
const activateCheckbox = {
|
||||
value: 'active',
|
||||
label: __(
|
||||
'Enable payment methods in this location',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<StylingSection
|
||||
className="header-section"
|
||||
bigTitle={ true }
|
||||
title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Customize the appearance of the PayPal smart buttons on your website and choose which payment buttons to display.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<SelectStylingSection
|
||||
className="location-selector"
|
||||
title={ __( 'Location', 'woocommerce-paypal-payments' ) }
|
||||
separatorAndGap={ false }
|
||||
options={ choices }
|
||||
value={ location }
|
||||
onChange={ setLocation }
|
||||
>
|
||||
{ details.link && (
|
||||
<Button
|
||||
icon={ help }
|
||||
href={ details.link }
|
||||
target="_blank"
|
||||
/>
|
||||
) }
|
||||
</SelectStylingSection>
|
||||
<CheckboxStylingSection
|
||||
className="location-activation"
|
||||
separatorAndGap={ false }
|
||||
options={ [ activateCheckbox ] }
|
||||
value={ isActive }
|
||||
onChange={ setActive }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LocationSelector;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import { CheckboxStylingSection } from '../Layout';
|
||||
|
||||
const SectionPaymentMethods = ( { location } ) => {
|
||||
const { paymentMethods, setPaymentMethods, choices } =
|
||||
StylingHooks.usePaymentMethodProps( location );
|
||||
|
||||
return (
|
||||
<CheckboxStylingSection
|
||||
title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
|
||||
className="payment-methods"
|
||||
options={ choices }
|
||||
value={ paymentMethods }
|
||||
onChange={ setPaymentMethods }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionPaymentMethods;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { StylingHooks } from '../../../../../../data';
|
||||
import { CheckboxStylingSection } from '../Layout';
|
||||
|
||||
const SectionTagline = ( { location } ) => {
|
||||
const { isAvailable, tagline, setTagline } =
|
||||
StylingHooks.useTaglineProps( location );
|
||||
|
||||
if ( ! isAvailable ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const checkbox = {
|
||||
value: 'active',
|
||||
label: __(
|
||||
'Show tagline below buttons',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<CheckboxStylingSection
|
||||
className="tagline"
|
||||
separatorAndGap={ false }
|
||||
options={ [ checkbox ] }
|
||||
value={ tagline }
|
||||
onChange={ setTagline }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionTagline;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export { default as LocationSelector } from './LocationSelector';
|
||||
export { default as ButtonColor } from './ButtonColor';
|
||||
export { default as ButtonLabel } from './ButtonLabel';
|
||||
export { default as ButtonLayout } from './ButtonLayout';
|
||||
export { default as ButtonShape } from './ButtonShape';
|
||||
export { default as PaymentMethods } from './PaymentMethods';
|
||||
export { default as Tagline } from './Tagline';
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
|
||||
import {
|
||||
Description,
|
||||
Header,
|
||||
Title,
|
||||
Content,
|
||||
} from '../../../../../ReusableComponents/SettingsBlocks';
|
||||
|
||||
const StylingSection = ( {
|
||||
title,
|
||||
bigTitle = false,
|
||||
className = '',
|
||||
description = '',
|
||||
separatorAndGap = true,
|
||||
children,
|
||||
} ) => {
|
||||
return (
|
||||
<SettingsBlock
|
||||
className={ className }
|
||||
separatorAndGap={ separatorAndGap }
|
||||
>
|
||||
<Header>
|
||||
<Title altStyle={ true } big={ bigTitle }>
|
||||
{ title }
|
||||
</Title>
|
||||
<Description>{ description }</Description>
|
||||
</Header>
|
||||
|
||||
<Content className="section-content">{ children }</Content>
|
||||
</SettingsBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default StylingSection;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { CheckboxGroup } from '../../../../../ReusableComponents/Fields';
|
||||
import HStack from '../../../../../ReusableComponents/HStack';
|
||||
import StylingSection from './StylingSection';
|
||||
|
||||
const StylingSectionWithCheckboxes = ( {
|
||||
title,
|
||||
className = '',
|
||||
description = '',
|
||||
separatorAndGap = true,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'has-checkboxes', className );
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
title={ title }
|
||||
className={ className }
|
||||
description={ description }
|
||||
separatorAndGap={ separatorAndGap }
|
||||
>
|
||||
<HStack spacing={ 6 }>
|
||||
<CheckboxGroup
|
||||
options={ options }
|
||||
value={ value }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</HStack>
|
||||
|
||||
{ children }
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default StylingSectionWithCheckboxes;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { RadioControl } from '@wordpress/components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import HStack from '../../../../../ReusableComponents/HStack';
|
||||
import StylingSection from './StylingSection';
|
||||
|
||||
const StylingSectionWithRadiobuttons = ( {
|
||||
title,
|
||||
className = '',
|
||||
description = '',
|
||||
separatorAndGap = true,
|
||||
options,
|
||||
selected,
|
||||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'has-radio-buttons', className );
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
title={ title }
|
||||
className={ className }
|
||||
description={ description }
|
||||
separatorAndGap={ separatorAndGap }
|
||||
>
|
||||
<HStack>
|
||||
<RadioControl
|
||||
options={ options }
|
||||
selected={ selected }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</HStack>
|
||||
|
||||
{ children }
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default StylingSectionWithRadiobuttons;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { SelectControl } from '@wordpress/components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import StylingSection from './StylingSection';
|
||||
|
||||
const StylingSectionWithSelect = ( {
|
||||
title,
|
||||
className = '',
|
||||
description = '',
|
||||
separatorAndGap = true,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'has-select', className );
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
title={ title }
|
||||
className={ className }
|
||||
description={ description }
|
||||
separatorAndGap={ separatorAndGap }
|
||||
>
|
||||
<SelectControl
|
||||
__nextHasNoMarginBottom
|
||||
options={ options }
|
||||
value={ value }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
|
||||
{ children }
|
||||
</StylingSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default StylingSectionWithSelect;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export { default as StylingSection } from './StylingSection';
|
||||
export { default as CheckboxStylingSection } from './StylingSectionWithCheckboxes';
|
||||
export { default as RadiobuttonStylingSection } from './StylingSectionWithRadiobuttons';
|
||||
export { default as SelectStylingSection } from './StylingSectionWithSelect';
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
|
||||
import { STYLING_PAYMENT_METHODS, StylingHooks } from '../../../../../data';
|
||||
import { useMemo } from '@wordpress/element';
|
||||
|
||||
const PREVIEW_CLIENT_ID = 'test';
|
||||
const PREVIEW_MERCHANT_ID = 'QTQX5NP6N9WZU';
|
||||
|
||||
const PreviewPanel = ( { location } ) => {
|
||||
const { paymentMethods } = StylingHooks.usePaymentMethodProps( location );
|
||||
const { layout } = StylingHooks.useLayoutProps( location );
|
||||
const { shape } = StylingHooks.useShapeProps( location );
|
||||
const { label } = StylingHooks.useLabelProps( location );
|
||||
const { color } = StylingHooks.useColorProps( location );
|
||||
const { tagline } = StylingHooks.useTaglineProps( location );
|
||||
|
||||
const style = useMemo(
|
||||
() => ( {
|
||||
layout,
|
||||
shape,
|
||||
label,
|
||||
color,
|
||||
tagline,
|
||||
} ),
|
||||
[ color, label, layout, shape, tagline ]
|
||||
);
|
||||
|
||||
const disableFunding = useMemo( () => {
|
||||
const disabled = [ 'card' ];
|
||||
Object.values( STYLING_PAYMENT_METHODS )
|
||||
.filter( ( method ) => method.isFunding )
|
||||
.filter( ( method ) => ! paymentMethods.includes( method.value ) )
|
||||
.forEach( ( method ) => {
|
||||
disabled.push( method.value );
|
||||
} );
|
||||
return disabled;
|
||||
}, [ paymentMethods ] );
|
||||
|
||||
// TODO: Changes in the providerOptions are not reflected on the page.
|
||||
const providerOptions = useMemo(
|
||||
() => ( {
|
||||
clientId: PREVIEW_CLIENT_ID,
|
||||
merchantId: PREVIEW_MERCHANT_ID,
|
||||
components: 'buttons',
|
||||
'disable-funding': disableFunding.join( ',' ),
|
||||
'buyer-country': 'US', // Todo: simulate shop country here?
|
||||
currency: 'USD',
|
||||
} ),
|
||||
[ disableFunding ]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="preview-panel">
|
||||
<div className="preview-panel-inner">
|
||||
<PayPalScriptProvider options={ providerOptions }>
|
||||
<PayPalButtons style={ style } forceReRender={ [ style ] }>
|
||||
Error
|
||||
</PayPalButtons>
|
||||
</PayPalScriptProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviewPanel;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import {
|
||||
LocationSelector,
|
||||
PaymentMethods,
|
||||
ButtonLayout,
|
||||
ButtonShape,
|
||||
ButtonLabel,
|
||||
ButtonColor,
|
||||
} from './Content';
|
||||
import { StylingHooks } from '../../../../../data';
|
||||
|
||||
const SettingsPanel = ( { location, setLocation } ) => {
|
||||
const { isActive } = StylingHooks.useLocationProps( location );
|
||||
|
||||
const LocationDetails = () => {
|
||||
if ( ! isActive ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaymentMethods location={ location } />
|
||||
<ButtonLayout location={ location } />
|
||||
<ButtonShape location={ location } />
|
||||
<ButtonLabel location={ location } />
|
||||
<ButtonColor location={ location } />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<LocationSelector
|
||||
location={ location }
|
||||
setLocation={ setLocation }
|
||||
/>
|
||||
<LocationDetails />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsPanel;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { StylingHooks } from '../../../../data';
|
||||
import PreviewPanel from '../Components/Styling/PreviewPanel';
|
||||
import SettingsPanel from '../Components/Styling/SettingsPanel';
|
||||
|
||||
const TabStyling = () => {
|
||||
const { location, setLocation } = StylingHooks.useStylingLocation();
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-styling">
|
||||
<SettingsPanel location={ location } setLocation={ setLocation } />
|
||||
<PreviewPanel location={ location } />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabStyling;
|
||||
|
|
@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
|
|||
import TabOverview from '../../Overview/TabOverview';
|
||||
import TabPaymentMethods from '../../Overview/TabPaymentMethods';
|
||||
import TabSettings from '../../Overview/TabSettings';
|
||||
import TabStyling from '../../Overview/TabStyling';
|
||||
import TabStyling from './TabStyling';
|
||||
import TabPayLaterMessaging from '../../Overview/TabPayLaterMessaging';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -36,28 +36,37 @@ export const hydrate = ( payload ) => ( {
|
|||
payload,
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic transient-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setTransient = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic persistent-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
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 ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { isReady },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Persistent. Sets a sample value.
|
||||
* TODO: Replace with a real action/property.
|
||||
*
|
||||
* @param {string} value
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setSampleValue = ( value ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { sampleValue: value },
|
||||
} );
|
||||
export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
|
||||
|
||||
/**
|
||||
* Side effect. Triggers the persistence of store data to the server.
|
||||
|
|
|
|||
|
|
@ -7,39 +7,24 @@
|
|||
* @file
|
||||
*/
|
||||
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
|
||||
import { createHooksForStore } from '../utils';
|
||||
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 ]
|
||||
);
|
||||
|
||||
const useHooks = () => {
|
||||
const {
|
||||
persist,
|
||||
|
||||
// TODO: Replace with real property.
|
||||
setSampleValue,
|
||||
} = useDispatch( STORE_NAME );
|
||||
const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
|
||||
const { persist } = useDispatch( STORE_NAME );
|
||||
|
||||
// Read-only flags and derived state.
|
||||
// Nothing here yet.
|
||||
|
||||
// Transient accessors.
|
||||
const isReady = useTransient( 'isReady' );
|
||||
const [ isReady ] = useTransient( 'isReady' );
|
||||
|
||||
// Persistent accessors.
|
||||
// TODO: Replace with real property.
|
||||
const sampleValue = usePersistent( 'sampleValue' );
|
||||
const [ sampleValue, setSampleValue ] = usePersistent( 'sampleValue' );
|
||||
|
||||
return {
|
||||
persist,
|
||||
|
|
|
|||
|
|
@ -36,16 +36,37 @@ export const hydrate = ( payload ) => ( {
|
|||
payload,
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic transient-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setTransient = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic persistent-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setPersistent = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Transient. Marks the onboarding details as "ready", i.e., fully initialized.
|
||||
*
|
||||
* @param {boolean} isReady
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsReady = ( isReady ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { isReady },
|
||||
} );
|
||||
export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
|
||||
|
||||
/**
|
||||
* Transient. Sets the active settings tab.
|
||||
|
|
@ -53,21 +74,8 @@ export const setIsReady = ( isReady ) => ( {
|
|||
* @param {string} activeModal
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setActiveModal = ( activeModal ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { activeModal },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Transient. Changes the "saving" flag.
|
||||
*
|
||||
* @param {boolean} isSaving
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsSaving = ( isSaving ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { isSaving },
|
||||
} );
|
||||
export const setActiveModal = ( activeModal ) =>
|
||||
setTransient( 'activeModal', activeModal );
|
||||
|
||||
/**
|
||||
* Transient (Activity): Marks the start of an async activity
|
||||
|
|
@ -107,10 +115,8 @@ export const stopActivity = ( id ) => ( {
|
|||
* @param {boolean} useSandbox
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setSandboxMode = ( useSandbox ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { useSandbox },
|
||||
} );
|
||||
export const setSandboxMode = ( useSandbox ) =>
|
||||
setPersistent( 'useSandbox', useSandbox );
|
||||
|
||||
/**
|
||||
* Persistent. Toggles the "Manual Connection" mode on or off.
|
||||
|
|
@ -118,10 +124,8 @@ export const setSandboxMode = ( useSandbox ) => ( {
|
|||
* @param {boolean} useManualConnection
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setManualConnectionMode = ( useManualConnection ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { useManualConnection },
|
||||
} );
|
||||
export const setManualConnectionMode = ( useManualConnection ) =>
|
||||
setPersistent( 'useManualConnection', useManualConnection );
|
||||
|
||||
/**
|
||||
* Side effect. Saves the persistent details to the WP database.
|
||||
|
|
|
|||
|
|
@ -9,41 +9,31 @@
|
|||
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { useCallback } from '@wordpress/element';
|
||||
|
||||
import { createHooksForStore } from '../utils';
|
||||
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 ]
|
||||
);
|
||||
|
||||
const useHooks = () => {
|
||||
const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
|
||||
const {
|
||||
persist,
|
||||
setSandboxMode,
|
||||
setManualConnectionMode,
|
||||
sandboxOnboardingUrl,
|
||||
productionOnboardingUrl,
|
||||
authenticateWithCredentials,
|
||||
authenticateWithOAuth,
|
||||
setActiveModal,
|
||||
startWebhookSimulation,
|
||||
checkWebhookSimulationState,
|
||||
} = useDispatch( STORE_NAME );
|
||||
|
||||
// Transient accessors.
|
||||
const isReady = useTransient( 'isReady' );
|
||||
const activeModal = useTransient( 'activeModal' );
|
||||
const [ isReady ] = useTransient( 'isReady' );
|
||||
const [ activeModal, setActiveModal ] = useTransient( 'activeModal' );
|
||||
|
||||
// Persistent accessors.
|
||||
const isSandboxMode = usePersistent( 'useSandbox' );
|
||||
const isManualConnectionMode = usePersistent( 'useManualConnection' );
|
||||
const [ isSandboxMode, setSandboxMode ] = usePersistent( 'useSandbox' );
|
||||
const [ isManualConnectionMode, setManualConnectionMode ] = usePersistent(
|
||||
'useManualConnection'
|
||||
);
|
||||
const merchant = useSelect(
|
||||
( select ) => select( STORE_NAME ).merchant(),
|
||||
[]
|
||||
|
|
|
|||
10
modules/ppcp-settings/resources/js/data/configuration.js
Normal file
10
modules/ppcp-settings/resources/js/data/configuration.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export { BUSINESS_TYPES, PRODUCT_TYPES } from './onboarding/configuration';
|
||||
|
||||
export {
|
||||
STYLING_LOCATIONS,
|
||||
STYLING_PAYMENT_METHODS,
|
||||
STYLING_LABELS,
|
||||
STYLING_COLORS,
|
||||
STYLING_LAYOUTS,
|
||||
STYLING_SHAPES,
|
||||
} from './styling/configuration';
|
||||
|
|
@ -1,16 +1,20 @@
|
|||
import { addDebugTools } from './debug';
|
||||
import * as Onboarding from './onboarding';
|
||||
import * as Common from './common';
|
||||
import * as Styling from './styling';
|
||||
|
||||
Onboarding.initStore();
|
||||
Common.initStore();
|
||||
Styling.initStore();
|
||||
|
||||
export const OnboardingHooks = Onboarding.hooks;
|
||||
export const CommonHooks = Common.hooks;
|
||||
export const StylingHooks = Styling.hooks;
|
||||
|
||||
export const OnboardingStoreName = Onboarding.STORE_NAME;
|
||||
export const CommonStoreName = Common.STORE_NAME;
|
||||
export const StylingStoreName = Styling.STORE_NAME;
|
||||
|
||||
export * from './constants';
|
||||
export * from './configuration';
|
||||
|
||||
addDebugTools( window.ppcpSettings, [ Onboarding, Common ] );
|
||||
addDebugTools( window.ppcpSettings, [ Onboarding, Common, Styling ] );
|
||||
|
|
|
|||
|
|
@ -36,16 +36,37 @@ export const hydrate = ( payload ) => ( {
|
|||
payload,
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic transient-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setTransient = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic persistent-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setPersistent = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Transient. Marks the onboarding details as "ready", i.e., fully initialized.
|
||||
*
|
||||
* @param {boolean} isReady
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsReady = ( isReady ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { isReady },
|
||||
} );
|
||||
export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
|
||||
|
||||
/**
|
||||
* Transient. Sets the "manualClientId" value.
|
||||
|
|
@ -53,10 +74,8 @@ export const setIsReady = ( isReady ) => ( {
|
|||
* @param {string} manualClientId
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setManualClientId = ( manualClientId ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { manualClientId },
|
||||
} );
|
||||
export const setManualClientId = ( manualClientId ) =>
|
||||
setTransient( 'manualClientId', manualClientId );
|
||||
|
||||
/**
|
||||
* Transient. Sets the "manualClientSecret" value.
|
||||
|
|
@ -64,10 +83,8 @@ export const setManualClientId = ( manualClientId ) => ( {
|
|||
* @param {string} manualClientSecret
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setManualClientSecret = ( manualClientSecret ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { manualClientSecret },
|
||||
} );
|
||||
export const setManualClientSecret = ( manualClientSecret ) =>
|
||||
setTransient( 'manualClientSecret', manualClientSecret );
|
||||
|
||||
/**
|
||||
* Persistent.Set the "onboarding completed" flag which shows or hides the wizard.
|
||||
|
|
@ -75,10 +92,8 @@ export const setManualClientSecret = ( manualClientSecret ) => ( {
|
|||
* @param {boolean} completed
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setCompleted = ( completed ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { completed },
|
||||
} );
|
||||
export const setCompleted = ( completed ) =>
|
||||
setPersistent( 'completed', completed );
|
||||
|
||||
/**
|
||||
* Persistent. Sets the onboarding wizard to a new step.
|
||||
|
|
@ -86,10 +101,7 @@ export const setCompleted = ( completed ) => ( {
|
|||
* @param {number} step
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setStep = ( step ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { step },
|
||||
} );
|
||||
export const setStep = ( step ) => setPersistent( 'step', step );
|
||||
|
||||
/**
|
||||
* Persistent. Sets the "isCasualSeller" value.
|
||||
|
|
@ -97,10 +109,8 @@ export const setStep = ( step ) => ( {
|
|||
* @param {boolean} isCasualSeller
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsCasualSeller = ( isCasualSeller ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { isCasualSeller },
|
||||
} );
|
||||
export const setIsCasualSeller = ( isCasualSeller ) =>
|
||||
setPersistent( 'isCasualSeller', isCasualSeller );
|
||||
|
||||
/**
|
||||
* Persistent. Sets the "areOptionalPaymentMethodsEnabled" value.
|
||||
|
|
@ -110,10 +120,11 @@ export const setIsCasualSeller = ( isCasualSeller ) => ( {
|
|||
*/
|
||||
export const setAreOptionalPaymentMethodsEnabled = (
|
||||
areOptionalPaymentMethodsEnabled
|
||||
) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { areOptionalPaymentMethodsEnabled },
|
||||
} );
|
||||
) =>
|
||||
setPersistent(
|
||||
'areOptionalPaymentMethodsEnabled',
|
||||
areOptionalPaymentMethodsEnabled
|
||||
);
|
||||
|
||||
/**
|
||||
* Persistent. Sets the "products" array.
|
||||
|
|
@ -121,10 +132,8 @@ export const setAreOptionalPaymentMethodsEnabled = (
|
|||
* @param {string[]} products
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setProducts = ( products ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { products },
|
||||
} );
|
||||
export const setProducts = ( products ) =>
|
||||
setPersistent( 'products', products );
|
||||
|
||||
/**
|
||||
* Side effect. Triggers the persistence of onboarding data to the server.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,24 @@
|
|||
/**
|
||||
* Configuration for UI components.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
/**
|
||||
* Onboarding options for StepBusiness
|
||||
*
|
||||
* @type {Object}
|
||||
*/
|
||||
export const BUSINESS_TYPES = {
|
||||
CASUAL_SELLER: 'casual_seller',
|
||||
BUSINESS: 'business',
|
||||
};
|
||||
|
||||
/**
|
||||
* Onboarding options for StepProducts
|
||||
*
|
||||
* @type {Object}
|
||||
*/
|
||||
export const PRODUCT_TYPES = {
|
||||
VIRTUAL: 'virtual',
|
||||
PHYSICAL: 'physical',
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
export const STORE_NAME = 'wc/paypal/onboarding';
|
||||
|
||||
/**
|
||||
* REST path to hydrate data of this module by loading data from the WP DB..
|
||||
* REST path to hydrate data of this module by loading data from the WP DB.
|
||||
*
|
||||
* Used by: Resolvers
|
||||
* See: OnboardingRestEndpoint.php
|
||||
|
|
|
|||
|
|
@ -9,32 +9,14 @@
|
|||
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
|
||||
import { PRODUCT_TYPES } from '../constants';
|
||||
import { createHooksForStore } from '../utils';
|
||||
import { PRODUCT_TYPES } from './configuration';
|
||||
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 ]
|
||||
);
|
||||
|
||||
const useHooks = () => {
|
||||
const {
|
||||
persist,
|
||||
setStep,
|
||||
setCompleted,
|
||||
setIsCasualSeller,
|
||||
setManualClientId,
|
||||
setManualClientSecret,
|
||||
setAreOptionalPaymentMethodsEnabled,
|
||||
setProducts,
|
||||
} = useDispatch( STORE_NAME );
|
||||
const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
|
||||
|
||||
const { persist } = useDispatch( STORE_NAME );
|
||||
|
||||
// Read-only flags and derived state.
|
||||
const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
|
||||
|
|
@ -44,18 +26,22 @@ const useHooks = () => {
|
|||
);
|
||||
|
||||
// Transient accessors.
|
||||
const isReady = useTransient( 'isReady' );
|
||||
const manualClientId = useTransient( 'manualClientId' );
|
||||
const manualClientSecret = useTransient( 'manualClientSecret' );
|
||||
const [ isReady ] = useTransient( 'isReady' );
|
||||
const [ manualClientId, setManualClientId ] =
|
||||
useTransient( 'manualClientId' );
|
||||
const [ manualClientSecret, setManualClientSecret ] =
|
||||
useTransient( 'manualClientSecret' );
|
||||
|
||||
// Persistent accessors.
|
||||
const step = usePersistent( 'step' );
|
||||
const completed = usePersistent( 'completed' );
|
||||
const isCasualSeller = usePersistent( 'isCasualSeller' );
|
||||
const areOptionalPaymentMethodsEnabled = usePersistent(
|
||||
'areOptionalPaymentMethodsEnabled'
|
||||
);
|
||||
const products = usePersistent( 'products' );
|
||||
const [ step, setStep ] = usePersistent( 'step' );
|
||||
const [ completed, setCompleted ] = usePersistent( 'completed' );
|
||||
const [ isCasualSeller, setIsCasualSeller ] =
|
||||
usePersistent( 'isCasualSeller' );
|
||||
const [
|
||||
areOptionalPaymentMethodsEnabled,
|
||||
setAreOptionalPaymentMethodsEnabled,
|
||||
] = usePersistent( 'areOptionalPaymentMethodsEnabled' );
|
||||
const [ products, setProducts ] = usePersistent( 'products' );
|
||||
|
||||
const savePersistent = async ( setter, value ) => {
|
||||
setter( value );
|
||||
|
|
|
|||
|
|
@ -1,162 +0,0 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const cartAndExpressCheckoutSettings = {
|
||||
paymentMethods: [],
|
||||
style: {
|
||||
shape: 'pill',
|
||||
label: 'paypal',
|
||||
color: 'gold',
|
||||
},
|
||||
};
|
||||
|
||||
const settings = {
|
||||
paymentMethods: [],
|
||||
style: {
|
||||
layout: 'vertical',
|
||||
shape: cartAndExpressCheckoutSettings.style.shape,
|
||||
label: cartAndExpressCheckoutSettings.style.label,
|
||||
color: cartAndExpressCheckoutSettings.style.color,
|
||||
tagline: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const defaultLocationSettings = {
|
||||
cart: {
|
||||
value: 'cart',
|
||||
label: __( 'Cart', 'woocommerce-paypal-payments' ),
|
||||
settings: { ...cartAndExpressCheckoutSettings },
|
||||
// translators: %s: Link to Cart page
|
||||
description: __(
|
||||
'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Cart page</a> and select which additional payment buttons to display in this location.',
|
||||
'wooocommerce-paypal-payments'
|
||||
),
|
||||
descriptionLink: '#',
|
||||
},
|
||||
'classic-checkout': {
|
||||
value: 'classic-checkout',
|
||||
label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
|
||||
settings: { ...settings },
|
||||
// translators: %s: Link to Classic Checkout page
|
||||
description: __(
|
||||
'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Classic Checkout page</a> and choose which additional payment buttons to display in this location.',
|
||||
'wooocommerce-paypal-payments'
|
||||
),
|
||||
descriptionLink: '#',
|
||||
},
|
||||
'express-checkout': {
|
||||
value: 'express-checkout',
|
||||
label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
|
||||
settings: { ...cartAndExpressCheckoutSettings },
|
||||
// translators: %s: Link to Express Checkout location
|
||||
description: __(
|
||||
'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Express Checkout location</a> and choose which additional payment buttons to display in this location.',
|
||||
'wooocommerce-paypal-payments'
|
||||
),
|
||||
descriptionLink: '#',
|
||||
},
|
||||
'mini-cart': {
|
||||
value: 'mini-cart',
|
||||
label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
|
||||
settings: { ...settings },
|
||||
// translators: %s: Link to Mini Cart
|
||||
description: __(
|
||||
'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Mini Cart</a> and choose which additional payment buttons to display in this location.',
|
||||
'wooocommerce-paypal-payments'
|
||||
),
|
||||
descriptionLink: '#',
|
||||
},
|
||||
'product-page': {
|
||||
value: 'product-page',
|
||||
label: __( 'Product Page', 'woocommerce-paypal-payments' ),
|
||||
settings: { ...settings },
|
||||
// translators: %s: Link to Product Page
|
||||
description: __(
|
||||
'Customize the appearance of the PayPal smart buttons on the <a href="%s">[MISSING LINK]Product Page</a> and choose which additional payment buttons to display in this location.',
|
||||
'wooocommerce-paypal-payments'
|
||||
),
|
||||
descriptionLink: '#',
|
||||
},
|
||||
};
|
||||
|
||||
export const paymentMethodOptions = [
|
||||
{
|
||||
value: 'venmo',
|
||||
label: __( 'Venmo', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'paylater',
|
||||
label: __( 'Pay Later', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'googlepay',
|
||||
label: __( 'Google Pay', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'applepay',
|
||||
label: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
];
|
||||
|
||||
export const buttonLabelOptions = [
|
||||
{
|
||||
value: 'paypal',
|
||||
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'checkout',
|
||||
label: __( 'Checkout', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'buynow',
|
||||
label: __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'pay',
|
||||
label: __( 'Pay with PayPal', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
];
|
||||
|
||||
export const colorOptions = [
|
||||
{
|
||||
value: 'gold',
|
||||
label: __( 'Gold (Recommended)', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'blue',
|
||||
label: __( 'Blue', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'silver',
|
||||
label: __( 'Silver', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'black',
|
||||
label: __( 'Black', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'white',
|
||||
label: __( 'White', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
];
|
||||
|
||||
export const buttonLayoutOptions = [
|
||||
{
|
||||
label: __( 'Vertical', 'woocommerce-paypal-payments' ),
|
||||
value: 'vertical',
|
||||
},
|
||||
{
|
||||
label: __( 'Horizontal', 'woocommerce-paypal-payments' ),
|
||||
value: 'horizontal',
|
||||
},
|
||||
];
|
||||
|
||||
export const shapeOptions = [
|
||||
{
|
||||
value: 'pill',
|
||||
label: __( 'Pill', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'rect',
|
||||
label: __( 'Rectangle', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Action Types: Define unique identifiers for actions across all store modules.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
export default {
|
||||
// Transient data.
|
||||
SET_TRANSIENT: 'STYLE:SET_TRANSIENT',
|
||||
|
||||
// Persistent data.
|
||||
SET_PERSISTENT: 'STYLE:SET_PERSISTENT',
|
||||
RESET: 'STYLE:RESET',
|
||||
HYDRATE: 'STYLE:HYDRATE',
|
||||
|
||||
// Controls - always start with "DO_".
|
||||
DO_PERSIST_DATA: 'STYLE:DO_PERSIST_DATA',
|
||||
};
|
||||
80
modules/ppcp-settings/resources/js/data/styling/actions.js
Normal file
80
modules/ppcp-settings/resources/js/data/styling/actions.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
* Action Creators: Define functions to create action objects.
|
||||
*
|
||||
* These functions update state or trigger side effects (e.g., async operations).
|
||||
* Actions are categorized as Transient, Persistent, or Side effect.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import { select } from '@wordpress/data';
|
||||
|
||||
import ACTION_TYPES from './action-types';
|
||||
import { STORE_NAME } from './constants';
|
||||
|
||||
/**
|
||||
* @typedef {Object} Action An action object that is handled by a reducer or control.
|
||||
* @property {string} type - The action type.
|
||||
* @property {Object?} payload - Optional payload for the action.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Special. Resets all values in the store to initial defaults.
|
||||
*
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const reset = () => ( { type: ACTION_TYPES.RESET } );
|
||||
|
||||
/**
|
||||
* Persistent. Set the full store details during app initialization.
|
||||
*
|
||||
* @param {{data: {}, flags?: {}}} payload
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const hydrate = ( payload ) => ( {
|
||||
type: ACTION_TYPES.HYDRATE,
|
||||
payload,
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic transient-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setTransient = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_TRANSIENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Generic persistent-data updater.
|
||||
*
|
||||
* @param {string} prop Name of the property to update.
|
||||
* @param {any} value The new value of the property.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setPersistent = ( prop, value ) => ( {
|
||||
type: ACTION_TYPES.SET_PERSISTENT,
|
||||
payload: { [ prop ]: value },
|
||||
} );
|
||||
|
||||
/**
|
||||
* Transient. Changes the "ready-state" of the module.
|
||||
*
|
||||
* @param {boolean} state Whether the store is ready to be used.
|
||||
* @return {Action} The action.
|
||||
*/
|
||||
export const setIsReady = ( state ) => setTransient( 'isReady', state );
|
||||
|
||||
/**
|
||||
* 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 };
|
||||
};
|
||||
131
modules/ppcp-settings/resources/js/data/styling/configuration.js
Normal file
131
modules/ppcp-settings/resources/js/data/styling/configuration.js
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
/**
|
||||
* Configuration for UI components.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
export const STYLING_LOCATIONS = {
|
||||
cart: {
|
||||
value: 'cart',
|
||||
label: __( 'Cart', 'woocommerce-paypal-payments' ),
|
||||
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-cart',
|
||||
props: { layout: false, tagline: false },
|
||||
},
|
||||
classicCheckout: {
|
||||
value: 'classicCheckout',
|
||||
label: __( 'Classic Checkout', 'woocommerce-paypal-payments' ),
|
||||
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-checkout',
|
||||
props: { layout: true, tagline: true },
|
||||
},
|
||||
expressCheckout: {
|
||||
value: 'expressCheckout',
|
||||
label: __( 'Express Checkout', 'woocommerce-paypal-payments' ),
|
||||
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-block-express-checkout',
|
||||
props: { layout: false, tagline: false },
|
||||
},
|
||||
miniCart: {
|
||||
value: 'miniCart',
|
||||
label: __( 'Mini Cart', 'woocommerce-paypel-payements' ),
|
||||
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-mini-cart',
|
||||
props: { layout: true, tagline: true },
|
||||
},
|
||||
product: {
|
||||
value: 'product',
|
||||
label: __( 'Product Page', 'woocommerce-paypal-payments' ),
|
||||
link: 'https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-single-product',
|
||||
props: { layout: true, tagline: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const STYLING_LABELS = {
|
||||
paypal: {
|
||||
value: 'paypal',
|
||||
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
checkout: {
|
||||
value: 'checkout',
|
||||
label: __( 'Checkout', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
buynow: {
|
||||
value: 'buynow',
|
||||
label: __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
pay: {
|
||||
value: 'pay',
|
||||
label: __( 'Pay with PayPal', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
};
|
||||
|
||||
export const STYLING_COLORS = {
|
||||
gold: {
|
||||
value: 'gold',
|
||||
label: __( 'Gold (Recommended)', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
blue: {
|
||||
value: 'blue',
|
||||
label: __( 'Blue', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
silver: {
|
||||
value: 'silver',
|
||||
label: __( 'Silver', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
black: {
|
||||
value: 'black',
|
||||
label: __( 'Black', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
white: {
|
||||
value: 'white',
|
||||
label: __( 'White', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
};
|
||||
|
||||
export const STYLING_LAYOUTS = {
|
||||
vertical: {
|
||||
value: 'vertical',
|
||||
label: __( 'Vertical', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
horizontal: {
|
||||
value: 'horizontal',
|
||||
label: __( 'Horizontal', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
};
|
||||
|
||||
export const STYLING_SHAPES = {
|
||||
rect: {
|
||||
value: 'rect',
|
||||
label: __( 'Rectangle', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
pill: {
|
||||
value: 'pill',
|
||||
label: __( 'Pill', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
};
|
||||
|
||||
export const STYLING_PAYMENT_METHODS = {
|
||||
paypal: {
|
||||
value: '',
|
||||
label: __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
checked: true,
|
||||
disabled: true,
|
||||
},
|
||||
venmo: {
|
||||
value: 'venmo',
|
||||
label: __( 'Venmo', 'woocommerce-paypal-payments' ),
|
||||
isFunding: true,
|
||||
},
|
||||
paylater: {
|
||||
value: 'paylater',
|
||||
label: __( 'Pay Later', 'woocommerce-paypal-payments' ),
|
||||
isFunding: true,
|
||||
},
|
||||
googlepay: {
|
||||
value: 'googlepay',
|
||||
label: __( 'Google Pay', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
applepay: {
|
||||
value: 'applepay',
|
||||
label: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
};
|
||||
28
modules/ppcp-settings/resources/js/data/styling/constants.js
Normal file
28
modules/ppcp-settings/resources/js/data/styling/constants.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* Name of the Redux store module.
|
||||
*
|
||||
* Used by: Reducer, Selector, Index
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
export const STORE_NAME = 'wc/paypal/style';
|
||||
|
||||
/**
|
||||
* REST path to hydrate data of this module by loading data from the WP DB.
|
||||
*
|
||||
* Used by: Resolvers
|
||||
* See: StylingRestEndpoint.php
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
export const REST_HYDRATE_PATH = '/wc/v3/wc_paypal/styling';
|
||||
|
||||
/**
|
||||
* REST path to persist data of this module to the WP DB.
|
||||
*
|
||||
* Used by: Controls
|
||||
* See: StylingRestEndpoint.php
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
export const REST_PERSIST_PATH = '/wc/v3/wc_paypal/styling';
|
||||
23
modules/ppcp-settings/resources/js/data/styling/controls.js
vendored
Normal file
23
modules/ppcp-settings/resources/js/data/styling/controls.js
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* Controls: Implement side effects, typically asynchronous operations.
|
||||
*
|
||||
* Controls use ACTION_TYPES keys as identifiers.
|
||||
* They are triggered by corresponding actions and handle external interactions.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import apiFetch from '@wordpress/api-fetch';
|
||||
|
||||
import { REST_PERSIST_PATH } from './constants';
|
||||
import ACTION_TYPES from './action-types';
|
||||
|
||||
export const controls = {
|
||||
async [ ACTION_TYPES.DO_PERSIST_DATA ]( { data } ) {
|
||||
return await apiFetch( {
|
||||
path: REST_PERSIST_PATH,
|
||||
method: 'POST',
|
||||
data,
|
||||
} );
|
||||
},
|
||||
};
|
||||
211
modules/ppcp-settings/resources/js/data/styling/hooks.js
Normal file
211
modules/ppcp-settings/resources/js/data/styling/hooks.js
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
/**
|
||||
* Hooks: Provide the main API for components to interact with the store.
|
||||
*
|
||||
* These encapsulate store interactions, offering a consistent interface.
|
||||
* Hooks simplify data access and manipulation for components.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import { useCallback } from '@wordpress/element';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
|
||||
import { createHooksForStore } from '../utils';
|
||||
import { STORE_NAME } from './constants';
|
||||
import {
|
||||
STYLING_COLORS,
|
||||
STYLING_LABELS,
|
||||
STYLING_LAYOUTS,
|
||||
STYLING_LOCATIONS,
|
||||
STYLING_PAYMENT_METHODS,
|
||||
STYLING_SHAPES,
|
||||
} from './configuration';
|
||||
|
||||
const useHooks = () => {
|
||||
const { useTransient } = createHooksForStore( STORE_NAME );
|
||||
const { persist, setPersistent } = useDispatch( STORE_NAME );
|
||||
|
||||
// Transient accessors.
|
||||
const [ isReady ] = useTransient( 'isReady' );
|
||||
const [ location, setLocation ] = useTransient( 'location' );
|
||||
|
||||
// Persistent accessors.
|
||||
const persistentData = useSelect(
|
||||
( select ) => select( STORE_NAME ).persistentData(),
|
||||
[]
|
||||
);
|
||||
|
||||
const getLocationProp = useCallback(
|
||||
( locationId, prop ) => {
|
||||
if ( undefined === persistentData[ locationId ]?.[ prop ] ) {
|
||||
console.error(
|
||||
`Trying to access non-existent style property: ${ locationId }.${ prop }. Possibly wrong style name - review the reducer.`
|
||||
);
|
||||
return null;
|
||||
}
|
||||
return persistentData[ locationId ][ prop ];
|
||||
},
|
||||
[ persistentData ]
|
||||
);
|
||||
|
||||
const setLocationProp = useCallback(
|
||||
( locationId, prop, value ) => {
|
||||
const updatedStyles = {
|
||||
...persistentData[ locationId ],
|
||||
[ prop ]: value,
|
||||
};
|
||||
|
||||
setPersistent( locationId, updatedStyles );
|
||||
},
|
||||
[ persistentData, setPersistent ]
|
||||
);
|
||||
|
||||
return {
|
||||
persist,
|
||||
isReady,
|
||||
location,
|
||||
setLocation,
|
||||
getLocationProp,
|
||||
setLocationProp,
|
||||
};
|
||||
};
|
||||
|
||||
export const useStore = () => {
|
||||
const { persist, isReady } = useHooks();
|
||||
return { persist, isReady };
|
||||
};
|
||||
|
||||
export const useStylingLocation = () => {
|
||||
const { location, setLocation } = useHooks();
|
||||
return { location, setLocation };
|
||||
};
|
||||
|
||||
export const useLocationProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
const details = STYLING_LOCATIONS[ location ] ?? {};
|
||||
|
||||
const sanitize = ( value ) => ( undefined === value ? true : !! value );
|
||||
|
||||
return {
|
||||
choices: Object.values( STYLING_LOCATIONS ),
|
||||
details,
|
||||
isActive: sanitize( getLocationProp( location, 'enabled' ) ),
|
||||
setActive: ( state ) =>
|
||||
setLocationProp( location, 'enabled', sanitize( state ) ),
|
||||
};
|
||||
};
|
||||
|
||||
export const usePaymentMethodProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
|
||||
const sanitize = ( value ) => {
|
||||
if ( Array.isArray( value ) ) {
|
||||
return value;
|
||||
}
|
||||
return value ? [ value ] : [];
|
||||
};
|
||||
|
||||
return {
|
||||
choices: Object.values( STYLING_PAYMENT_METHODS ),
|
||||
paymentMethods: sanitize( getLocationProp( location, 'methods' ) ),
|
||||
setPaymentMethods: ( methods ) =>
|
||||
setLocationProp( location, 'methods', sanitize( methods ) ),
|
||||
};
|
||||
};
|
||||
|
||||
export const useColorProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
|
||||
const sanitize = ( value ) => {
|
||||
const isValidColor = Object.values( STYLING_COLORS ).some(
|
||||
( color ) => color.value === value
|
||||
);
|
||||
return isValidColor ? value : STYLING_COLORS.gold.value;
|
||||
};
|
||||
|
||||
return {
|
||||
choices: Object.values( STYLING_COLORS ),
|
||||
color: sanitize( getLocationProp( location, 'color' ) ),
|
||||
setColor: ( color ) =>
|
||||
setLocationProp( location, 'color', sanitize( color ) ),
|
||||
};
|
||||
};
|
||||
|
||||
export const useShapeProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
|
||||
const sanitize = ( value ) => {
|
||||
const isValidColor = Object.values( STYLING_SHAPES ).some(
|
||||
( color ) => color.value === value
|
||||
);
|
||||
return isValidColor ? value : STYLING_SHAPES.rect.value;
|
||||
};
|
||||
|
||||
return {
|
||||
choices: Object.values( STYLING_SHAPES ),
|
||||
shape: sanitize( getLocationProp( location, 'shape' ) ),
|
||||
setShape: ( shape ) =>
|
||||
setLocationProp( location, 'shape', sanitize( shape ) ),
|
||||
};
|
||||
};
|
||||
|
||||
export const useLabelProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
|
||||
const sanitize = ( value ) => {
|
||||
const isValidColor = Object.values( STYLING_LABELS ).some(
|
||||
( color ) => color.value === value
|
||||
);
|
||||
return isValidColor ? value : STYLING_LABELS.paypal.value;
|
||||
};
|
||||
|
||||
return {
|
||||
choices: Object.values( STYLING_LABELS ),
|
||||
label: sanitize( getLocationProp( location, 'label' ) ),
|
||||
setLabel: ( label ) =>
|
||||
setLocationProp( location, 'label', sanitize( label ) ),
|
||||
};
|
||||
};
|
||||
|
||||
export const useLayoutProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
const { details } = useLocationProps( location );
|
||||
const isAvailable = false !== details.props.layout;
|
||||
|
||||
const sanitize = ( value ) => {
|
||||
const isValidColor = Object.values( STYLING_LAYOUTS ).some(
|
||||
( color ) => color.value === value
|
||||
);
|
||||
return isValidColor ? value : STYLING_LAYOUTS.vertical.value;
|
||||
};
|
||||
|
||||
return {
|
||||
choices: Object.values( STYLING_LAYOUTS ),
|
||||
isAvailable,
|
||||
layout: sanitize( getLocationProp( location, 'layout' ) ),
|
||||
setLayout: ( layout ) =>
|
||||
setLocationProp( location, 'layout', sanitize( layout ) ),
|
||||
};
|
||||
};
|
||||
|
||||
export const useTaglineProps = ( location ) => {
|
||||
const { getLocationProp, setLocationProp } = useHooks();
|
||||
const { details } = useLocationProps( location );
|
||||
|
||||
// Tagline is only available for horizontal layouts.
|
||||
const isAvailable =
|
||||
false !== details.props.tagline &&
|
||||
STYLING_LAYOUTS.horizontal.value ===
|
||||
getLocationProp( location, 'layout' );
|
||||
|
||||
const sanitize = ( value ) => !! value;
|
||||
|
||||
return {
|
||||
isAvailable,
|
||||
tagline: isAvailable
|
||||
? sanitize( getLocationProp( location, 'tagline' ) )
|
||||
: false,
|
||||
setTagline: ( tagline ) =>
|
||||
setLocationProp( location, 'tagline', sanitize( tagline ) ),
|
||||
};
|
||||
};
|
||||
24
modules/ppcp-settings/resources/js/data/styling/index.js
Normal file
24
modules/ppcp-settings/resources/js/data/styling/index.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { createReduxStore, register } from '@wordpress/data';
|
||||
import { controls as wpControls } from '@wordpress/data-controls';
|
||||
|
||||
import { STORE_NAME } from './constants';
|
||||
import reducer from './reducer';
|
||||
import * as selectors from './selectors';
|
||||
import * as actions from './actions';
|
||||
import * as hooks from './hooks';
|
||||
import { resolvers } from './resolvers';
|
||||
import { controls } from './controls';
|
||||
|
||||
export const initStore = () => {
|
||||
const store = createReduxStore( STORE_NAME, {
|
||||
reducer,
|
||||
controls: { ...wpControls, ...controls },
|
||||
actions,
|
||||
selectors,
|
||||
resolvers,
|
||||
} );
|
||||
|
||||
register( store );
|
||||
};
|
||||
|
||||
export { hooks, selectors, STORE_NAME };
|
||||
128
modules/ppcp-settings/resources/js/data/styling/reducer.js
Normal file
128
modules/ppcp-settings/resources/js/data/styling/reducer.js
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
/**
|
||||
* Reducer: Defines store structure and state updates for this module.
|
||||
*
|
||||
* Manages both transient (temporary) and persistent (saved) state.
|
||||
* The initial state must define all properties, as dynamic additions are not supported.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import { createReducer, createSetters } from '../utils';
|
||||
import ACTION_TYPES from './action-types';
|
||||
import {
|
||||
STYLING_COLORS,
|
||||
STYLING_LABELS,
|
||||
STYLING_LAYOUTS,
|
||||
STYLING_LOCATIONS,
|
||||
STYLING_SHAPES,
|
||||
} from './configuration';
|
||||
|
||||
// Store structure.
|
||||
|
||||
// Transient: Values that are _not_ saved to the DB (like app lifecycle-flags).
|
||||
const defaultTransient = Object.freeze( {
|
||||
isReady: false,
|
||||
location: STYLING_LOCATIONS.cart.value, // Which location is selected in the Styling tab.
|
||||
} );
|
||||
|
||||
// Persistent: Values that are loaded from the DB.
|
||||
const defaultPersistent = Object.freeze( {
|
||||
[ STYLING_LOCATIONS.cart.value ]: Object.freeze( {
|
||||
enabled: true,
|
||||
methods: [],
|
||||
label: STYLING_LABELS.pay.value,
|
||||
shape: STYLING_SHAPES.rect.value,
|
||||
color: STYLING_COLORS.gold.value,
|
||||
} ),
|
||||
[ STYLING_LOCATIONS.classicCheckout.value ]: Object.freeze( {
|
||||
enabled: true,
|
||||
methods: [],
|
||||
label: STYLING_LABELS.checkout.value,
|
||||
shape: STYLING_SHAPES.rect.value,
|
||||
color: STYLING_COLORS.gold.value,
|
||||
layout: STYLING_LAYOUTS.vertical.value,
|
||||
tagline: false,
|
||||
} ),
|
||||
[ STYLING_LOCATIONS.expressCheckout.value ]: Object.freeze( {
|
||||
enabled: true,
|
||||
methods: [],
|
||||
label: STYLING_LABELS.checkout.value,
|
||||
shape: STYLING_SHAPES.rect.value,
|
||||
color: STYLING_COLORS.gold.value,
|
||||
} ),
|
||||
[ STYLING_LOCATIONS.miniCart.value ]: Object.freeze( {
|
||||
enabled: true,
|
||||
methods: [],
|
||||
label: STYLING_LABELS.pay.value,
|
||||
shape: STYLING_SHAPES.rect.value,
|
||||
color: STYLING_COLORS.gold.value,
|
||||
layout: STYLING_LAYOUTS.vertical.value,
|
||||
tagline: false,
|
||||
} ),
|
||||
[ STYLING_LOCATIONS.product.value ]: Object.freeze( {
|
||||
enabled: true,
|
||||
methods: [],
|
||||
label: STYLING_LABELS.buynow.value,
|
||||
shape: STYLING_SHAPES.rect.value,
|
||||
color: STYLING_COLORS.gold.value,
|
||||
layout: STYLING_LAYOUTS.vertical.value,
|
||||
tagline: false,
|
||||
} ),
|
||||
} );
|
||||
|
||||
const sanitizeLocation = ( oldDetails, newDetails ) => {
|
||||
// Skip if provided details are not a plain object.
|
||||
if (
|
||||
! newDetails ||
|
||||
'object' !== typeof newDetails ||
|
||||
Array.isArray( newDetails )
|
||||
) {
|
||||
return oldDetails;
|
||||
}
|
||||
|
||||
return { ...oldDetails, ...newDetails };
|
||||
};
|
||||
|
||||
// Reducer logic.
|
||||
|
||||
const [ setTransient, setPersistent ] = createSetters(
|
||||
defaultTransient,
|
||||
defaultPersistent
|
||||
);
|
||||
|
||||
const reducer = createReducer( defaultTransient, defaultPersistent, {
|
||||
[ ACTION_TYPES.SET_TRANSIENT ]: ( state, payload ) =>
|
||||
setTransient( state, payload ),
|
||||
|
||||
[ ACTION_TYPES.SET_PERSISTENT ]: ( state, payload ) =>
|
||||
setPersistent( state, payload ),
|
||||
|
||||
[ ACTION_TYPES.RESET ]: ( state ) => {
|
||||
const cleanState = setTransient(
|
||||
setPersistent( state, defaultPersistent ),
|
||||
defaultTransient
|
||||
);
|
||||
|
||||
// Keep "read-only" details and initialization flags.
|
||||
cleanState.isReady = true;
|
||||
|
||||
return cleanState;
|
||||
},
|
||||
|
||||
[ ACTION_TYPES.HYDRATE ]: ( state, payload ) => {
|
||||
const validData = Object.keys( defaultPersistent ).reduce(
|
||||
( data, location ) => {
|
||||
data[ location ] = sanitizeLocation(
|
||||
state.data[ location ],
|
||||
payload.data[ location ]
|
||||
);
|
||||
return data;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
return setPersistent( state, validData );
|
||||
},
|
||||
} );
|
||||
|
||||
export default reducer;
|
||||
36
modules/ppcp-settings/resources/js/data/styling/resolvers.js
Normal file
36
modules/ppcp-settings/resources/js/data/styling/resolvers.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* Resolvers: Handle asynchronous data fetching for the store.
|
||||
*
|
||||
* These functions update store state with data from external sources.
|
||||
* Each resolver corresponds to a specific selector (selector with same name must exist).
|
||||
* Resolvers are called automatically when selectors request unavailable data.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
import { dispatch } from '@wordpress/data';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { apiFetch } from '@wordpress/data-controls';
|
||||
|
||||
import { STORE_NAME, REST_HYDRATE_PATH } from './constants';
|
||||
|
||||
export const resolvers = {
|
||||
/**
|
||||
* Retrieve settings from the site's REST API.
|
||||
*/
|
||||
*persistentData() {
|
||||
try {
|
||||
const result = yield apiFetch( { path: REST_HYDRATE_PATH } );
|
||||
|
||||
yield dispatch( STORE_NAME ).hydrate( result );
|
||||
yield dispatch( STORE_NAME ).setIsReady( true );
|
||||
} catch ( e ) {
|
||||
yield dispatch( 'core/notices' ).createErrorNotice(
|
||||
__(
|
||||
'Error retrieving style-details.',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
21
modules/ppcp-settings/resources/js/data/styling/selectors.js
Normal file
21
modules/ppcp-settings/resources/js/data/styling/selectors.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* Selectors: Extract specific pieces of state from the store.
|
||||
*
|
||||
* These functions provide a consistent interface for accessing store data.
|
||||
* They allow components to retrieve data without knowing the store structure.
|
||||
*
|
||||
* @file
|
||||
*/
|
||||
|
||||
const EMPTY_OBJ = Object.freeze( {} );
|
||||
|
||||
const getState = ( state ) => state || EMPTY_OBJ;
|
||||
|
||||
export const persistentData = ( state ) => {
|
||||
return getState( state ).data || EMPTY_OBJ;
|
||||
};
|
||||
|
||||
export const transientData = ( state ) => {
|
||||
const { data, ...transientState } = getState( state );
|
||||
return transientState || EMPTY_OBJ;
|
||||
};
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { useCallback } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Updates an object with new values, filtering based on allowed keys.
|
||||
*
|
||||
|
|
@ -13,6 +16,10 @@ const updateObject = ( oldObject, newValues, allowedKeys = {} ) => ( {
|
|||
...Object.keys( newValues ).reduce( ( acc, key ) => {
|
||||
if ( key in allowedKeys ) {
|
||||
acc[ key ] = newValues[ key ];
|
||||
} else {
|
||||
console.warn(
|
||||
`Ignoring unknown key "${ key }" - to use it, add it to the initial store properties in the reducer.`
|
||||
);
|
||||
}
|
||||
return acc;
|
||||
}, {} ),
|
||||
|
|
@ -73,3 +80,63 @@ export const createReducer = (
|
|||
return state;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an object with two hooks:
|
||||
* - useTransient( prop )
|
||||
* - usePersistent( prop )
|
||||
*
|
||||
* Both hooks have a similar syntax to the native "useState( prop )" hook, but provide access to
|
||||
* a transient or persistent property in the relevant Redux store.
|
||||
*
|
||||
* Sample:
|
||||
*
|
||||
* const { useTransient } = createHooksForStore( STORE_NAME );
|
||||
* const [ isReady, setIsReady ] = useTransient( 'isReady' );
|
||||
*
|
||||
* @param {string} storeName Store name.
|
||||
* @return {{useTransient, usePersistent}} Store hooks.
|
||||
*/
|
||||
export const createHooksForStore = ( storeName ) => {
|
||||
const createHook = ( selector, dispatcher ) => ( key ) => {
|
||||
const value = useSelect(
|
||||
( select ) => {
|
||||
const store = select( storeName );
|
||||
if ( ! store?.[ selector ] ) {
|
||||
throw new Error(
|
||||
`Please create the selector "${ selector }" for store "${ storeName }"`
|
||||
);
|
||||
}
|
||||
const selectorResult = store[ selector ]();
|
||||
if ( undefined === selectorResult?.[ key ] ) {
|
||||
console.error(
|
||||
`Warning: ${ selector }()[${ key }] is undefined in store "${ storeName }". This may indicate a bug.`
|
||||
);
|
||||
}
|
||||
return selectorResult?.[ key ];
|
||||
},
|
||||
[ key ]
|
||||
);
|
||||
|
||||
const actions = useDispatch( storeName );
|
||||
|
||||
const setValue = useCallback(
|
||||
( newValue ) => {
|
||||
if ( ! actions?.[ dispatcher ] ) {
|
||||
throw new Error(
|
||||
`Please create the action "${ dispatcher }" for store "${ storeName }"`
|
||||
);
|
||||
}
|
||||
actions[ dispatcher ]( key, newValue );
|
||||
},
|
||||
[ actions, key ]
|
||||
);
|
||||
|
||||
return [ value, setValue ];
|
||||
};
|
||||
|
||||
return {
|
||||
useTransient: createHook( 'transientData', 'setTransient' ),
|
||||
usePersistent: createHook( 'persistentData', 'setPersistent' ),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,6 +24,9 @@ use WooCommerce\PayPalCommerce\Settings\Service\AuthenticationManager;
|
|||
use WooCommerce\PayPalCommerce\Settings\Service\ConnectionUrlGenerator;
|
||||
use WooCommerce\PayPalCommerce\Settings\Service\OnboardingUrlManager;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
||||
use WooCommerce\PayPalCommerce\Settings\Endpoint\StylingRestEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Settings\Data\StylingSettings;
|
||||
use WooCommerce\PayPalCommerce\Settings\Service\DataSanitizer;
|
||||
|
||||
return array(
|
||||
'settings.url' => static function ( ContainerInterface $container ) : string {
|
||||
|
|
@ -64,12 +67,23 @@ return array(
|
|||
$container->get( 'wcgateway.is-send-only-country' )
|
||||
);
|
||||
},
|
||||
'settings.data.styling' => static function ( ContainerInterface $container ) : StylingSettings {
|
||||
return new StylingSettings(
|
||||
$container->get( 'settings.service.sanitizer' )
|
||||
);
|
||||
},
|
||||
'settings.rest.onboarding' => static function ( ContainerInterface $container ) : OnboardingRestEndpoint {
|
||||
return new OnboardingRestEndpoint( $container->get( 'settings.data.onboarding' ) );
|
||||
},
|
||||
'settings.rest.common' => static function ( ContainerInterface $container ) : CommonRestEndpoint {
|
||||
return new CommonRestEndpoint( $container->get( 'settings.data.general' ) );
|
||||
},
|
||||
'settings.rest.styling' => static function ( ContainerInterface $container ) : StylingRestEndpoint {
|
||||
return new StylingRestEndpoint(
|
||||
$container->get( 'settings.data.styling' ),
|
||||
$container->get( 'settings.service.sanitizer' )
|
||||
);
|
||||
},
|
||||
'settings.rest.refresh_feature_status' => static function ( ContainerInterface $container ) : RefreshFeatureStatusEndpoint {
|
||||
return new RefreshFeatureStatusEndpoint(
|
||||
$container->get( 'wcgateway.settings' ),
|
||||
|
|
@ -187,6 +201,9 @@ return array(
|
|||
$container->get( 'woocommerce.logger.woocommerce' ),
|
||||
);
|
||||
},
|
||||
'settings.service.sanitizer' => static function ( ContainerInterface $container ) : DataSanitizer {
|
||||
return new DataSanitizer();
|
||||
},
|
||||
'settings.ajax.switch_ui' => static function ( ContainerInterface $container ) : SwitchSettingsUiEndpoint {
|
||||
return new SwitchSettingsUiEndpoint(
|
||||
$container->get( 'woocommerce.logger.woocommerce' ),
|
||||
|
|
|
|||
105
modules/ppcp-settings/src/DTO/LocationStylingDTO.php
Normal file
105
modules/ppcp-settings/src/DTO/LocationStylingDTO.php
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<?php
|
||||
/**
|
||||
* Data transfer object. Stores styling details for a single location.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Settings\DTO;
|
||||
*/
|
||||
|
||||
declare( strict_types = 1 );
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\Settings\DTO;
|
||||
|
||||
/**
|
||||
* DTO that collects all styling details of a single location
|
||||
*
|
||||
* Intentionally has no internal logic, sanitation or validation.
|
||||
*/
|
||||
class LocationStylingDTO {
|
||||
/**
|
||||
* The location name.
|
||||
*
|
||||
* @var string [cart|classic_checkout|express_checkout|mini_cart|product]
|
||||
*/
|
||||
public string $location;
|
||||
|
||||
/**
|
||||
* Whether PayPal payments are enabled on this location.
|
||||
*
|
||||
* @var bool
|
||||
*/
|
||||
public bool $enabled;
|
||||
|
||||
/**
|
||||
* List of active payment methods, e.g., 'venmo', 'applepay', ...
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
public array $methods;
|
||||
|
||||
/**
|
||||
* Shape of buttons on this location.
|
||||
*
|
||||
* @var string [rect|pill]
|
||||
*/
|
||||
public string $shape;
|
||||
|
||||
/**
|
||||
* Label of the button on this location.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public string $label;
|
||||
|
||||
/**
|
||||
* Color of the button on this location.
|
||||
*
|
||||
* @var string [gold|blue|silver|black|white]
|
||||
*/
|
||||
public string $color;
|
||||
|
||||
/**
|
||||
* The button layout
|
||||
*
|
||||
* @var string [horizontal|vertical]
|
||||
*/
|
||||
public string $layout;
|
||||
|
||||
/**
|
||||
* Whether to show a tagline below the buttons.
|
||||
*
|
||||
* @var bool
|
||||
*/
|
||||
public bool $tagline;
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @param string $location The location name.
|
||||
* @param bool $enabled Whether PayPal payments are enabled on this location.
|
||||
* @param array $methods List of active payment methods.
|
||||
* @param string $shape Shape of buttons on this location.
|
||||
* @param string $label Label of the button on this location.
|
||||
* @param string $color Color of the button on this location.
|
||||
* @param string $layout Horizontal or vertical button layout.
|
||||
* @param bool $tagline Whether to show a tagline below the buttons.
|
||||
*/
|
||||
public function __construct(
|
||||
string $location = '',
|
||||
bool $enabled = true,
|
||||
array $methods = array(),
|
||||
string $shape = 'rect',
|
||||
string $label = 'pay',
|
||||
string $color = 'gold',
|
||||
string $layout = 'vertical',
|
||||
bool $tagline = false
|
||||
) {
|
||||
$this->location = $location;
|
||||
$this->enabled = $enabled;
|
||||
$this->methods = $methods;
|
||||
$this->shape = $shape;
|
||||
$this->label = $label;
|
||||
$this->color = $color;
|
||||
$this->layout = $layout;
|
||||
$this->tagline = $tagline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
/**
|
||||
* StylingSettings class
|
||||
* Styling details class
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Settings\Data
|
||||
*/
|
||||
|
|
@ -10,9 +10,13 @@ declare( strict_types = 1 );
|
|||
namespace WooCommerce\PayPalCommerce\Settings\Data;
|
||||
|
||||
use RuntimeException;
|
||||
use WooCommerce\PayPalCommerce\Settings\DTO\LocationStylingDTO;
|
||||
use WooCommerce\PayPalCommerce\Settings\Service\DataSanitizer;
|
||||
|
||||
/**
|
||||
* This class serves as a container for managing the styling settings.
|
||||
* Class StylingSettings
|
||||
*
|
||||
* Stores and manages the styling details.
|
||||
*/
|
||||
class StylingSettings extends AbstractDataModel {
|
||||
|
||||
|
|
@ -21,7 +25,26 @@ class StylingSettings extends AbstractDataModel {
|
|||
*
|
||||
* @var string
|
||||
*/
|
||||
protected const OPTION_KEY = 'woocommerce-ppcp-data-styling-settings';
|
||||
protected const OPTION_KEY = 'woocommerce-ppcp-data-styling';
|
||||
|
||||
/**
|
||||
* Data sanitizer service.
|
||||
*
|
||||
* @var DataSanitizer
|
||||
*/
|
||||
protected DataSanitizer $sanitizer;
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @param DataSanitizer $sanitizer Data sanitizer service.
|
||||
* @throws RuntimeException If the OPTION_KEY is not defined in the child class.
|
||||
*/
|
||||
public function __construct( DataSanitizer $sanitizer ) {
|
||||
$this->sanitizer = $sanitizer;
|
||||
|
||||
parent::__construct();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get default values for the model.
|
||||
|
|
@ -29,6 +52,107 @@ class StylingSettings extends AbstractDataModel {
|
|||
* @return array
|
||||
*/
|
||||
protected function get_defaults() : array {
|
||||
return array();
|
||||
return array(
|
||||
'cart' => new LocationStylingDTO( 'cart' ),
|
||||
'classic_checkout' => new LocationStylingDTO( 'classic_checkout' ),
|
||||
'express_checkout' => new LocationStylingDTO( 'express_checkout' ),
|
||||
'mini_cart' => new LocationStylingDTO( 'mini_cart' ),
|
||||
'product' => new LocationStylingDTO( 'product' ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get styling details for Cart and Block Cart.
|
||||
*
|
||||
* @return LocationStylingDTO
|
||||
*/
|
||||
public function get_cart() : LocationStylingDTO {
|
||||
return $this->data['cart'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set styling details for Cart and Block Cart.
|
||||
*
|
||||
* @param mixed $styles The new styling details.
|
||||
* @return void
|
||||
*/
|
||||
public function set_cart( $styles ) : void {
|
||||
$this->data['cart'] = $this->sanitizer->sanitize_location_style( $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get styling details for Classic Checkout.
|
||||
*
|
||||
* @return LocationStylingDTO
|
||||
*/
|
||||
public function get_classic_checkout() : LocationStylingDTO {
|
||||
return $this->data['classic_checkout'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set styling details for Classic Checkout.
|
||||
*
|
||||
* @param mixed $styles The new styling details.
|
||||
* @return void
|
||||
*/
|
||||
public function set_classic_checkout( $styles ) : void {
|
||||
$this->data['classic_checkout'] = $this->sanitizer->sanitize_location_style( $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get styling details for Express Checkout.
|
||||
*
|
||||
* @return LocationStylingDTO
|
||||
*/
|
||||
public function get_express_checkout() : LocationStylingDTO {
|
||||
return $this->data['express_checkout'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set styling details for Express Checkout.
|
||||
*
|
||||
* @param mixed $styles The new styling details.
|
||||
* @return void
|
||||
*/
|
||||
public function set_express_checkout( $styles ) : void {
|
||||
$this->data['express_checkout'] = $this->sanitizer->sanitize_location_style( $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get styling details for Mini Cart
|
||||
*
|
||||
* @return LocationStylingDTO
|
||||
*/
|
||||
public function get_mini_cart() : LocationStylingDTO {
|
||||
return $this->data['mini_cart'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set styling details for Mini Cart.
|
||||
*
|
||||
* @param mixed $styles The new styling details.
|
||||
* @return void
|
||||
*/
|
||||
public function set_mini_cart( $styles ) : void {
|
||||
$this->data['mini_cart'] = $this->sanitizer->sanitize_location_style( $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get styling details for Product Page.
|
||||
*
|
||||
* @return LocationStylingDTO
|
||||
*/
|
||||
public function get_product() : LocationStylingDTO {
|
||||
return $this->data['product'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set styling details for Product Page.
|
||||
*
|
||||
* @param mixed $styles The new styling details.
|
||||
* @return void
|
||||
*/
|
||||
public function set_product( $styles ) : void {
|
||||
$this->data['product'] = $this->sanitizer->sanitize_location_style( $styles );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ class OnboardingRestEndpoint extends RestEndpoint {
|
|||
public function __construct( OnboardingProfile $profile ) {
|
||||
$this->profile = $profile;
|
||||
|
||||
$this->field_map['products']['sanitize'] = fn( $list ) => array_map( 'sanitize_text_field', $list );
|
||||
$this->field_map['products']['sanitize'] = static fn( $list ) => array_map( 'sanitize_text_field', $list );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -112,9 +112,9 @@ abstract class RestEndpoint extends WC_REST_Controller {
|
|||
if ( null === $sanitation_cb ) {
|
||||
$sanitized[ $key ] = $value;
|
||||
} elseif ( is_string( $sanitation_cb ) && method_exists( $this, $sanitation_cb ) ) {
|
||||
$sanitized[ $key ] = $this->{$sanitation_cb}( $value );
|
||||
$sanitized[ $key ] = $this->{$sanitation_cb}( $value, $key );
|
||||
} elseif ( is_callable( $sanitation_cb ) ) {
|
||||
$sanitized[ $key ] = $sanitation_cb( $value );
|
||||
$sanitized[ $key ] = $sanitation_cb( $value, $key );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
170
modules/ppcp-settings/src/Endpoint/StylingRestEndpoint.php
Normal file
170
modules/ppcp-settings/src/Endpoint/StylingRestEndpoint.php
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<?php
|
||||
/**
|
||||
* REST endpoint to manage the styling page.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Settings\Endpoint
|
||||
*/
|
||||
|
||||
declare( strict_types = 1 );
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\Settings\Endpoint;
|
||||
|
||||
use WP_REST_Server;
|
||||
use WP_REST_Response;
|
||||
use WP_REST_Request;
|
||||
use WooCommerce\PayPalCommerce\Settings\Data\StylingSettings;
|
||||
use WooCommerce\PayPalCommerce\Settings\DTO\LocationStylingDTO;
|
||||
use WooCommerce\PayPalCommerce\Settings\Service\DataSanitizer;
|
||||
|
||||
/**
|
||||
* REST controller for the "Styling" settings tab.
|
||||
*
|
||||
* This API acts as the intermediary between the "external world" and our
|
||||
* internal data model.
|
||||
*/
|
||||
class StylingRestEndpoint extends RestEndpoint {
|
||||
/**
|
||||
* The base path for this REST controller.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $rest_base = 'styling';
|
||||
|
||||
/**
|
||||
* The settings instance.
|
||||
*
|
||||
* @var StylingSettings
|
||||
*/
|
||||
protected StylingSettings $settings;
|
||||
|
||||
/**
|
||||
* Data sanitizer service.
|
||||
*
|
||||
* @var DataSanitizer
|
||||
*/
|
||||
protected DataSanitizer $sanitizer;
|
||||
|
||||
/**
|
||||
* Field mapping for request to profile transformation.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private array $field_map = array(
|
||||
'cart' => array(
|
||||
'js_name' => 'cart',
|
||||
),
|
||||
'classic_checkout' => array(
|
||||
'js_name' => 'classicCheckout',
|
||||
),
|
||||
'express_checkout' => array(
|
||||
'js_name' => 'expressCheckout',
|
||||
),
|
||||
'mini_cart' => array(
|
||||
'js_name' => 'miniCart',
|
||||
),
|
||||
'product' => array(
|
||||
'js_name' => 'product',
|
||||
),
|
||||
);
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @param StylingSettings $settings The settings instance.
|
||||
* @param DataSanitizer $sanitizer Data sanitizer service.
|
||||
*/
|
||||
public function __construct( StylingSettings $settings, DataSanitizer $sanitizer ) {
|
||||
$this->settings = $settings;
|
||||
$this->sanitizer = $sanitizer;
|
||||
|
||||
$this->field_map['cart']['sanitize'] = array(
|
||||
$this->sanitizer,
|
||||
'sanitize_location_style',
|
||||
);
|
||||
$this->field_map['classic_checkout']['sanitize'] = array(
|
||||
$this->sanitizer,
|
||||
'sanitize_location_style',
|
||||
);
|
||||
$this->field_map['express_checkout']['sanitize'] = array(
|
||||
$this->sanitizer,
|
||||
'sanitize_location_style',
|
||||
);
|
||||
$this->field_map['mini_cart']['sanitize'] = array(
|
||||
$this->sanitizer,
|
||||
'sanitize_location_style',
|
||||
);
|
||||
$this->field_map['product']['sanitize'] = array(
|
||||
$this->sanitizer,
|
||||
'sanitize_location_style',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure REST API routes.
|
||||
*/
|
||||
public function register_routes() : void {
|
||||
/**
|
||||
* GET wc/v3/wc_paypal/styling
|
||||
*/
|
||||
register_rest_route(
|
||||
$this->namespace,
|
||||
'/' . $this->rest_base,
|
||||
array(
|
||||
'methods' => WP_REST_Server::READABLE,
|
||||
'callback' => array( $this, 'get_details' ),
|
||||
'permission_callback' => array( $this, 'check_permission' ),
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
* POST wc/v3/wc_paypal/styling
|
||||
* {
|
||||
* // Fields mentioned in $field_map[]['js_name']
|
||||
* }
|
||||
*/
|
||||
register_rest_route(
|
||||
$this->namespace,
|
||||
'/' . $this->rest_base,
|
||||
array(
|
||||
'methods' => WP_REST_Server::EDITABLE,
|
||||
'callback' => array( $this, 'update_details' ),
|
||||
'permission_callback' => array( $this, 'check_permission' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns all styling details.
|
||||
*
|
||||
* @return WP_REST_Response The current styling details.
|
||||
*/
|
||||
public function get_details() : WP_REST_Response {
|
||||
$js_data = $this->sanitize_for_javascript(
|
||||
$this->settings->to_array(),
|
||||
$this->field_map
|
||||
);
|
||||
|
||||
return $this->return_success(
|
||||
$js_data
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates styling details based on the request.
|
||||
*
|
||||
* @param WP_REST_Request $request Full data about the request.
|
||||
*
|
||||
* @return WP_REST_Response The updated styling details.
|
||||
*/
|
||||
public function update_details( WP_REST_Request $request ) : WP_REST_Response {
|
||||
$wp_data = $this->sanitize_for_wordpress(
|
||||
$request->get_params(),
|
||||
$this->field_map
|
||||
);
|
||||
|
||||
$this->settings->from_array( $wp_data );
|
||||
$this->settings->save();
|
||||
|
||||
return $this->get_details();
|
||||
}
|
||||
}
|
||||
105
modules/ppcp-settings/src/Service/DataSanitizer.php
Normal file
105
modules/ppcp-settings/src/Service/DataSanitizer.php
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<?php
|
||||
/**
|
||||
* Provides data sanitization logic.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Settings\Service
|
||||
*/
|
||||
|
||||
declare( strict_types = 1 );
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\Settings\Service;
|
||||
|
||||
use WooCommerce\PayPalCommerce\Settings\DTO\LocationStylingDTO;
|
||||
|
||||
/**
|
||||
* DataSanitizer service. Generally used by REST endpoints (sanitize input data)
|
||||
* and data models (sanitize data during DB access)
|
||||
*/
|
||||
class DataSanitizer {
|
||||
/**
|
||||
* Sanitizes the provided styling data.
|
||||
*
|
||||
* @param mixed $data The styling data to sanitize.
|
||||
* @param ?string $location Name of the location.
|
||||
* @return LocationStylingDTO Styling data.
|
||||
*/
|
||||
public function sanitize_location_style( $data, string $location = null ) : LocationStylingDTO {
|
||||
if ( $data instanceof LocationStylingDTO ) {
|
||||
if ( $location ) {
|
||||
$data->location = $location;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
if ( is_object( $data ) ) {
|
||||
$data = (array) $data;
|
||||
}
|
||||
|
||||
if ( ! is_array( $data ) ) {
|
||||
return new LocationStylingDTO( $location ?? '' );
|
||||
}
|
||||
|
||||
if ( null === $location ) {
|
||||
$location = $data['location'] ?? '';
|
||||
}
|
||||
|
||||
$is_enabled = $this->sanitize_bool( $data['enabled'] ?? true );
|
||||
$shape = $this->sanitize_text( $data['shape'] ?? 'rect' );
|
||||
$label = $this->sanitize_text( $data['label'] ?? 'pay' );
|
||||
$color = $this->sanitize_text( $data['color'] ?? 'gold' );
|
||||
$layout = $this->sanitize_text( $data['layout'] ?? 'vertical' );
|
||||
$tagline = $this->sanitize_bool( $data['tagline'] ?? false );
|
||||
$methods = $this->sanitize_array(
|
||||
$data['methods'] ?? array(),
|
||||
array( $this, 'sanitize_text' )
|
||||
);
|
||||
|
||||
return new LocationStylingDTO(
|
||||
$location,
|
||||
$is_enabled,
|
||||
$methods,
|
||||
$shape,
|
||||
$label,
|
||||
$color,
|
||||
$layout,
|
||||
$tagline
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper. Ensures the value is a string.
|
||||
*
|
||||
* @param mixed $value Value to sanitize.
|
||||
* @param string $default Default value.
|
||||
* @return string Sanitized string.
|
||||
*/
|
||||
protected function sanitize_text( $value, string $default = '' ) : string {
|
||||
return sanitize_text_field( $value ?? $default );
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper. Ensures the value is a boolean.
|
||||
*
|
||||
* @param mixed $value Value to sanitize.
|
||||
* @return bool Sanitized boolean.
|
||||
*/
|
||||
protected function sanitize_bool( $value ) : bool {
|
||||
return filter_var( $value, FILTER_VALIDATE_BOOLEAN );
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper. Ensures the value is an array and all items are sanitized.
|
||||
*
|
||||
* @param null|array $array Value to sanitize.
|
||||
* @param callable $sanitize_callback Callback to sanitize each item in the array.
|
||||
* @return array Array with sanitized items.
|
||||
*/
|
||||
protected function sanitize_array( ?array $array, callable $sanitize_callback ) : array {
|
||||
if ( ! is_array( $array ) ) {
|
||||
return array();
|
||||
}
|
||||
|
||||
return array_map( $sanitize_callback, $array );
|
||||
}
|
||||
}
|
||||
|
|
@ -207,6 +207,7 @@ class SettingsModule implements ServiceModule, ExecutableModule {
|
|||
$endpoints = array(
|
||||
$container->get( 'settings.rest.onboarding' ),
|
||||
$container->get( 'settings.rest.common' ),
|
||||
$container->get( 'settings.rest.styling' ),
|
||||
$container->get( 'settings.rest.connect_manual' ),
|
||||
$container->get( 'settings.rest.login_link' ),
|
||||
$container->get( 'settings.rest.webhooks' ),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
