autonomic-cooperative/woocommerce
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
naomi
2021-12-10 12:03:04 +00:00
commit c46c7ddbf0
3643 changed files with 582794 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js Normal file
View File

@ -0,0 +1,76 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
useEmitResponse,
useExpressPaymentMethods,
} from '@woocommerce/base-context/hooks';
import {
StoreNoticesProvider,
useCheckoutContext,
usePaymentMethodDataContext,
} from '@woocommerce/base-context';
import LoadingMask from '@woocommerce/base-components/loading-mask';
/**
* Internal dependencies
*/
import ExpressPaymentMethods from '../express-payment-methods';
import './style.scss';
const CartExpressPayment = () => {
const { paymentMethods, isInitialized } = useExpressPaymentMethods();
const { noticeContexts } = useEmitResponse();
const {
isCalculating,
isProcessing,
isAfterProcessing,
isBeforeProcessing,
isComplete,
hasError,
} = useCheckoutContext();
const { currentStatus: paymentStatus } = usePaymentMethodDataContext();
if (
! isInitialized ||
( isInitialized && Object.keys( paymentMethods ).length === 0 )
) {
return null;
}
// Set loading state for express payment methods when payment or checkout is in progress.
const checkoutProcessing =
isProcessing ||
isAfterProcessing ||
isBeforeProcessing ||
( isComplete && ! hasError );
return (
<>
<LoadingMask
isLoading={
isCalculating ||
checkoutProcessing ||
paymentStatus.isDoingExpressPayment
}
>
<div className="wc-block-components-express-payment wc-block-components-express-payment--cart">
<div className="wc-block-components-express-payment__content">
<StoreNoticesProvider
context={ noticeContexts.EXPRESS_PAYMENTS }
>
<ExpressPaymentMethods />
</StoreNoticesProvider>
</div>
</div>
</LoadingMask>
<div className="wc-block-components-express-payment-continue-rule wc-block-components-express-payment-continue-rule--cart">
{ /* translators: Shown in the Cart block between the express payment methods and the Proceed to Checkout button */ }
{ __( 'Or', 'woocommerce' ) }
</div>
</>
);
};
export default CartExpressPayment;

105
packages/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js Normal file
View File

@ -0,0 +1,105 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
useEmitResponse,
useExpressPaymentMethods,
} from '@woocommerce/base-context/hooks';
import {
StoreNoticesProvider,
useCheckoutContext,
usePaymentMethodDataContext,
useEditorContext,
} from '@woocommerce/base-context';
import Title from '@woocommerce/base-components/title';
import LoadingMask from '@woocommerce/base-components/loading-mask';
import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
/**
* Internal dependencies
*/
import ExpressPaymentMethods from '../express-payment-methods';
import './style.scss';
const CheckoutExpressPayment = () => {
const {
isCalculating,
isProcessing,
isAfterProcessing,
isBeforeProcessing,
isComplete,
hasError,
} = useCheckoutContext();
const { currentStatus: paymentStatus } = usePaymentMethodDataContext();
const { paymentMethods, isInitialized } = useExpressPaymentMethods();
const { isEditor } = useEditorContext();
const { noticeContexts } = useEmitResponse();
if (
! isInitialized ||
( isInitialized && Object.keys( paymentMethods ).length === 0 )
) {
// Make sure errors are shown in the editor and for admins. For example,
// when a payment method fails to register.
if ( isEditor || CURRENT_USER_IS_ADMIN ) {
return (
<StoreNoticesProvider
context={ noticeContexts.EXPRESS_PAYMENTS }
></StoreNoticesProvider>
);
}
return null;
}
// Set loading state for express payment methods when payment or checkout is in progress.
const checkoutProcessing =
isProcessing ||
isAfterProcessing ||
isBeforeProcessing ||
( isComplete && ! hasError );
return (
<>
<LoadingMask
isLoading={
isCalculating ||
checkoutProcessing ||
paymentStatus.isDoingExpressPayment
}
>
<div className="wc-block-components-express-payment wc-block-components-express-payment--checkout">
<div className="wc-block-components-express-payment__title-container">
<Title
className="wc-block-components-express-payment__title"
headingLevel="2"
>
{ __(
'Express checkout',
'woocommerce'
) }
</Title>
</div>
<div className="wc-block-components-express-payment__content">
<StoreNoticesProvider
context={ noticeContexts.EXPRESS_PAYMENTS }
>
<p>
{ __(
'In a hurry? Use one of our express checkout options:',
'woocommerce'
) }
</p>
<ExpressPaymentMethods />
</StoreNoticesProvider>
</div>
</div>
</LoadingMask>
<div className="wc-block-components-express-payment-continue-rule wc-block-components-express-payment-continue-rule--checkout">
{ __( 'Or continue below', 'woocommerce' ) }
</div>
</>
);
};
export default CheckoutExpressPayment;

