diff --git a/modules/ppcp-settings/images/icon-business-business.svg b/modules/ppcp-settings/images/icon-business-business.svg new file mode 100644 index 000000000..e78fa1d6d --- /dev/null +++ b/modules/ppcp-settings/images/icon-business-business.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-business-casual-seller.svg b/modules/ppcp-settings/images/icon-business-casual-seller.svg new file mode 100644 index 000000000..4a1f2e9dd --- /dev/null +++ b/modules/ppcp-settings/images/icon-business-casual-seller.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/modules/ppcp-settings/resources/css/_global.scss b/modules/ppcp-settings/resources/css/_global.scss index cdb50be72..05f237fa1 100644 --- a/modules/ppcp-settings/resources/css/_global.scss +++ b/modules/ppcp-settings/resources/css/_global.scss @@ -1,6 +1,7 @@ * { font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; + box-sizing: border-box; } a:not(.button) { diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss new file mode 100644 index 000000000..59ccb49d3 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss @@ -0,0 +1,50 @@ +.ppcp-r-select-box-wrapper { + max-width: 590px; + margin: 0 auto; + display: flex; + gap: 32px; + flex-wrap: wrap; +} + +.ppcp-r-select-box { + width: 100%; + border: 1px solid $color-gray-500; + border-radius: 8px; + padding: 28px 32px; + display: flex; + align-items: center; + box-sizing: border-box; + + + input[type='radio'] { + width: 20px; + height: 20px; + position: absolute; + left: 0; + top: 0; + margin: 0; + opacity: 0; + } + + &__radio { + width: 20px; + height: 20px; + position: relative; + box-sizing: border-box; + + &:checked { + + .ppcp-r-select-box__presentation { + background:black; + } + } + } + + &__radio-presentation { + width: 20px; + height: 20px; + border: 1px solid $color-gray-600; + border-radius: 20px; + display: block; + pointer-events: none; + } +} diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index 4dc8c50d0..4c6fd5198 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -10,5 +10,6 @@ @import './components/reusable-components/separator'; @import './components/reusable-components/payment-method-icons'; @import './components/reusable-components/settings-wrapper'; + @import './components/reusable-components/select-box'; @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 f246f6cd2..b319cc70b 100644 --- a/modules/ppcp-settings/resources/js/App.js +++ b/modules/ppcp-settings/resources/js/App.js @@ -1,4 +1,4 @@ -import Onboarding from './components/screens/onboarding/onboarding.js'; +import Onboarding from './Components/Screens/Onboarding/Onboarding.js'; export function App() { return ( diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/container.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Container.js similarity index 100% rename from modules/ppcp-settings/resources/js/components/reusable-components/container.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Container.js diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OnboardingHeader.js similarity index 100% rename from modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/OnboardingHeader.js diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js similarity index 100% rename from modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icon.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js similarity index 93% rename from modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js index 04d8faff5..cd8016a8c 100644 --- a/modules/ppcp-settings/resources/js/components/reusable-components/payment-method-icons.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcons.js @@ -1,4 +1,4 @@ -import PaymentMethodIcon from './payment-method-icon'; +import PaymentMethodIcon from './PaymentMethodIcon'; const PaymentMethodIcons = ( props ) => { return ( diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js new file mode 100644 index 000000000..1362e6b24 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBox.js @@ -0,0 +1,34 @@ +import data from '../../utils/data'; + +const SelectBox = ( props ) => { + return ( +
+
+ + +
+
+ { data().getImage( props.icon ) } +
+ + { props.title } + +

+ { props.description } +

+ { props.children && ( +
+ { props.children } +
+ ) } +
+
+
+ ); +}; + +export default SelectBox; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBoxWrapper.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBoxWrapper.js new file mode 100644 index 000000000..870c86203 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SelectBoxWrapper.js @@ -0,0 +1,5 @@ +const SelectBoxWrapper = ( props ) => { + return
{ props.children }
; +}; + +export default SelectBoxWrapper; diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/separator.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js similarity index 100% rename from modules/ppcp-settings/resources/js/components/reusable-components/separator.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js similarity index 100% rename from modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js diff --git a/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js similarity index 60% rename from modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js index 8bf6ca02d..49c132cb5 100644 --- a/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js @@ -1,5 +1,5 @@ -import Container from '../../reusable-components/container'; -import StepWelcome from './step-welcome.js'; +import Container from '../../ReusableComponents/Container.js'; +import StepWelcome from './StepWelcome.js'; const Onboarding = () => { return ( diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js new file mode 100644 index 000000000..2d83679ee --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js @@ -0,0 +1,71 @@ +import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js'; +import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js'; +import SelectBox from '../../ReusableComponents/SelectBox.js'; +import { __ } from '@wordpress/i18n'; +import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; + +const StepBusiness = () => { + return ( +
+ +
+ + + + + + + + +
+
+ ); +}; + +export default StepBusiness; diff --git a/modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js similarity index 91% rename from modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js rename to modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js index f9718afce..b08b3107b 100644 --- a/modules/ppcp-settings/resources/js/components/screens/onboarding/step-welcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -1,9 +1,9 @@ -import OnboardingHeader from '../../reusable-components/onboarding-header.js'; +import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.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'; +import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; +import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock'; +import Separator from '../../ReusableComponents/Separator'; const StepWelcome = () => { return ( diff --git a/modules/ppcp-settings/src/SettingsModule.php b/modules/ppcp-settings/src/SettingsModule.php index 55aacd095..1239911ca 100644 --- a/modules/ppcp-settings/src/SettingsModule.php +++ b/modules/ppcp-settings/src/SettingsModule.php @@ -72,7 +72,7 @@ class SettingsModule implements ServiceModule, ExecutableModule { wp_register_style( 'ppcp-admin-settings', - $module_url . '/assets/style-style.css', + $module_url . '/assets/style-style-rtl.css', $style_asset_file['dependencies'], $style_asset_file['version'] );