woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 16:24:33 +08:00
Code Issues Projects Packages Wiki Activity Actions

Rename files, folders

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-10-23 15:24:52 +02:00
parent e971ea33be
commit 222bd0848e
No known key found for this signature in database
GPG key ID: D005973F231309F6
21 changed files with 197 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

14
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js Normal file
View file

@ -0,0 +1,14 @@
import Container from '../../ReusableComponents/Container.js';
import StepWelcome from './StepWelcome.js';
const Onboarding = () => {
return (
<Container>
<div className="ppcp-r-card">
<StepWelcome />
</div>
</Container>
);
};
export default Onboarding;

71
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js Normal file
View file

@ -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 (
<div className="ppcp-r-page-welcome">
<OnboardingHeader
title={ __(
'Tell Us About Your Business',
'woocommerce-paypal-payments'
) }
/>
<div className="ppcp-r-inner-container">
<SelectBoxWrapper>
<SelectBox
title={ __(
'Casual Seller',
'woocommerce-paypal-payments'
) }
description={ __(
'I sell occasionally and mainly use PayPal for personal transactions.',
'woocommerce-paypal-payments'
) }
icon="icon-business-casual-seller.svg"
>
<PaymentMethodIcons
icons={ [
'paypal',
'venmo',
'visa',
'mastercard',
'amex',
'discover',
] }
/>
</SelectBox>
<SelectBox
title={ __(
'Business',
'woocommerce-paypal-payments'
) }
description={ __(
'I run a registered business and sell full-time.',
'woocommerce-paypal-payments'
) }
icon="icon-business-business.svg"
>
<PaymentMethodIcons
icons={ [
'paypal',
'venmo',
'visa',
'mastercard',
'amex',
'discover',
'apple-pay',
'google-pay',
'ideal',
] }
/>
</SelectBox>
</SelectBoxWrapper>
</div>
</div>
);
};
export default StepBusiness;

130
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js Normal file
View file

@ -0,0 +1,130 @@
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
import { __, sprintf } from '@wordpress/i18n';
import { Button, TextControl } from '@wordpress/components';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
import Separator from '../../ReusableComponents/Separator';
const StepWelcome = () => {
return (
<div className="ppcp-r-page-welcome">
<OnboardingHeader
title={ __(
'Welcome to PayPal Payments',
'woocommerce-paypal-payments'
) }
description={ __(
'Your all-in-one checkout solution with PayPal, Venmo, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
'woocommerce-paypal-payments'
) }
/>
<div className="ppcp-r-inner-container">
<PaymentMethodIcons icons="all" />
<WelcomeFeatures />
<Button
className="ppcp-r-button-activate-paypal"
variant="primary"
>
{ __(
'Activate PayPal Payments',
'woocommerce-paypal-payments'
) }
</Button>
<Separator
className="ppcp-r-page-welcome-or-separator"
text={ __( 'or', 'woocommerce-paypal-payments' ) }
/>
<WelcomeForm />
</div>
</div>
);
};
const WelcomeFeatures = () => {
return (
<div className="ppcp-r-welcome-features">
<div className="ppcp-r-welcome-features__col">
<span>{ __( 'Deposits', 'woocommerce-paypal-payments' ) }</span>
<p>{ __( 'Instant', 'woocommerce-paypal-payments' ) }</p>
</div>
<div className="ppcp-r-welcome-features__col">
<span>
{ __( 'Payment Capture', 'woocommerce-paypal-payments' ) }
</span>
<p>
{ __(
'Authorize only or Capture',
'woocommerce-paypal-payments'
) }
</p>
</div>
<div className="ppcp-r-welcome-features__col">
<span>
{ __(
'Recurring payments',
'woocommerce-paypal-payments'
) }
</span>
<p>{ __( 'Supported', 'woocommerce-paypal-payments' ) }</p>
</div>
</div>
);
};
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, <a href="%s">click here</a>.',
'woocommerce-paypal-payments'
),
'#'
);
return (
<>
<SettingsToggleBlock
label={ __(
'Enable Sandbox Mode',
'woocommerce-paypal-payments'
) }
description={ __(
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
'woocommerce-paypal-payments'
) }
>
<Button variant="secondary">
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button>
</SettingsToggleBlock>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<SettingsToggleBlock
label={ __(
'Manually Connect - TODO missing link',
'woocommerce-paypal-payments'
) }
description={ advancedUsersDescription }
>
<TextControl
label={ __(
'Sandbox Client ID',
'woocommerce-paypal-payments'
) }
></TextControl>
<TextControl
label={ __(
'Sandbox Secret Key',
'woocommerce-paypal-payments'
) }
type="password"
></TextControl>
<Button variant="secondary">
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button>
</SettingsToggleBlock>
</>
);
};
export default StepWelcome;