2
packages/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/express-payment/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as CartExpressPayment } from './cart-express-payment.js';
export { default as CheckoutExpressPayment } from './checkout-express-payment.js';

157
packages/woocommerce-blocks/assets/js/blocks/cart-checkout/payment-methods/express-payment/style.scss Normal file
View File

@ -0,0 +1,157 @@
$border-width: 1px;
$border-radius: 5px;
.wc-block-components-express-payment {
margin: auto;
position: relative;
.wc-block-components-express-payment__event-buttons {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
text-align: center;
> li {
margin: 0;
> img {
width: 100%;
height: 48px;
}
}
}
}
.wc-block-components-express-payment--checkout {
margin-top: $border-radius;
.wc-block-components-express-payment__title-container {
display: flex;
flex-direction: row;
left: 0;
position: absolute;
right: 0;
top: -$border-radius;
vertical-align: middle;
// Pseudo-elements used to show the border before and after the title.
&::before {
border-left: $border-width solid currentColor;
border-top: $border-width solid currentColor;
border-radius: $border-radius 0 0 0;
content: "";
display: block;
height: $border-radius - $border-width;
margin-right: $gap-small;
opacity: 0.3;
pointer-events: none;
width: #{$gap-large - $gap-small - $border-width * 2};
}
&::after {
border-right: $border-width solid currentColor;
border-top: $border-width solid currentColor;
border-radius: 0 $border-radius 0 0;
content: "";
display: block;
height: $border-radius - $border-width;
margin-left: $gap-small;
opacity: 0.3;
pointer-events: none;
flex-grow: 1;
}
}
.wc-block-components-express-payment__title {
flex-grow: 0;
transform: translateY(-50%);
}
.wc-block-components-express-payment__content {
@include with-translucent-border(0 $border-width $border-width);
padding: em($gap-large) #{$gap-large - $border-width};
&::after {
border-radius: 0 0 $border-radius $border-radius;
}
> p {
margin-bottom: em($gap);
}
}
.wc-block-components-express-payment__event-buttons {
> li {
display: inline-block;
width: 50%;
}
> li:nth-child(even) {
padding-left: $gap-smaller;
}
> li:nth-child(odd) {
padding-right: $gap-smaller;
}
}
}
.wc-block-components-express-payment--cart {
.wc-block-components-express-payment__event-buttons {
> li {
padding-bottom: $gap;
text-align: center;
width: 100%;
&:last-child {
padding-bottom: 0;
}
}
}
}
.wc-block-components-express-payment-continue-rule {
display: flex;
align-items: center;
text-align: center;
padding: 0 $gap-large;
margin: $gap-large 0;
&::before {
margin-right: 10px;
}
&::after {
margin-left: 10px;
}
&::before,
&::after {
content: " ";
flex: 1;
border-bottom: 1px solid;
opacity: 0.3;
}
}
.wc-block-components-express-payment-continue-rule--cart {
margin: $gap 0;
text-transform: uppercase;
}
.theme-twentynineteen {
.wc-block-components-express-payment__title::before {
display: none;
}
}
// For Twenty Twenty we need to increase specificity of the title.
.theme-twentytwenty {
.wc-block-components-express-payment .wc-block-components-express-payment__title {
padding-left: $gap-small;
padding-right: $gap-small;
}
}