Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 7x 7x 7x 7x 7x 7x 7x 9x 9x 9x 9x 9x 9x 9x 13x 8x 8x 2x 2x 1x 1x 9x 21x 21x 42x 21x 21x 21x 21x 12x 9x 9x 7x | import { CheckoutSelectors, CustomerRequestOptions, CustomError } from '@bigcommerce/checkout-sdk';
import { noop } from 'lodash';
import React, { FunctionComponent } from 'react';
import { withCheckout, CheckoutContextProps } from '../checkout';
import { TranslatedString } from '../locale';
import { Button, ButtonSize, ButtonVariant } from '../ui/button';
import canSignOut, { isSupportedSignoutMethod } from './canSignOut';
export interface CustomerInfoProps {
onSignOut?(event: CustomerSignOutEvent): void;
onSignOutError?(error: CustomError): void;
}
export interface CustomerSignOutEvent {
isCartEmpty: boolean;
}
interface WithCheckoutCustomerInfoProps {
email: string;
methodId: string;
isSignedIn: boolean;
isSigningOut: boolean;
signOut(options?: CustomerRequestOptions): Promise<CheckoutSelectors>;
}
const CustomerInfo: FunctionComponent<CustomerInfoProps & WithCheckoutCustomerInfoProps> = ({
email,
methodId,
isSignedIn,
isSigningOut,
onSignOut = noop,
onSignOutError = noop,
signOut,
}) => {
const handleSignOut: () => Promise<void> = async () => {
try {
if (EisSupportedSignoutMethod(methodId)) {
await signOut({ methodId });
onSignOut({ isCartEmpty: false });
window.location.reload();
} else {
await signOut();
onSignOut({ isCartEmpty: false });
}
} catch (error) {
if (error.type === 'checkout_not_available') {
onSignOut({ isCartEmpty: true });
} else {
onSignOutError(error);
}
}
};
return (
<div
className="customerView"
data-test="checkout-customer-info"
>
<div
className="customerView-body optimizedCheckout-contentPrimary"
data-test="customer-info"
>
{ email }
</div>
<div className="customerView-actions">
{ isSignedIn && <Button
isLoading={ isSigningOut }
onClick={ handleSignOut }
size={ ButtonSize.Tiny }
testId="sign-out-link"
variant={ ButtonVariant.Secondary }
>
<TranslatedString id="customer.sign_out_action" />
</Button> }
</div>
</div>
);
};
function mapToWithCheckoutCustomerInfoProps(
{ checkoutService, checkoutState }: CheckoutContextProps
): WithCheckoutCustomerInfoProps | null {
const {
data: { getBillingAddress, getCheckout, getCustomer },
statuses: { isSigningOut },
} = checkoutState;
const billingAddress = getBillingAddress();
const checkout = getCheckout();
const customer = getCustomer();
if (!billingAddress || !checkout || !customer) {
return null;
}
const methodId = checkout.payments && checkout.payments.length === 1 ? checkout.payments[0].providerId : '';
return {
email: billingAddress.email || customer.email,
methodId,
isSignedIn: canSignOut(customer, checkout, methodId),
isSigningOut: isSigningOut(),
signOut: checkoutService.signOutCustomer,
};
}
export default withCheckout(mapToWithCheckoutCustomerInfoProps)(CustomerInfo);
|