From 32bf8a76ec2ce5b9b69bb6d32b0b0142fe2dbd0e Mon Sep 17 00:00:00 2001 From: inpsyde-maticluznar Date: Wed, 23 Oct 2024 08:56:47 +0200 Subject: [PATCH 1/3] Implement the rest of the welcome step --- .../ppcp-settings/images/icon-button-amex.svg | 12 ++ .../images/icon-button-apple-pay.svg | 5 + .../images/icon-button-bancontact.svg | 7 + .../ppcp-settings/images/icon-button-blik.svg | 33 +++++ .../images/icon-button-discover.svg | 46 +++++++ .../images/icon-button-google-pay.svg | 11 ++ .../images/icon-button-ideal.svg | 20 +++ .../images/icon-button-mastercard.svg | 7 + .../images/icon-button-paypal.svg | 5 + .../ppcp-settings/images/icon-button-sepa.svg | 7 + .../images/icon-button-venmo.svg | 12 ++ .../ppcp-settings/images/icon-button-visa.svg | 8 ++ .../images/icon-payment-method-apple-pay.svg | 5 + .../images/icon-payment-method-bancontact.svg | 6 + .../images/icon-payment-method-blik.svg | 35 +++++ .../images/icon-payment-method-cards.svg | 52 +++++++ .../images/icon-payment-method-eps.svg | 9 ++ .../images/icon-payment-method-fastlane.svg | 6 + .../images/icon-payment-method-google-pay.svg | 11 ++ .../images/icon-payment-method-ideal.svg | 20 +++ .../images/icon-payment-method-paypal.svg | 15 ++ .../images/icon-payment-method-venmo.svg | 5 + modules/ppcp-settings/images/logo-paypal.svg | 13 ++ .../ppcp-settings/resources/css/_global.scss | 12 ++ .../ppcp-settings/resources/css/_mixins.scss | 8 ++ .../resources/css/_variables.scss | 13 ++ .../reusable-components/_button.scss | 22 +++ .../_onboarding-header.scss | 51 +++++++ .../_payment-method-icons.scss | 5 + .../reusable-components/_separator.scss | 18 +++ .../_settings-toggle-block.scss | 30 ++++ .../_settings-wrapper.scss | 18 +++ .../reusable-components/_text-control.scss | 17 +++ .../screens/onboarding/_step-welcome.scss | 64 +++++++++ .../ppcp-settings/resources/css/style.scss | 15 +- modules/ppcp-settings/resources/js/App.js | 8 +- .../reusable-components/container.js | 5 + .../reusable-components/onboarding-header.js | 25 ++++ .../payment-method-icon.js | 15 ++ .../payment-method-icons.js | 21 +++ .../reusable-components/separator.js | 26 ++++ .../settings-toggle-block.js | 43 ++++++ .../screens/onboarding/onboarding.js | 14 ++ .../screens/onboarding/step-welcome.js | 130 ++++++++++++++++++ .../ppcp-settings/resources/js/utils/data.js | 18 +++ modules/ppcp-settings/src/SettingsModule.php | 7 + 46 files changed, 933 insertions(+), 2 deletions(-) create mode 100644 modules/ppcp-settings/images/icon-button-amex.svg create mode 100644 modules/ppcp-settings/images/icon-button-apple-pay.svg create mode 100644 modules/ppcp-settings/images/icon-button-bancontact.svg create mode 100644 modules/ppcp-settings/images/icon-button-blik.svg create mode 100644 modules/ppcp-settings/images/icon-button-discover.svg create mode 100644 modules/ppcp-settings/images/icon-button-google-pay.svg create mode 100644 modules/ppcp-settings/images/icon-button-ideal.svg create mode 100644 modules/ppcp-settings/images/icon-button-mastercard.svg create mode 100644 modules/ppcp-settings/images/icon-button-paypal.svg create mode 100644 modules/ppcp-settings/images/icon-button-sepa.svg create mode 100644 modules/ppcp-settings/images/icon-button-venmo.svg create mode 100644 modules/ppcp-settings/images/icon-button-visa.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-apple-pay.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-bancontact.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-blik.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-cards.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-eps.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-fastlane.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-google-pay.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-ideal.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-paypal.svg create mode 100644 modules/ppcp-settings/images/icon-payment-method-venmo.svg create mode 100644 modules/ppcp-settings/images/logo-paypal.svg create mode 100644 modules/ppcp-settings/resources/css/_global.scss create mode 100644 modules/ppcp-settings/resources/css/_mixins.scss create mode 100644 modules/ppcp-settings/resources/css/_variables.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_button.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_text-control.scss create mode 100644 modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss create mode 100644 modules/ppcp-settings/resources/js/components/reusable-components/container.js create mode 100644 modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js create mode 100644 modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icon.js create mode 100644 modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js create mode 100644 modules/ppcp-settings/resources/js/components/reusable-components/separator.js create mode 100644 modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js create mode 100644 modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js create mode 100644 modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js create mode 100644 modules/ppcp-settings/resources/js/utils/data.js diff --git a/modules/ppcp-settings/images/icon-button-amex.svg b/modules/ppcp-settings/images/icon-button-amex.svg new file mode 100644 index 000000000..6ca8f2fd0 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-amex.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-apple-pay.svg b/modules/ppcp-settings/images/icon-button-apple-pay.svg new file mode 100644 index 000000000..8a39ed47b --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-apple-pay.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/modules/ppcp-settings/images/icon-button-bancontact.svg b/modules/ppcp-settings/images/icon-button-bancontact.svg new file mode 100644 index 000000000..3939eb3f1 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-bancontact.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-blik.svg b/modules/ppcp-settings/images/icon-button-blik.svg new file mode 100644 index 000000000..84046ad68 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-blik.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-discover.svg b/modules/ppcp-settings/images/icon-button-discover.svg new file mode 100644 index 000000000..626b3ce15 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-discover.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-google-pay.svg b/modules/ppcp-settings/images/icon-button-google-pay.svg new file mode 100644 index 000000000..d2bdfbfb9 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-google-pay.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-ideal.svg b/modules/ppcp-settings/images/icon-button-ideal.svg new file mode 100644 index 000000000..4d1564544 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-ideal.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-mastercard.svg b/modules/ppcp-settings/images/icon-button-mastercard.svg new file mode 100644 index 000000000..a0faeeef8 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-mastercard.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-paypal.svg b/modules/ppcp-settings/images/icon-button-paypal.svg new file mode 100644 index 000000000..17e9d9108 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-paypal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/modules/ppcp-settings/images/icon-button-sepa.svg b/modules/ppcp-settings/images/icon-button-sepa.svg new file mode 100644 index 000000000..918c2bd97 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-sepa.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-venmo.svg b/modules/ppcp-settings/images/icon-button-venmo.svg new file mode 100644 index 000000000..80049eb56 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-venmo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-visa.svg b/modules/ppcp-settings/images/icon-button-visa.svg new file mode 100644 index 000000000..43658f846 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-visa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-apple-pay.svg b/modules/ppcp-settings/images/icon-payment-method-apple-pay.svg new file mode 100644 index 000000000..9224d4e5a --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-apple-pay.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-bancontact.svg b/modules/ppcp-settings/images/icon-payment-method-bancontact.svg new file mode 100644 index 000000000..9e5fb0dfb --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-bancontact.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-blik.svg b/modules/ppcp-settings/images/icon-payment-method-blik.svg new file mode 100644 index 000000000..bd15da33d --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-blik.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-cards.svg b/modules/ppcp-settings/images/icon-payment-method-cards.svg new file mode 100644 index 000000000..1bfbf6601 --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-cards.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-eps.svg b/modules/ppcp-settings/images/icon-payment-method-eps.svg new file mode 100644 index 000000000..a4c8ec7fd --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-eps.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-fastlane.svg b/modules/ppcp-settings/images/icon-payment-method-fastlane.svg new file mode 100644 index 000000000..393acf4cf --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-fastlane.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-google-pay.svg b/modules/ppcp-settings/images/icon-payment-method-google-pay.svg new file mode 100644 index 000000000..db81d0ae5 --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-google-pay.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-ideal.svg b/modules/ppcp-settings/images/icon-payment-method-ideal.svg new file mode 100644 index 000000000..41abfec1c --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-ideal.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-paypal.svg b/modules/ppcp-settings/images/icon-payment-method-paypal.svg new file mode 100644 index 000000000..610c8f474 --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-paypal.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-payment-method-venmo.svg b/modules/ppcp-settings/images/icon-payment-method-venmo.svg new file mode 100644 index 000000000..eeea95077 --- /dev/null +++ b/modules/ppcp-settings/images/icon-payment-method-venmo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/modules/ppcp-settings/images/logo-paypal.svg b/modules/ppcp-settings/images/logo-paypal.svg new file mode 100644 index 000000000..4618178e7 --- /dev/null +++ b/modules/ppcp-settings/images/logo-paypal.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/resources/css/_global.scss b/modules/ppcp-settings/resources/css/_global.scss new file mode 100644 index 000000000..cdb50be72 --- /dev/null +++ b/modules/ppcp-settings/resources/css/_global.scss @@ -0,0 +1,12 @@ +* { + font-family: "Inter", sans-serif; + -webkit-font-smoothing: antialiased; +} + +a:not(.button) { + color: $color-blueberry; +} + +.components-form-toggle.is-checked > .components-form-toggle__track { + background-color: $color-blueberry; +} diff --git a/modules/ppcp-settings/resources/css/_mixins.scss b/modules/ppcp-settings/resources/css/_mixins.scss new file mode 100644 index 000000000..6ad01d5c4 --- /dev/null +++ b/modules/ppcp-settings/resources/css/_mixins.scss @@ -0,0 +1,8 @@ +@mixin font($font-size, $line-height, $font-weight, $letter-spacing: false) { + font-size: $font-size + px; + line-height: calc($line-height / $font-size); + font-weight: $font-weight; + @if $letter-spacing { + letter-spacing: $letter-spacing; + } +} diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss new file mode 100644 index 000000000..9100a538a --- /dev/null +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -0,0 +1,13 @@ +$color-white: #fff; +$color-blue: #1D35B4; +$color-blueberry: #3858E9; +$color-gray-900: #1E1E1E; +$color-gray-800: #2F2F2F; +$color-gray-700: #757575; +$color-gray-600: #949494; +$color-gray-500: #BBBBBB; +$color-gray-200: #E0E0E0; +$color-gray: #646970; + +$shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15); +$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, #001435 100%); diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss new file mode 100644 index 000000000..40b26ad8e --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss @@ -0,0 +1,22 @@ +button.components-button { + &.is-primary, &.is-secondary { + background-color: $color-blueberry; + border-radius: 2px; + padding: 14px 17px; + height: auto; + &:hover { + background: $gradient-header; + } + } + + &.is-primary { + @include font(13, 16, 500); + } + + &.is-secondary { + padding: 6px 12px; + @include font(13, 20, 500); + color: $color-white; + border: none; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss new file mode 100644 index 000000000..e5ce8211e --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss @@ -0,0 +1,51 @@ +.ppcp-r-onboarding-header{ + margin: 0 0 32px 0; + + &__gradient { + background: $gradient-header; + width: 100%; + height: 112px; + position: relative; + margin-bottom: 55px; + } + + &__logo-wrapper { + width: 110px; + height: 110px; + background-color: $color-white; + border-radius: 110px; + position: absolute; + left: calc(50% - 55px); + bottom: -55px; + + img { + width: 56px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + + &__content { + max-width: 426px; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + } + + &__title { + @include font(20, 28, 700); + color: $color-blue; + margin: 0 0 4px 0; + text-align: center; + } + + &__description { + color: $color-gray-800; + @include font(14, 20, 400); + margin: 0; + text-align: center; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss new file mode 100644 index 000000000..6999090fe --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss @@ -0,0 +1,5 @@ +.ppcp-r-payment-method-icons { + display: flex; + gap: 8px; + justify-content: center; +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss new file mode 100644 index 000000000..84e3a1f19 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss @@ -0,0 +1,18 @@ +.ppcp-r-separator{ + display: flex; + align-items: center; + + &__line { + height: 1px; + background-color: $color-gray-600; + display: block; + width: 100%; + } + + &__text { + color: $color-gray; + @include font(12, 24, 500, 0.8px); + text-transform: uppercase; + padding: 0 23px; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss new file mode 100644 index 000000000..60443ac86 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss @@ -0,0 +1,30 @@ +.ppcp-r-toggle-block { + &__wrapper { + display: flex; + width: 100%; + gap: 12px; + } + + &__switch { + .components-base-control__field > div { + display: block; + } + } + + &__content-label { + @include font(14, 20, 600); + display: block; + margin: 0 0 4px 0; + color: $color-gray-900; + } + + &__content-description { + @include font(13, 18, 400); + color: $color-gray-700; + margin: 0; + } + + &__toggled-content { + margin-top: 24px; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss new file mode 100644 index 000000000..0c6838842 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss @@ -0,0 +1,18 @@ +.ppcp-r { + + &-inner-container { + width: 620px; + max-width: 100%; + margin: 0 auto; + } + + &-container { + box-shadow: $shadow-card; + max-width: 1024px; + } + + &-card { + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15); + background-color: $color-white; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_text-control.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_text-control.scss new file mode 100644 index 000000000..3b476f89c --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_text-control.scss @@ -0,0 +1,17 @@ +.components-base-control { + &__label { + color: $color-gray-900; + @include font(13, 16, 600); + margin: 0 0 8px 0; + text-transform: none; + } + + &__input { + border: 1px solid $color-gray-700; + border-radius: 2px; + box-shadow: none; + &:focus{ + border-color:$color-blueberry; + } + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss new file mode 100644 index 000000000..689cb44e8 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -0,0 +1,64 @@ +.ppcp-r-page-welcome { + .ppcp-r-inner-container { + padding-bottom: 72px; + } + + .ppcp-r-welcome-features { + margin: 0 0 32px 0; + } + + .ppcp-r-payment-method-icons { + margin: 0 0 12px 0; + } + + .ppcp-r-button-activate-paypal { + display: block; + margin: 0 auto 32px auto; + } + + .ppcp-r-page-welcome-or-separator { + margin: 0 0 32px 0; + } + + .ppcp-r-page-welcome-mode-separator { + margin: 32px 0; + + .ppcp-r-separator__line { + background-color: $color-gray-500; + } + } + + .components-base-control__field { + margin: 0 0 24px 0; + } +} + +.ppcp-r-welcome-features { + display: flex; + justify-content: center; + padding: 8px; + + &__col { + display: flex; + flex-direction: column; + gap: 4px; + + > span { + @include font(11, 16, 600); + text-transform: uppercase; + color: $color-gray-800; + } + + > p { + margin: 0; + @include font(13, 16, 400); + color: $color-gray-700; + } + + &:not(:last-child) { + padding-right: 18px; + border-right: 1px solid $color-gray-200; + margin-right: 18px; + } + } +} diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index 158769ffb..4dc8c50d0 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -1 +1,14 @@ -.red {color:red;} +@import 'variables'; +@import 'mixins'; + +#ppcp-settings-container { + @import './global'; + @import './components/reusable-components/onboarding-header'; + @import './components/reusable-components/button'; + @import './components/reusable-components/settings-toggle-block'; + @import './components/reusable-components/text-control'; + @import './components/reusable-components/separator'; + @import './components/reusable-components/payment-method-icons'; + @import './components/reusable-components/settings-wrapper'; + @import './components/screens/onboarding/step-welcome'; +} diff --git a/modules/ppcp-settings/resources/js/App.js b/modules/ppcp-settings/resources/js/App.js index c88ad1546..f246f6cd2 100644 --- a/modules/ppcp-settings/resources/js/App.js +++ b/modules/ppcp-settings/resources/js/App.js @@ -1,3 +1,9 @@ +import Onboarding from './components/screens/onboarding/onboarding.js'; + export function App() { - return
App
; + return ( +
+ +
+ ); } diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/container.js b/modules/ppcp-settings/resources/js/components/reusable-components/container.js new file mode 100644 index 000000000..b52058d79 --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/reusable-components/container.js @@ -0,0 +1,5 @@ +const Container = ( props ) => { + return
{ props.children }
; +}; + +export default Container; diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js b/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js new file mode 100644 index 000000000..aa2730053 --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js @@ -0,0 +1,25 @@ +import data from '../../utils/data'; + +const OnboardingHeader = ( props ) => { + return ( +
+
+
+ { data().getImage( 'logo-paypal.svg' ) } +
+
+
+

+ { props.title } +

+ { props.description && ( +

+ { props.description } +

+ ) } +
+
+ ); +}; + +export default OnboardingHeader; diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icon.js b/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icon.js new file mode 100644 index 000000000..c45b0ad41 --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icon.js @@ -0,0 +1,15 @@ +import data from '../../utils/data'; + +const PaymentMethodIcon = ( props ) => { + if ( + ( Array.isArray( props.icons ) && + props.icons.includes( props.type ) ) || + props.icons === 'all' + ) { + return data().getImage( 'icon-button-' + props.type + '.svg' ); + } + + return <>; +}; + +export default PaymentMethodIcon; diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js b/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js new file mode 100644 index 000000000..04d8faff5 --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js @@ -0,0 +1,21 @@ +import PaymentMethodIcon from './payment-method-icon'; + +const PaymentMethodIcons = ( props ) => { + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default PaymentMethodIcons; diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/separator.js b/modules/ppcp-settings/resources/js/components/reusable-components/separator.js new file mode 100644 index 000000000..8c6507b99 --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/reusable-components/separator.js @@ -0,0 +1,26 @@ +const Separator = ( props ) => { + let separatorClass = 'ppcp-r-separator'; + + if ( props?.className ) { + separatorClass += ' ' + props.className; + } + + if ( props.text ) { + return ( +
+ + + { props.text } + +
+ ); + } + + return ( +
+ +
+ ); +}; + +export default Separator; diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js b/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js new file mode 100644 index 000000000..96706e444 --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js @@ -0,0 +1,43 @@ +import { useState } from '@wordpress/element'; +import { ToggleControl } from '@wordpress/components'; + +const SettingsToggleBlock = ( props ) => { + const [ isToggled, setToggled ] = useState( false ); + + return ( +
+
+
+ { props?.label && ( + + { props.label } + + ) } + { props?.description && ( +

+ ) } +
+
+ { + setToggled( newValue ); + } } + /> +
+
+ { props.children && isToggled && ( +
+ { props.children } +
+ ) } +
+ ); +}; + +export default SettingsToggleBlock; diff --git a/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js b/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js new file mode 100644 index 000000000..8bf6ca02d --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js @@ -0,0 +1,14 @@ +import Container from '../../reusable-components/container'; +import StepWelcome from './step-welcome.js'; + +const Onboarding = () => { + return ( + +
+ +
+ + ); +}; + +export default Onboarding; diff --git a/modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js b/modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js new file mode 100644 index 000000000..f9718afce --- /dev/null +++ b/modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js @@ -0,0 +1,130 @@ +import OnboardingHeader from '../../reusable-components/onboarding-header.js'; +import { __, sprintf } from '@wordpress/i18n'; +import { Button, TextControl } from '@wordpress/components'; +import PaymentMethodIcons from '../../reusable-components/payment-method-icons'; +import SettingsToggleBlock from '../../reusable-components/settings-toggle-block'; +import Separator from '../../reusable-components/separator'; + +const StepWelcome = () => { + return ( +
+ +
+ + + + + +
+
+ ); +}; + +const WelcomeFeatures = () => { + return ( +
+
+ { __( 'Deposits', 'woocommerce-paypal-payments' ) } +

{ __( 'Instant', 'woocommerce-paypal-payments' ) }

+
+
+ + { __( 'Payment Capture', 'woocommerce-paypal-payments' ) } + +

+ { __( + 'Authorize only or Capture', + 'woocommerce-paypal-payments' + ) } +

+
+
+ + { __( + 'Recurring payments', + 'woocommerce-paypal-payments' + ) } + +

{ __( 'Supported', 'woocommerce-paypal-payments' ) }

+
+
+ ); +}; + +const WelcomeForm = () => { + const advancedUsersDescription = sprintf( + // translators: %s: Link to PayPal REST application guide + __( + 'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, click here.', + 'woocommerce-paypal-payments' + ), + '#' + ); + + return ( + <> + + + + + + + + + + + + ); +}; + +export default StepWelcome; diff --git a/modules/ppcp-settings/resources/js/utils/data.js b/modules/ppcp-settings/resources/js/utils/data.js new file mode 100644 index 000000000..f66e84c1a --- /dev/null +++ b/modules/ppcp-settings/resources/js/utils/data.js @@ -0,0 +1,18 @@ +const data = () => { + return { + ...global.ppcpSettings, + getImage( imageName, className = '' ) { + const pathToImages = global.ppcpSettings.assets.imagesUrl; + + return ( + + ); + }, + }; +}; + +export default data; diff --git a/modules/ppcp-settings/src/SettingsModule.php b/modules/ppcp-settings/src/SettingsModule.php index 365f7404a..f3cd1ddd1 100644 --- a/modules/ppcp-settings/src/SettingsModule.php +++ b/modules/ppcp-settings/src/SettingsModule.php @@ -77,6 +77,13 @@ class SettingsModule implements ServiceModule, ExecutableModule { ); wp_enqueue_style( 'ppcp-admin-settings' ); + + wp_enqueue_style('ppcp-admin-settings-font', 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); + wp_localize_script('ppcp-admin-settings', 'ppcpSettings', [ + 'assets' => [ + 'imagesUrl' => $module_url . '/images/' + ] + ]); } ); From 3b6db73e8defb1b49f0931465fc600f69d75217f Mon Sep 17 00:00:00 2001 From: inpsyde-maticluznar Date: Wed, 23 Oct 2024 09:59:56 +0200 Subject: [PATCH 2/3] Fix code style errors --- modules/ppcp-settings/src/SettingsModule.php | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/modules/ppcp-settings/src/SettingsModule.php b/modules/ppcp-settings/src/SettingsModule.php index f3cd1ddd1..a92ba0775 100644 --- a/modules/ppcp-settings/src/SettingsModule.php +++ b/modules/ppcp-settings/src/SettingsModule.php @@ -78,12 +78,16 @@ class SettingsModule implements ServiceModule, ExecutableModule { wp_enqueue_style( 'ppcp-admin-settings' ); - wp_enqueue_style('ppcp-admin-settings-font', 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); - wp_localize_script('ppcp-admin-settings', 'ppcpSettings', [ - 'assets' => [ - 'imagesUrl' => $module_url . '/images/' - ] - ]); + wp_enqueue_style( 'ppcp-admin-settings-font', 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', array(), $style_asset_file['version'] ); + wp_localize_script( + 'ppcp-admin-settings', + 'ppcpSettings', + array( + 'assets' => array( + 'imagesUrl' => $module_url . '/images/', + ), + ) + ); } ); From d6d2eee54cbafbc7c408769e2ca100600f7ae216 Mon Sep 17 00:00:00 2001 From: inpsyde-maticluznar Date: Wed, 23 Oct 2024 12:59:41 +0200 Subject: [PATCH 3/3] Add responsive to the welcome page --- .../_onboarding-header.scss | 3 ++- .../_payment-method-icons.scss | 1 + .../_settings-wrapper.scss | 5 ++++- .../screens/onboarding/_step-welcome.scss | 19 +++++++++++++++++++ 4 files changed, 26 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss index e5ce8211e..7ac522152 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss @@ -28,11 +28,12 @@ } &__content { - max-width: 426px; + max-width: 458px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; + padding:0 16px; } &__title { diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss index 6999090fe..438e72e64 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss @@ -2,4 +2,5 @@ display: flex; gap: 8px; justify-content: center; + flex-wrap: wrap; } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss index 0c6838842..c38fb5ae1 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss @@ -1,14 +1,17 @@ .ppcp-r { &-inner-container { - width: 620px; + width: 652px; max-width: 100%; margin: 0 auto; + padding:0 16px; + box-sizing: border-box; } &-container { box-shadow: $shadow-card; max-width: 1024px; + margin: 0 auto; } &-card { diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss index 689cb44e8..e9861b900 100644 --- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -1,6 +1,9 @@ .ppcp-r-page-welcome { .ppcp-r-inner-container { padding-bottom: 72px; + @media screen and (max-width: 480px) { + padding-bottom: 36px; + } } .ppcp-r-welcome-features { @@ -61,4 +64,20 @@ margin-right: 18px; } } + + @media screen and (max-width: 480px) { + flex-wrap: wrap; + row-gap: 8px; + &__col { + width: 100%; + text-align: center; + + &:not(:last-child) { + border-bottom: 1px solid $color-gray-200; + border-right: 0; + padding-right: 0; + padding-bottom: 8px; + } + } + } }