From bdc1336a62c1916fd87c46749dc017d6832f1c15 Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <1805317@kiit.ac.in> Date: Thu, 2 May 2024 18:09:02 +0530 Subject: [PATCH] feat: compressed theme layout (#320) Co-authored-by: Vrishab Srivatsa Co-authored-by: semantic-release-bot --- src/BrutalTheme.res | 9 ++++ src/CardTheme.res | 17 ++++++- src/CharcoalTheme.res | 11 +++++ src/Components/BillingNamePaymentInput.res | 3 +- src/Components/DropdownField.res | 9 +++- src/Components/DynamicFields.res | 56 +++++++++++++++++----- src/Components/PaymentDropDownField.res | 9 +++- src/Components/PaymentField.res | 9 +++- src/Components/PaymentInputField.res | 49 +++++++++++-------- src/DefaultTheme.res | 15 +++++- src/LocaleStrings/ArabicLocale.res | 1 + src/LocaleStrings/CatalanLocale.res | 1 + src/LocaleStrings/DeutschLocale.res | 1 + src/LocaleStrings/DutchLocale.res | 1 + src/LocaleStrings/EnglishGBLocale.res | 1 + src/LocaleStrings/EnglishLocale.res | 1 + src/LocaleStrings/FrenchBelgiumLocale.res | 1 + src/LocaleStrings/FrenchLocale.res | 1 + src/LocaleStrings/HebrewLocale.res | 1 + src/LocaleStrings/ItalianLocale.res | 1 + src/LocaleStrings/JapaneseLocale.res | 1 + src/LocaleStrings/LocaleStringTypes.res | 1 + src/LocaleStrings/PolishLocale.res | 1 + src/LocaleStrings/PortugueseLocale.res | 1 + src/LocaleStrings/RussianLocale.res | 1 + src/LocaleStrings/SpanishLocale.res | 1 + src/LocaleStrings/SwedishLocale.res | 1 + src/MidnightTheme.res | 12 +++++ src/PaymentElement.res | 12 ++--- src/Payments/CardPayment.res | 46 ++++++++++++++++-- src/Payments/KlarnaPayment.res | 5 +- src/Payments/SepaBankDebit.res | 6 ++- src/SoftTheme.res | 8 ++++ src/Types/CardThemeType.res | 3 ++ 34 files changed, 240 insertions(+), 56 deletions(-) diff --git a/src/BrutalTheme.res b/src/BrutalTheme.res index c0a8ee962..c8125a910 100644 --- a/src/BrutalTheme.res +++ b/src/BrutalTheme.res @@ -90,6 +90,11 @@ let brutalRules = (theme: CardThemeType.themeClass) => "color": theme.colorText, "borderRadius": theme.borderRadius, }, + ".Input-Compressed": { + "border": `0.1em solid #000000`, + "boxShadow": "0.12em 0.12em", + "color": theme.colorText, + }, ".Input:-webkit-autofill": { "transition": "background-color 5000s ease-in-out 0s", "-webkitTextFillColor": `${theme.colorText} !important`, @@ -98,6 +103,10 @@ let brutalRules = (theme: CardThemeType.themeClass) => "transform": "translate(0.05em, 0.05em)", "boxShadow": "0.02em 0.02em", }, + ".Input-Compressed:focus": { + "transform": "translate(0.02em, 0.02em)", + "boxShadow": "0.01em 0.01em", + }, ".Input--invalid": { "border": `0.1em solid ${theme.colorDangerText}`, "color": theme.colorDanger, diff --git a/src/CardTheme.res b/src/CardTheme.res index 1b1e3e0e1..a1f209ea1 100644 --- a/src/CardTheme.res +++ b/src/CardTheme.res @@ -20,6 +20,14 @@ let getTheme = (val, logger) => { } } } + +let getInnerLayout = str => { + switch str { + | "compressed" => Compressed + | _ => Spaced + } +} + let getShowLoader = (str, logger) => { switch str { | "auto" => Auto @@ -38,6 +46,7 @@ let defaultAppearance = { componentType: "payment", labels: Above, rules: Dict.make()->JSON.Encode.object, + innerLayout: Spaced, } let defaultFonts = { cssSrc: "", @@ -305,7 +314,12 @@ let getAppearance = ( ->Dict.get(str) ->Option.flatMap(JSON.Decode.object) ->Option.map(json => { - unknownKeysWarning(["theme", "variables", "rules", "labels"], json, "appearance", ~logger) + unknownKeysWarning( + ["theme", "variables", "rules", "labels", "innerLayout"], + json, + "appearance", + ~logger, + ) let rulesJson = defaultRules(getVariables("variables", json, default, logger)) @@ -314,6 +328,7 @@ let getAppearance = ( componentType: getWarningString(json, "componentType", "", ~logger), variables: getVariables("variables", json, default, logger), rules: mergeJsons(rulesJson, getJsonObjectFromDict(json, "rules")), + innerLayout: getWarningString(json, "innerLayout", "spaced", ~logger)->getInnerLayout, labels: switch getWarningString(json, "labels", "above", ~logger) { | "above" => Above | "floating" => Floating diff --git a/src/CharcoalTheme.res b/src/CharcoalTheme.res index 046db3d66..b64a74c31 100644 --- a/src/CharcoalTheme.res +++ b/src/CharcoalTheme.res @@ -89,6 +89,11 @@ let charcoalRules = theme => "color": theme.colorText, "borderRadius": theme.borderRadius, }, + ".Input-Compressed": { + "border": `1px solid ${theme.colorBackground}`, + "fontWeight": theme.fontWeightLight, + "color": theme.colorText, + }, ".Input:-webkit-autofill": { "transition": "background-color 5000s ease-in-out 0s", "-webkitTextFillColor": `${theme.colorText} !important`, @@ -97,6 +102,12 @@ let charcoalRules = theme => "border": `1px solid ${theme.colorPrimary}`, "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`, }, + ".Input-Compressed:focus": { + "border": `2px solid ${theme.colorPrimary}`, + "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 2px`, + "position": "relative", + "zIndex": "2", + }, ".Input--invalid": { "color": theme.colorDanger, "border": `2px solid ${theme.colorDanger}`, diff --git a/src/Components/BillingNamePaymentInput.res b/src/Components/BillingNamePaymentInput.res index d92abd5fc..cf2d55a5d 100644 --- a/src/Components/BillingNamePaymentInput.res +++ b/src/Components/BillingNamePaymentInput.res @@ -4,7 +4,7 @@ open Utils @react.component let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequiredFields=?) => { - let {localeString} = Recoil.useRecoilValueFromAtom(configAtom) + let {config, localeString} = Recoil.useRecoilValueFromAtom(configAtom) let {fields} = Recoil.useRecoilValueFromAtom(optionAtom) let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom) @@ -74,6 +74,7 @@ let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequ name="name" inputRef=nameRef placeholder + className={config.appearance.innerLayout === Spaced ? "" : "!border-b-0"} /> } diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res index 09a54d5a6..539063a3a 100644 --- a/src/Components/DropdownField.res +++ b/src/Components/DropdownField.res @@ -14,6 +14,7 @@ let make = ( let dropdownRef = React.useRef(Nullable.null) let (inputFocused, setInputFocused) = React.useState(_ => false) let {parentURL} = Recoil.useRecoilValueFromAtom(keys) + let isSpacedInnerLayout = config.appearance.innerLayout === Spaced let handleFocus = _ => { setInputFocused(_ => true) @@ -42,11 +43,15 @@ let make = ( } let floatinglabelClass = inputFocused ? "Label--floating" : "Label--resting" + let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed" let cursorClass = !disabled ? "cursor-pointer" : "cursor-not-allowed" Array.length > 0}>
- String.length > 0 && appearance.labels == Above}> + String.length > 0 && + appearance.labels == Above && + isSpacedInnerLayout}>
+ className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}> {options ->Array.mapWithIndex((item: string, i) => { diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res index b5b6a33b4..542af12a2 100644 --- a/src/Components/DynamicFields.res +++ b/src/Components/DynamicFields.res @@ -65,6 +65,7 @@ let make = ( }, (requiredFields, isAllStoredCardsHaveName, isSavedCardFlow)) let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom) + let isSpacedInnerLayout = config.appearance.innerLayout === Spaced let logger = Recoil.useRecoilValueFromAtom(loggerAtom) @@ -314,6 +315,9 @@ let make = ( dynamicFieldsToRenderInsideBilling->Array.length > 0 && (dynamicFieldsToRenderInsideBilling->Array.length > 1 || !isOnlyInfoElementPresent) + let spacedStylesForBiilingDetails = isSpacedInnerLayout ? "p-2" : "my-2" + let spacedStylesForCity = isSpacedInnerLayout ? "p-2" : "" + Array.length > 0}> {<> {dynamicFieldsToRenderOutsideBilling @@ -435,11 +439,22 @@ let make = ( options=currencyArr /> | FullName => - getCustomFieldName} - optionalRequiredFields={Some(requiredFields)} - /> + <> +
+ {item->getCustomFieldName->Option.getOr("")->React.string} +
+ getCustomFieldName} + optionalRequiredFields={Some(requiredFields)} + /> + | Email | InfoElement | Country @@ -463,15 +478,26 @@ let make = ( ->React.array}
- {React.string(localeString.billingDetailsText)} -
+
+ {React.string(localeString.billingDetailsText)} +
+
{dynamicFieldsToRenderInsideBilling ->Array.mapWithIndex((item, index) => {
| PhoneNumber => | StateAndCity => -
+
{switch stateJson { | Some(options) => @@ -524,7 +551,7 @@ let make = ( }}
| CountryAndPincode(countryArr) => -
+
| AddressLine1 => @@ -576,6 +605,7 @@ let make = ( name="line1" inputRef=line1Ref placeholder=localeString.line1Placeholder + className={isSpacedInnerLayout ? "" : "!border-b-0"} /> | AddressLine2 => false) let {parentURL} = Recoil.useRecoilValueFromAtom(keys) + let isSpacedInnerLayout = config.appearance.innerLayout === Spaced let getClassName = initialLabel => { if value.value->String.length == 0 { @@ -58,6 +59,7 @@ let make = ( let labelClass = getClassName("Label") let inputClass = getClassName("Input") + let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed" let handleChange = ev => { let target = ev->ReactEvent.Form.target @@ -74,7 +76,10 @@ let make = ( let cursorClass = !disabled ? "cursor-pointer" : "cursor-not-allowed" Array.length > 0}>
- String.length > 0 && config.appearance.labels == Above}> + String.length > 0 && + config.appearance.labels == Above && + isSpacedInnerLayout}>
+ className={`${inputClassStyles} ${inputClass} ${className} w-full appearance-none outline-none ${cursorClass}`}> {options ->Array.mapWithIndex((item: string, i) => { diff --git a/src/Components/PaymentField.res b/src/Components/PaymentField.res index c9bcb8b3d..cdd8d4e27 100644 --- a/src/Components/PaymentField.res +++ b/src/Components/PaymentField.res @@ -21,6 +21,7 @@ let make = ( let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom) let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom) let {parentURL} = Recoil.useRecoilValueFromAtom(keys) + let isSpacedInnerLayout = config.appearance.innerLayout === Spaced let (inputFocused, setInputFocused) = React.useState(_ => false) @@ -75,9 +76,13 @@ let make = ( } let labelClass = getClassName("Label") let inputClass = getClassName("Input") + let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed"
- String.length > 0 && config.appearance.labels == Above}> + String.length > 0 && + config.appearance.labels == Above && + isSpacedInnerLayout}>
{ - let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom) + let {themeObj, config} = Recoil.useRecoilValueFromAtom(configAtom) + let {innerLayout} = config.appearance let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom) let {parentURL} = Recoil.useRecoilValueFromAtom(keys) @@ -74,9 +75,13 @@ let make = ( } let labelClass = getClassName("Label") let inputClass = getClassName("Input") + let inputClassStyles = innerLayout === Spaced ? "Input" : "Input-Compressed"
- String.length > 0 && appearance.labels == Above}> + String.length > 0 && + appearance.labels == Above && + innerLayout === Spaced}>
-
{rightIcon}
+
{rightIcon}
- {switch errorString { - | Some(val) => - String.length > 0}> -
- {React.string(val)} -
- - | None => React.null - }} + + {switch errorString { + | Some(val) => + String.length > 0}> +
+ {React.string(val)} +
+ + | None => React.null + }} +
} diff --git a/src/DefaultTheme.res b/src/DefaultTheme.res index fcc9dd0e0..7927810de 100644 --- a/src/DefaultTheme.res +++ b/src/DefaultTheme.res @@ -96,6 +96,13 @@ let defaultRules = theme => "boxShadow": `0px 1px 1px rgb(0 0 0 / 3%), 0px 3px 6px rgb(0 0 0 / 2%)`, "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", }, + ".Input-Compressed": { + "border": `1px solid #e6e6e6`, + "color": theme.colorText, + "fontWeight": theme.fontWeightLight, + "boxShadow": `0px 1px 1px rgb(0 0 0 / 3%), 0px 3px 6px rgb(0 0 0 / 2%)`, + "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", + }, ".Input:-webkit-autofill": { "transition": "background-color 5000s ease-in-out 0s", "-webkitTextFillColor": `${theme.colorText} !important`, @@ -104,9 +111,15 @@ let defaultRules = theme => "border": `1px solid ${theme.colorPrimary}`, "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`, }, + ".Input-Compressed:focus": { + "border": `1px solid ${theme.colorPrimary}`, + "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 2px`, + "position": "relative", + "zIndex": "2", + }, ".Input--invalid": { "color": theme.colorDanger, - "border": `2px solid ${theme.colorDanger}`, + "border": `1px solid ${theme.colorDanger}`, "transition": "border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", }, ".Input::placeholder": { diff --git a/src/LocaleStrings/ArabicLocale.res b/src/LocaleStrings/ArabicLocale.res index e63cc984b..0c624bc66 100644 --- a/src/LocaleStrings/ArabicLocale.res +++ b/src/LocaleStrings/ArabicLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `استخدم طرق الدفع المحفوظة`, cardNickname: `الاسم علي الكارت`, nicknamePlaceholder: `اسم البطاقة (اختياري)`, + cardHeader: `معلومات البطاقة`, } diff --git a/src/LocaleStrings/CatalanLocale.res b/src/LocaleStrings/CatalanLocale.res index 2b2ed500e..511268989 100644 --- a/src/LocaleStrings/CatalanLocale.res +++ b/src/LocaleStrings/CatalanLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Utilitzeu formes de pagament desades`, nicknamePlaceholder: `Àlies de la targeta (opcional)`, selectPaymentMethodText: `Seleccioneu una forma de pagament i torneu-ho a provar`, + cardHeader: `Informació de la targeta`, } diff --git a/src/LocaleStrings/DeutschLocale.res b/src/LocaleStrings/DeutschLocale.res index e2735a4db..f5cc586ed 100644 --- a/src/LocaleStrings/DeutschLocale.res +++ b/src/LocaleStrings/DeutschLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Gespeicherte Zahlungsarten nutzen`, cardNickname: `Spitzname der Karte`, nicknamePlaceholder: `Kartenname (optional)`, + cardHeader: `Kartendaten`, } diff --git a/src/LocaleStrings/DutchLocale.res b/src/LocaleStrings/DutchLocale.res index 774f82a09..c977d2d46 100644 --- a/src/LocaleStrings/DutchLocale.res +++ b/src/LocaleStrings/DutchLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Gebruik opgeslagen betaalmethoden`, nicknamePlaceholder: `Bijnaam kaart (optioneel)`, selectPaymentMethodText: `Selecteer een betaalmethode en probeer het opnieuw`, + cardHeader: `Kaartinformatie`, } diff --git a/src/LocaleStrings/EnglishGBLocale.res b/src/LocaleStrings/EnglishGBLocale.res index e3f70a4cc..281bdba9d 100644 --- a/src/LocaleStrings/EnglishGBLocale.res +++ b/src/LocaleStrings/EnglishGBLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: "Use saved payment methods", cardNickname: "Card Nickname", nicknamePlaceholder: "Card Nickname (Optional)", + cardHeader: `Card information`, } diff --git a/src/LocaleStrings/EnglishLocale.res b/src/LocaleStrings/EnglishLocale.res index 05a1cda57..0e1a16d70 100644 --- a/src/LocaleStrings/EnglishLocale.res +++ b/src/LocaleStrings/EnglishLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: "Use saved payment methods", cardNickname: "Card Nickname", nicknamePlaceholder: "Card Nickname (Optional)", + cardHeader: `Card information`, } diff --git a/src/LocaleStrings/FrenchBelgiumLocale.res b/src/LocaleStrings/FrenchBelgiumLocale.res index 4051a95d4..c50a9c700 100644 --- a/src/LocaleStrings/FrenchBelgiumLocale.res +++ b/src/LocaleStrings/FrenchBelgiumLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Utiliser les modes de paiement enregistrés`, nicknamePlaceholder: `Surnom de la carte (facultatif)`, selectPaymentMethodText: `Veuillez sélectionner un mode de paiement et réessayer`, + cardHeader: `Informations de carte`, } diff --git a/src/LocaleStrings/FrenchLocale.res b/src/LocaleStrings/FrenchLocale.res index 289b028aa..1dc70825a 100644 --- a/src/LocaleStrings/FrenchLocale.res +++ b/src/LocaleStrings/FrenchLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Utiliser les modes de paiement enregistrés`, cardNickname: `Pseudonyme de la carte`, nicknamePlaceholder: `Surnom de la carte (facultatif)`, + cardHeader: `Informations de carte`, } diff --git a/src/LocaleStrings/HebrewLocale.res b/src/LocaleStrings/HebrewLocale.res index c8216e8f7..ef617cf7b 100644 --- a/src/LocaleStrings/HebrewLocale.res +++ b/src/LocaleStrings/HebrewLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `השתמש באמצעי תשלום שמורים`, cardNickname: `כינוי לכרטיס`, nicknamePlaceholder: `כינוי לכרטיס (אופציונלי)`, + cardHeader: `מידע כרטיס`, } diff --git a/src/LocaleStrings/ItalianLocale.res b/src/LocaleStrings/ItalianLocale.res index e15d3b905..9ab4f09a6 100644 --- a/src/LocaleStrings/ItalianLocale.res +++ b/src/LocaleStrings/ItalianLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Utilizza i metodi di pagamento salvati`, nicknamePlaceholder: `Soprannome della carta (facoltativo)`, selectPaymentMethodText: `Seleziona un metodo di pagamento e riprova`, + cardHeader: `Informazioni sulla carta`, } diff --git a/src/LocaleStrings/JapaneseLocale.res b/src/LocaleStrings/JapaneseLocale.res index 61b239dad..4bd4f756e 100644 --- a/src/LocaleStrings/JapaneseLocale.res +++ b/src/LocaleStrings/JapaneseLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `保存した支払い方法を使用する`, cardNickname: `カードのニックネーム`, nicknamePlaceholder: `カードニックネーム（任意）`, + cardHeader: `カード情報`, } diff --git a/src/LocaleStrings/LocaleStringTypes.res b/src/LocaleStrings/LocaleStringTypes.res index 884e95285..98dcfbc35 100644 --- a/src/LocaleStrings/LocaleStringTypes.res +++ b/src/LocaleStrings/LocaleStringTypes.res @@ -70,4 +70,5 @@ type localeStrings = { useExistingPaymentMethods: string, cardNickname: string, nicknamePlaceholder: string, + cardHeader: string, } diff --git a/src/LocaleStrings/PolishLocale.res b/src/LocaleStrings/PolishLocale.res index a8ebd77b5..b311101fd 100644 --- a/src/LocaleStrings/PolishLocale.res +++ b/src/LocaleStrings/PolishLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Skorzystaj z zapisanych metod płatności`, nicknamePlaceholder: `Pseudonim karty (opcjonalnie)`, selectPaymentMethodText: `Wybierz metodę płatności i spróbuj ponownie`, + cardHeader: `Informacje o karcie`, } diff --git a/src/LocaleStrings/PortugueseLocale.res b/src/LocaleStrings/PortugueseLocale.res index e1ba1d509..f9e23b7b5 100644 --- a/src/LocaleStrings/PortugueseLocale.res +++ b/src/LocaleStrings/PortugueseLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Use métodos de pagamento salvos`, nicknamePlaceholder: `Apelido do cartão (opcional)`, selectPaymentMethodText: `Selecione uma forma de pagamento e tente novamente`, + cardHeader: `Informações do cartão`, } diff --git a/src/LocaleStrings/RussianLocale.res b/src/LocaleStrings/RussianLocale.res index 3eba2661f..c420d9a65 100644 --- a/src/LocaleStrings/RussianLocale.res +++ b/src/LocaleStrings/RussianLocale.res @@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Используйте сохраненные способы оплаты`, nicknamePlaceholder: `Псевдоним карты (необязательно)`, selectPaymentMethodText: `Пожалуйста, выберите способ оплаты и повторите попытку.`, + cardHeader: `Информация о карте`, } diff --git a/src/LocaleStrings/SpanishLocale.res b/src/LocaleStrings/SpanishLocale.res index 2bbc883c5..d4d085950 100644 --- a/src/LocaleStrings/SpanishLocale.res +++ b/src/LocaleStrings/SpanishLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Utilice métodos de pago guardados`, nicknamePlaceholder: `Apodo de la tarjeta (opcional)`, selectPaymentMethodText: `Por favor seleccione un método de pago y vuelva a intentarlo`, + cardHeader: `Información de la tarjeta`, } diff --git a/src/LocaleStrings/SwedishLocale.res b/src/LocaleStrings/SwedishLocale.res index 6b3b3ca12..61610ed4f 100644 --- a/src/LocaleStrings/SwedishLocale.res +++ b/src/LocaleStrings/SwedishLocale.res @@ -79,4 +79,5 @@ let localeStrings: LocaleStringTypes.localeStrings = { useExistingPaymentMethods: `Använd sparade betalningsmetoder`, nicknamePlaceholder: `Kortets smeknamn (valfritt)`, selectPaymentMethodText: `Välj en betalningsmetod och försök igen`, + cardHeader: `Kortinformation`, } diff --git a/src/MidnightTheme.res b/src/MidnightTheme.res index 0a9a3cab5..662f15d41 100644 --- a/src/MidnightTheme.res +++ b/src/MidnightTheme.res @@ -104,6 +104,12 @@ let midnightRules = theme => "boxShadow": `0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)`, "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", }, + ".Input-Compressed": { + "border": `1px solid #424353`, + "color": "#ffffff", + "boxShadow": `0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)`, + "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", + }, ".Input:-webkit-autofill": { "transition": "background-color 5000s ease-in-out 0s", "-webkitTextFillColor": "#ffffff !important", @@ -112,6 +118,12 @@ let midnightRules = theme => "border": `1px solid ${theme.colorPrimary}`, "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`, }, + ".Input-Compressed:focus": { + "border": `1px solid ${theme.colorPrimary}`, + "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 2px`, + "position": "relative", + "zIndex": "2", + }, ".Input--invalid": { "color": theme.colorDanger, "border": `2px solid ${theme.colorDanger}`, diff --git a/src/PaymentElement.res b/src/PaymentElement.res index 28bdbc6c2..947695495 100644 --- a/src/PaymentElement.res +++ b/src/PaymentElement.res @@ -418,12 +418,6 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod {React.string(localeString.useExistingPaymentMethods)}
- -
- -
- - {switch methodslist { | LoadError(_) => React.null | _ => @@ -431,5 +425,11 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod }} + +
+ +
+ + } diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res index 14aee6d5b..5fb573243 100644 --- a/src/Payments/CardPayment.res +++ b/src/Payments/CardPayment.res @@ -16,6 +16,7 @@ let make = ( open UtilityHooks let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) + let {innerLayout} = config.appearance let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom) let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom) @@ -188,12 +189,26 @@ let make = ( let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5" + let compressedLayoutStyleForCvcError = + innerLayout === Compressed && cvcError->String.length > 0 ? "!border-l-0" : "" +
+ +
+ {React.string(localeString.cardHeader)} +
+ String.length > 0 + ? "border-b-0" + : ""} />
-
+
-
+
+ String.length > 0 || + cvcError->String.length > 0 || + expiryError->String.length > 0}> +
+ {React.string("Invalid input")} +
+ {
+ style={ReactDOMStyle.make( + ~gridGap=config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : "", + (), + )}> diff --git a/src/Payments/SepaBankDebit.res b/src/Payments/SepaBankDebit.res index 10e2f9ca3..0428df145 100644 --- a/src/Payments/SepaBankDebit.res +++ b/src/Payments/SepaBankDebit.res @@ -6,6 +6,7 @@ open PaymentModeType @react.component let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => { let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom) + let {config} = Recoil.useRecoilValueFromAtom(configAtom) let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankDebits) let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom) @@ -77,7 +78,10 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
+ style={ReactDOMStyle.make( + ~gridGap={config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : ""}, + (), + )}> diff --git a/src/SoftTheme.res b/src/SoftTheme.res index 8ddde7962..7eb04f984 100644 --- a/src/SoftTheme.res +++ b/src/SoftTheme.res @@ -85,6 +85,11 @@ let softRules = theme => "boxShadow": `inset 4px 4px 5px #353637, inset -4px -3px 7px #434445`, "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", }, + ".Input-Compressed": { + "color": theme.colorText, + "boxShadow": `inset 4px 4px 5px #353637, inset -4px -3px 7px #434445`, + "transition": "background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease", + }, ".Input:-webkit-autofill": { "transition": "background-color 5000s ease-in-out 0s", "-webkitTextFillColor": `${theme.colorText} !important`, @@ -92,6 +97,9 @@ let softRules = theme => ".Input:focus": { "boxShadow": `inset 8px 7px 7px #353637, inset -8px -6px 7px #434445`, }, + ".Input-Compressed:focus": { + "boxShadow": `inset 8px 7px 7px #353637, inset -8px -6px 7px #434445`, + }, ".Input--invalid": { "color": theme.colorDanger, }, diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res index 3290cfde1..fc815e3d7 100644 --- a/src/Types/CardThemeType.res +++ b/src/Types/CardThemeType.res @@ -1,5 +1,7 @@ type theme = Default | Brutal | Midnight | Soft | Charcoal | NONE +type innerLayout = Spaced | Compressed + @val external navigator: 'a = "navigator" type showLoader = Auto | Always | Never @@ -70,6 +72,7 @@ type appearance = { variables: themeClass, rules: JSON.t, labels: label, + innerLayout: innerLayout, } type fonts = { cssSrc: string,