diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res index 1784479e..bef9f90a 100644 --- a/src/Components/DynamicFields.res +++ b/src/Components/DynamicFields.res @@ -318,425 +318,421 @@ let make = ( dynamicFieldsToRenderInsideBilling->Array.length > 0 && (dynamicFieldsToRenderInsideBilling->Array.length > 1 || !isOnlyInfoElementPresent) - { - fieldsArr->Array.length > 0 - ? <> - {dynamicFieldsToRenderOutsideBilling - ->Array.mapWithIndex((item, index) => { -
Int.toString}`} - className="flex flex-col w-full place-content-between" - style={ReactDOMStyle.make( - ~marginTop=index !== 0 || paymentMethod === "card" - ? themeObj.spacingGridColumn - : "", - ~gridColumnGap=themeObj.spacingGridRow, - (), - )}> - {switch item { - | CardNumber => - - | CardExpiryMonth - | CardExpiryYear - | CardExpiryMonthAndYear => - - | CardCvc => - - | CardExpiryAndCvc => -
- Array.length > 0}> + {<> + {dynamicFieldsToRenderOutsideBilling + ->Array.mapWithIndex((item, index) => { +
Int.toString}`} + className="flex flex-col w-full place-content-between" + style={ReactDOMStyle.make( + ~marginTop=index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "", + ~gridColumnGap=themeObj.spacingGridRow, + (), + )}> + {switch item { + | CardNumber => + + | CardExpiryMonth + | CardExpiryYear + | CardExpiryMonthAndYear => + + | CardCvc => + + | CardExpiryAndCvc => +
+ + +
+ | Currency(currencyArr) => + + | FullName => + getCustomFieldName} + optionalRequiredFields={Some(requiredFields)} + /> + | Email + | InfoElement + | Country + | Bank + | None + | BillingName + | PhoneNumber + | AddressLine1 + | AddressLine2 + | AddressCity + | StateAndCity + | AddressPincode + | AddressState + | BlikCode + | SpecialField(_) + | CountryAndPincode(_) + | AddressCountry(_) => React.null + }} +
+ }) + ->React.array} + +
+ {React.string(localeString.billingDetailsText)} +
+ {dynamicFieldsToRenderInsideBilling + ->Array.mapWithIndex((item, index) => { +
Int.toString}`} + className="flex flex-col w-full place-content-between"> + {switch item { + | BillingName => + | Email => + | PhoneNumber => + | StateAndCity => +
+ { + let value = ReactEvent.Form.target(ev)["value"] + setCity(prev => { + isValid: value !== "" ? Some(true) : Some(false), + value, + errorString: value !== "" ? "" : prev.errorString, + }) + }} + onBlur={ev => { + let value = ReactEvent.Focus.target(ev)["value"] + setCity(prev => { + ...prev, + isValid: Some(value !== ""), + }) + }} + paymentType + type_="text" + name="city" + inputRef=cityRef + placeholder=localeString.cityLabel + /> + {switch stateJson { + | Some(options) => + Utils.getStateNames({ + value: country, + isValid: None, + errorString: "", + })} + /> + | None => React.null + }} +
+ | CountryAndPincode(countryArr) => +
+ + { + let value = ReactEvent.Focus.target(ev)["value"] + setPostalCode(prev => { + ...prev, + isValid: Some(value !== ""), + }) + }} + onChange=onPostalChange + paymentType + name="postal" + inputRef=postalRef + placeholder=localeString.postalCodeLabel + /> +
+ | AddressLine1 => + { + let value = ReactEvent.Form.target(ev)["value"] + setLine1(prev => { + isValid: value !== "" ? Some(true) : Some(false), + value, + errorString: value !== "" ? "" : prev.errorString, + }) + }} + onBlur={ev => { + let value = ReactEvent.Focus.target(ev)["value"] + setLine1(prev => { + ...prev, + isValid: Some(value !== ""), + }) + }} paymentType - type_="tel" - appearance=config.appearance - maxLength=7 - inputRef=expiryRef - placeholder="MM / YY" + type_="text" + name="line1" + inputRef=line1Ref + placeholder=localeString.line1Placeholder + /> + | AddressLine2 => + { + let value = ReactEvent.Form.target(ev)["value"] + setLine2(prev => { + isValid: value !== "" ? Some(true) : Some(false), + value, + errorString: value !== "" ? "" : prev.errorString, + }) + }} + onBlur={ev => { + let value = ReactEvent.Focus.target(ev)["value"] + setLine2(prev => { + ...prev, + isValid: Some(value !== ""), + }) + }} + paymentType + type_="text" + name="line2" + inputRef=line2Ref + placeholder=localeString.line2Placeholder + /> + | AddressCity => + { + let value = ReactEvent.Form.target(ev)["value"] + setCity(prev => { + isValid: value !== "" ? Some(true) : Some(false), + value, + errorString: value !== "" ? "" : prev.errorString, + }) + }} + onBlur={ev => { + let value = ReactEvent.Focus.target(ev)["value"] + setCity(prev => { + ...prev, + isValid: Some(value !== ""), + }) + }} + paymentType + type_="text" + name="city" + inputRef=cityRef + placeholder=localeString.cityLabel /> - + switch stateJson { + | Some(options) => + Utils.getStateNames({ + value: country, + isValid: None, + errorString: "", + })} + /> + | None => React.null + } + | AddressPincode => + { + let value = ReactEvent.Focus.target(ev)["value"] + setPostalCode(prev => { + ...prev, + isValid: Some(value !== ""), + }) + }} + onChange=onPostalChange paymentType - rightIcon={CardUtils.setRightIconForCvc( - ~cardEmpty, - ~cardInvalid, - ~color=themeObj.colorIconCardCvcError, - ~cardComplete, - )} + name="postal" + inputRef=postalRef + placeholder=localeString.postalCodeLabel + /> + | BlikCode => + | Country => + -
- | Currency(currencyArr) => - - | FullName => - getCustomFieldName} - optionalRequiredFields={Some(requiredFields)} - /> - | Email - | InfoElement - | Country - | Bank - | None - | BillingName - | PhoneNumber - | AddressLine1 - | AddressLine2 - | AddressCity - | StateAndCity - | AddressPincode - | AddressState - | BlikCode - | SpecialField(_) - | CountryAndPincode(_) - | AddressCountry(_) => React.null - }} -
- }) - ->React.array} - -
- {React.string(localeString.billingDetailsText)} -
- {dynamicFieldsToRenderInsideBilling - ->Array.mapWithIndex((item, index) => { -
Int.toString}`} - className="flex flex-col w-full place-content-between"> - {switch item { - | BillingName => - | Email => - | PhoneNumber => - | StateAndCity => -
- { - let value = ReactEvent.Form.target(ev)["value"] - setCity(prev => { - isValid: value !== "" ? Some(true) : Some(false), - value, - errorString: value !== "" ? "" : prev.errorString, - }) - }} - onBlur={ev => { - let value = ReactEvent.Focus.target(ev)["value"] - setCity(prev => { - ...prev, - isValid: Some(value !== ""), - }) - }} - paymentType - type_="text" - name="city" - inputRef=cityRef - placeholder=localeString.cityLabel - /> - {switch stateJson { - | Some(options) => - Utils.getStateNames({ - value: country, - isValid: None, - errorString: "", - })} - /> - | None => React.null - }} -
- | CountryAndPincode(countryArr) => -
- - { - let value = ReactEvent.Focus.target(ev)["value"] - setPostalCode(prev => { - ...prev, - isValid: Some(value !== ""), - }) - }} - onChange=onPostalChange - paymentType - name="postal" - inputRef=postalRef - placeholder=localeString.postalCodeLabel - /> -
- | AddressLine1 => - { - let value = ReactEvent.Form.target(ev)["value"] - setLine1(prev => { - isValid: value !== "" ? Some(true) : Some(false), - value, - errorString: value !== "" ? "" : prev.errorString, - }) - }} - onBlur={ev => { - let value = ReactEvent.Focus.target(ev)["value"] - setLine1(prev => { - ...prev, - isValid: Some(value !== ""), - }) - }} - paymentType - type_="text" - name="line1" - inputRef=line1Ref - placeholder=localeString.line1Placeholder - /> - | AddressLine2 => - { - let value = ReactEvent.Form.target(ev)["value"] - setLine2(prev => { - isValid: value !== "" ? Some(true) : Some(false), - value, - errorString: value !== "" ? "" : prev.errorString, - }) - }} - onBlur={ev => { - let value = ReactEvent.Focus.target(ev)["value"] - setLine2(prev => { - ...prev, - isValid: Some(value !== ""), - }) - }} - paymentType - type_="text" - name="line2" - inputRef=line2Ref - placeholder=localeString.line2Placeholder - /> - | AddressCity => - { - let value = ReactEvent.Form.target(ev)["value"] - setCity(prev => { - isValid: value !== "" ? Some(true) : Some(false), - value, - errorString: value !== "" ? "" : prev.errorString, - }) - }} - onBlur={ev => { - let value = ReactEvent.Focus.target(ev)["value"] - setCity(prev => { - ...prev, - isValid: Some(value !== ""), - }) - }} - paymentType - type_="text" - name="city" - inputRef=cityRef - placeholder=localeString.cityLabel - /> - | AddressState => - switch stateJson { - | Some(options) => - Utils.getStateNames({ - value: country, - isValid: None, - errorString: "", - })} - /> - | None => React.null - } - | AddressPincode => - { - let value = ReactEvent.Focus.target(ev)["value"] - setPostalCode(prev => { - ...prev, - isValid: Some(value !== ""), - }) - }} - onChange=onPostalChange - paymentType - name="postal" - inputRef=postalRef - placeholder=localeString.postalCodeLabel - /> - | BlikCode => - | Country => - - | AddressCountry(countryArr) => - - | Bank => - - | SpecialField(element) => element - | InfoElement => - <> - - {if fieldsArr->Array.length > 1 { - bottomElement - } else { - - }} - - | CardNumber - | CardExpiryMonth - | CardExpiryYear - | CardExpiryMonthAndYear - | CardCvc - | CardExpiryAndCvc - | Currency(_) - | FullName - | None => React.null + | AddressCountry(countryArr) => + + | Bank => + + | SpecialField(element) => element + | InfoElement => + <> + + {if fieldsArr->Array.length > 1 { + bottomElement + } else { + }} -
- }) - ->React.array} + + | CardNumber + | CardExpiryMonth + | CardExpiryYear + | CardExpiryMonthAndYear + | CardCvc + | CardExpiryAndCvc + | Currency(_) + | FullName + | None => React.null + }}
-
- - - {<> - - {if fieldsArr->Array.length > 1 { - bottomElement - } else { - - }} - } - - - - - - : React.null - } + }) + ->React.array} +
+
+ + + {<> + + {if fieldsArr->Array.length > 1 { + bottomElement + } else { + + }} + } + + + + + } + } diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res index 143e0413..b77b5ddf 100644 --- a/src/Payments/PaymentMethodsRecord.res +++ b/src/Payments/PaymentMethodsRecord.res @@ -223,7 +223,7 @@ let paymentMethodsFields = [ paymentMethodName: "giropay", icon: Some(icon("giropay", ~size=19, ~width=25)), displayName: "GiroPay", - fields: [FullName, InfoElement], + fields: [InfoElement], miniIcon: None, }, { @@ -578,6 +578,7 @@ let dynamicFieldsEnabledPaymentMethods = [ "ideal", "sofort", "pix_transfer", + "giropay", ] let getIsBillingField = requiredFieldType => { diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res index 7ee67cc8..2c7d1710 100644 --- a/src/Payments/PaymentMethodsWrapper.res +++ b/src/Payments/PaymentMethodsWrapper.res @@ -115,7 +115,7 @@ let make = ( )) useSubmitPaymentData(submitCallback)