Skip to content

Commit 64d8eee

Browse files
malessanimalessani
committed
fix: enable stripe with latest react-components package
1 parent 6943f80 commit 64d8eee

21 files changed

Lines changed: 448 additions & 598 deletions

File tree

‎@typings/checkout.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface CheckoutSettings {
1818
logoUrl: NullableType<string>
1919
companyName: string
2020
language: string
21-
primaryColor: HSLProps
21+
primaryColor: string
2222
favicon: string
2323
gtmId: NullableType<string>
2424
supportEmail: NullableType<string>

‎components/composite/Checkout/index.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { Logo } from "components/ui/Logo"
3535

3636
interface Props {
3737
logoUrl?: string
38+
primaryColor: string
3839
orderNumber: number
3940
companyName: string
4041
supportEmail?: string
@@ -45,6 +46,7 @@ interface Props {
4546

4647
const Checkout: React.FC<Props> = ({
4748
logoUrl,
49+
primaryColor,
4850
orderNumber,
4951
companyName,
5052
supportEmail,
@@ -59,6 +61,7 @@ const Checkout: React.FC<Props> = ({
5961
let paypalPayerId = ""
6062
let checkoutComSession = ""
6163
let redirectResult = ""
64+
let redirectStatus = ""
6265

6366
if (query.PayerID) {
6467
paypalPayerId = query.PayerID as string
@@ -72,6 +75,10 @@ const Checkout: React.FC<Props> = ({
7275
checkoutComSession = query["cko-session-id"] as string
7376
}
7477

78+
if (query.redirect_status) {
79+
redirectStatus = query.redirect_status as string
80+
}
81+
7582
const { activeStep, lastActivableStep, setActiveStep, steps } =
7683
useActiveStep()
7784

@@ -176,14 +183,17 @@ const Checkout: React.FC<Props> = ({
176183
isStepRequired={ctx.isPaymentRequired}
177184
isStepDone={ctx.hasPaymentMethod}
178185
>
179-
<PaymentContainer>
186+
<PaymentContainer primaryColor={primaryColor}>
180187
<PlaceOrderContainer
181188
options={{
182189
paypalPayerId,
183190
checkoutCom: { session_id: checkoutComSession },
184191
adyen: {
185192
redirectResult,
186193
},
194+
stripe: {
195+
redirectStatus,
196+
},
187197
}}
188198
>
189199
<AccordionItem

‎components/composite/CheckoutContainer/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,24 @@ import { CheckoutHead } from "components/composite/CheckoutTitle"
44
import { AppProvider } from "components/data/AppProvider"
55
import GlobalStylesProvider from "components/data/GlobalStylesProvider"
66
import { GTMProvider } from "components/data/GTMProvider"
7+
import hex2hsl from "components/utils/hex2hsl"
78

89
interface Props {
910
settings: CheckoutSettings
1011
children: JSX.Element[] | JSX.Element
1112
}
1213

1314
const CheckoutContainer = ({ settings, children }: Props): JSX.Element => {
15+
const primaryColor = hex2hsl(settings.primaryColor)
16+
1417
return (
1518
<div>
1619
<CheckoutHead title={settings.companyName} favicon={settings.favicon} />
1720
<CommerceLayer
1821
accessToken={settings.accessToken}
1922
endpoint={settings.endpoint}
2023
>
21-
<GlobalStylesProvider primaryColor={settings.primaryColor} />
24+
<GlobalStylesProvider primaryColor={primaryColor} />
2225

2326
<AppProvider
2427
orderId={settings.orderId}

‎components/composite/OrderSummary/CouponOrGiftCard/styled.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const CouponName = styled.p`
2222
export const StyledGiftCardOrCouponRemoveButton = styled(
2323
GiftCardOrCouponRemoveButton
2424
)`
25-
${tw`ml-2 text-sm font-bold text-primary border-b leading-none border-black border-opacity-10 md: transition ease-in duration-200 hover:border-opacity-50 hover:text-primary-dark focus:outline-none`}
25+
${tw`ml-2 text-sm font-bold text-primary border-b leading-none border-black border-opacity-10 transition ease-in duration-200 hover:border-opacity-50 hover:text-primary-dark focus:outline-none`}
2626
`
2727

2828
export const StyledGiftCardOrCouponInput = styled(GiftCardOrCouponInput)`

‎components/composite/OrderSummary/LineItemTypes/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ export const LineItemTypes: React.FC<Props> = ({ type }) => {
5252
<StyledLineItemSkuCode type={CODE_LOOKUP[type]} />
5353
<LineItemTitle>
5454
<LineItemName className="font-bold" />
55-
<LineItemAmount className="pl-2 text-lg font-extrabold" />
55+
<LineItemAmount
56+
data-testid="line-item-amount"
57+
className="pl-2 text-lg font-extrabold"
58+
/>
5659
</LineItemTitle>
5760
<StyledLineItemOptions showAll showName={true} className="options">
5861
<LineItemOption />

‎components/composite/StepPayment/PaymentContainer/index.tsx‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { PaymentMethodsContainer } from "@commercelayer/react-components"
22
import { useTranslation } from "react-i18next"
33

44
interface Props {
5+
primaryColor?: string
56
children: JSX.Element[] | JSX.Element
67
}
78

8-
export const PaymentContainer = ({ children }: Props) => {
9+
export const PaymentContainer = ({ primaryColor, children }: Props) => {
910
const { t } = useTranslation()
1011

1112
const checkoutReturnUrl = `${
@@ -62,7 +63,7 @@ export const PaymentContainer = ({ children }: Props) => {
6263
input: {
6364
"font-size": "16px",
6465
"font-family": "monospace",
65-
padding: "10px",
66+
padding: "12px",
6667
},
6768
},
6869
containerClassName: "flex flex-col",
@@ -71,7 +72,8 @@ export const PaymentContainer = ({ children }: Props) => {
7172
cardContainerClassName: "grow mb-3 xl:mb-0",
7273
expDateContainerClassName: "flex-none w-2/4 xl:mx-3 xl:w-24",
7374
cvvContainerClassName: "flex-none w-2/4 pl-3 xl:w-14 xl:pl-0",
74-
inputWrapperClassName: "h-8 border rounded",
75+
inputWrapperClassName:
76+
"h-10 border rounded bg-gray-50 transition duration-300 ease-in-out",
7577
fieldLabelClassName: "text-xs text-gray-400",
7678
},
7779
stripePayment: {
@@ -81,27 +83,64 @@ export const PaymentContainer = ({ children }: Props) => {
8183
"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap",
8284
},
8385
],
84-
options: {
85-
style: {
86-
base: {
86+
appearance: {
87+
theme: "stripe",
88+
variables: {
89+
colorPrimary: primaryColor,
90+
fontFamily: "Manrope, sans-serif",
91+
fontWeightBold: "700",
92+
},
93+
rules: {
94+
".AccordionItem--selected": {
95+
fontWeight: "var(--fontWeightBold)",
8796
color: "#000",
88-
fontWeight: "400",
89-
fontSize: "16px",
90-
fontFamily: "Manrope, sans-serif",
91-
":-webkit-autofill": {
92-
color: "#fce883",
93-
},
94-
"::placeholder": {
95-
color: "#e0e0e0",
96-
},
9797
},
98-
invalid: {
99-
iconColor: "#FFC7EE",
100-
color: "#FFC7EE",
98+
".Tab, .Input, .Block, .CheckboxInput, .CodeInput": {
99+
boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05);",
100+
borderColor: "#E6E7E7",
101+
},
102+
".Input": {
103+
backgroundColor: "#f8f8f8",
104+
},
105+
".Input:focus": {
106+
backgroundColor: "#fff",
107+
},
108+
".Block": {
109+
borderColor: "var(--colorPrimary)",
110+
},
111+
".BlockDivider": {
112+
backgroundColor: "#ebebeb",
113+
},
114+
".Tab, .Tab:hover, .Tab:focus": {
115+
border: "0",
116+
},
117+
".Tab--selected, .Tab--selected:hover": {
118+
backgroundColor: "#f360a6",
119+
color: "#fff",
101120
},
102121
},
103-
hideIcon: false,
104-
hidePostalCode: true,
122+
},
123+
options: {
124+
// style: {
125+
// base: {
126+
// color: "#000",
127+
// fontWeight: "400",
128+
// fontSize: "16px",
129+
// fontFamily: "Manrope, sans-serif",
130+
// ":-webkit-autofill": {
131+
// color: "#fce883",
132+
// },
133+
// "::placeholder": {
134+
// color: "#e0e0e0",
135+
// },
136+
// },
137+
// invalid: {
138+
// iconColor: "#FFC7EE",
139+
// color: "#FFC7EE",
140+
// },
141+
// },
142+
// hideIcon: false,
143+
// hidePostalCode: true,
105144
},
106145
},
107146
wireTransfer: {

‎components/composite/StepPayment/styled.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { CheckCss } from "components/ui/form/CheckBox"
66
import { RadioCss } from "components/ui/form/RadioButton"
77

88
export const PaymentWrapper = styled.div`
9-
${tw`text-black border border-gray-300 mb-5 p-3 rounded bg-gray-50 relative transition duration-200 ease-in hover:border-primary group-hover:(cursor-pointer) group-last:mb-0`}
9+
${tw`will-change-transform text-black border border-gray-300 mb-5 p-3 rounded bg-gray-50 relative transition duration-200 ease-in hover:border-primary group-hover:(cursor-pointer) group-last:mb-0`}
1010
1111
label {
1212
${tw`group-hover:(cursor-pointer)`}
@@ -33,18 +33,35 @@ export const PaymentSummaryValue = styled.p`
3333
${tw`flex font-bold uppercase text-ss leading-8`}
3434
`
3535
export const PaymentSourceContainer = styled.div`
36-
${tw`mt-2`}
37-
.StripeElement, .adyen-checkout__input {
38-
${tw`px-2 py-3 border rounded shadow-sm bg-gradient-to-b from-gray-50 transition duration-500 ease-in-out`}
36+
${tw`mt-2 hidden opacity-0 transition delay-700 duration-100 ease-in-out`}
37+
38+
.payment.active & {
39+
${tw`block opacity-100`}
40+
}
41+
42+
// .adyen-checkout__input {
43+
// ${tw`px-2 py-3 border rounded shadow-sm bg-gradient-to-b from-gray-50 transition duration-300 ease-in-out`}
44+
// }
45+
46+
.adyen-checkout-form-instruction {
47+
${tw`mb-4 font-sans `}
48+
}
49+
50+
.adyen-checkout__label__text {
51+
${tw`text-base font-medium font-sans`}
52+
}
53+
54+
.adyen-checkout__input {
55+
${tw`px-2 py-3 border rounded shadow-sm bg-gray-50 transition duration-300 ease-in-out`}
3956
}
4057
4158
.adyen-checkout__input {
4259
${tw`p-0 border-gray-200`}
4360
}
4461
45-
.StripeElement--focus,
46-
.adyen-checkout__input--focus {
47-
${tw`border-gray-300 bg-gradient-to-t`}
62+
.adyen-checkout__input--focus,
63+
.braintree-hosted-fields-focused {
64+
${tw`border-primary ring ring-offset-0 ring-primary-light ring-opacity-50 bg-white`}
4865
}
4966
5067
.adyen-checkout__label__text {

‎components/data/GlobalStylesProvider/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { createGlobalStyle } from "styled-components"
33
import { GlobalStyles as BaseStyles } from "twin.macro"
44

55
interface GlobalStyleProps {
6-
primaryColor: HSLProps
6+
primaryColor: NullableType<HSLProps>
77
}
88

99
const CustomStyles: any = createGlobalStyle<GlobalStyleProps>`
1010
:root {
11-
--primary-h: ${({ primaryColor }) => primaryColor.h};
12-
--primary-s: ${({ primaryColor }) => primaryColor.s};
13-
--primary-l: ${({ primaryColor }) => primaryColor.l};
11+
--primary-h: ${({ primaryColor }) => primaryColor?.h};
12+
--primary-s: ${({ primaryColor }) => primaryColor?.s};
13+
--primary-l: ${({ primaryColor }) => primaryColor?.l};
1414
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
1515
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
1616
--primary-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.5));

‎components/hooks/useSettingsOrInvalid.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const useSettingsOrInvalid = (): UseSettingsOrInvalid => {
1818
const accessToken = searchParams.get("accessToken")
1919
const paymentReturn = searchParams.get("paymentReturn")
2020
const redirectResult = searchParams.get("redirectResult")
21+
const redirectStatus = searchParams.get("redirect_status")
2122
const [settings, setSettings] = useState<
2223
CheckoutSettings | InvalidCheckoutSettings | undefined
2324
>(undefined)
@@ -28,7 +29,8 @@ export const useSettingsOrInvalid = (): UseSettingsOrInvalid => {
2829
accessToken as string
2930
)
3031

31-
const isPaymentReturn = paymentReturn === "true" || !!redirectResult
32+
const isPaymentReturn =
33+
paymentReturn === "true" || !!redirectResult || !!redirectStatus
3234

3335
useEffect(() => {
3436
if (accessToken && accessToken !== savedAccessToken) {

‎components/ui/Accordion/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,16 @@ const AccordionTab = styled.div`
7171
}
7272
`
7373
const AccordionTabHeader = styled.div`
74-
${tw`text-black relative flex items-start justify-between pb-3 pt-5 cursor-pointer transition ease duration-500 focus:bg-gray-400 md:pt-6 md:pb-0`}
74+
${tw`text-black relative flex items-start justify-between pb-3 pt-5 cursor-pointer transition ease-in-out duration-500 focus:bg-gray-400 md:pt-6 md:pb-0`}
7575
.disabled & {
7676
${tw`pointer-events-none`}
7777
}
7878
`
7979
const AccordionTitle = styled.div`
80-
${tw`transition ease duration-500`}
80+
${tw`transition ease-in-out duration-500`}
8181
`
8282
const AccordionIcon = styled.div`
83-
${tw`transform transition ease duration-500`}
83+
${tw`transform transition ease-in-out duration-500`}
8484
.active & {
8585
${tw`-rotate-180`}
8686
}

0 commit comments

Comments
 (0)
⚡