Merge branch 'main' of github.com:juspay/hyperswitch-web into locally…

…-connect-documentation

CHANGELOG.md

@@ -1,3 +1,108 @@
+# [0.50.0](https://github.com/juspay/hyperswitch-web/compare/v0.49.2...v0.50.0) (2024-05-06)
+
+
+### Features
+
+* hideExpiredPaymentMethods prop added ([#350](https://github.com/juspay/hyperswitch-web/issues/350)) ([f2a8c42](https://github.com/juspay/hyperswitch-web/commit/f2a8c4295953e8743ad9d5f2c4d7df9c3eba6a96))
+
+## [0.49.2](https://github.com/juspay/hyperswitch-web/compare/v0.49.1...v0.49.2) (2024-05-06)
+
+## [0.49.1](https://github.com/juspay/hyperswitch-web/compare/v0.49.0...v0.49.1) (2024-05-03)
+
+
+### Bug Fixes
+
+* card holder name showing twice ([#349](https://github.com/juspay/hyperswitch-web/issues/349)) ([f72fb5a](https://github.com/juspay/hyperswitch-web/commit/f72fb5a4518e98205479801f74ec5cb2a5bca0fd))
+
+# [0.49.0](https://github.com/juspay/hyperswitch-web/compare/v0.48.2...v0.49.0) (2024-05-03)
+
+
+### Features
+
+* **\:** identifying in-app browsers from user agents ([#317](https://github.com/juspay/hyperswitch-web/issues/317)) ([0218221](https://github.com/juspay/hyperswitch-web/commit/02182211a40413fd2f764a7ff9efa9d1493e402a))
+
+## [0.48.2](https://github.com/juspay/hyperswitch-web/compare/v0.48.1...v0.48.2) (2024-05-03)
+
+
+### Bug Fixes
+
+* remove expired saved cards ([#345](https://github.com/juspay/hyperswitch-web/issues/345)) ([97b66c7](https://github.com/juspay/hyperswitch-web/commit/97b66c74584853010b12443febebb53bb8876ac4))
+
+## [0.48.1](https://github.com/juspay/hyperswitch-web/compare/v0.48.0...v0.48.1) (2024-05-03)
+
+
+### Bug Fixes
+
+* **states:** removed few states from the US list ([#348](https://github.com/juspay/hyperswitch-web/issues/348)) ([46ac3c4](https://github.com/juspay/hyperswitch-web/commit/46ac3c416ec0d5aa1288e8ecd87c8409c8cba0c8))
+
+# [0.48.0](https://github.com/juspay/hyperswitch-web/compare/v0.47.1...v0.48.0) (2024-05-02)
+
+
+### Features
+
+* compressed theme layout ([#320](https://github.com/juspay/hyperswitch-web/issues/320)) ([bdc1336](https://github.com/juspay/hyperswitch-web/commit/bdc1336a62c1916fd87c46749dc017d6832f1c15))
+
+## [0.47.1](https://github.com/juspay/hyperswitch-web/compare/v0.47.0...v0.47.1) (2024-05-02)
+
+
+### Bug Fixes
+
+* **paymentutils:** fixed Maximum Depth Exceeded ([#343](https://github.com/juspay/hyperswitch-web/issues/343)) ([f8443c3](https://github.com/juspay/hyperswitch-web/commit/f8443c3a37874b33de6ec1ee83362aef99dc113c))
+
+# [0.47.0](https://github.com/juspay/hyperswitch-web/compare/v0.46.5...v0.47.0) (2024-04-30)
+
+
+### Bug Fixes
+
+* third party confirm url ([#342](https://github.com/juspay/hyperswitch-web/issues/342)) ([4ba7599](https://github.com/juspay/hyperswitch-web/commit/4ba7599c90dac4c990950eda9bcff49b9ef59e02))
+
+
+### Features
+
+* added one click widgets (applepay, googlepay, paypal) ([#271](https://github.com/juspay/hyperswitch-web/issues/271)) ([509829a](https://github.com/juspay/hyperswitch-web/commit/509829a0c24e10008eef22ede8f4462dfd9eca2d))
+
+## [0.46.6](https://github.com/juspay/hyperswitch-web/compare/v0.46.5...v0.46.6) (2024-04-30)
+
+
+### Bug Fixes
+
+* third party confirm url ([#342](https://github.com/juspay/hyperswitch-web/issues/342)) ([4ba7599](https://github.com/juspay/hyperswitch-web/commit/4ba7599c90dac4c990950eda9bcff49b9ef59e02))
+
+## [0.46.5](https://github.com/juspay/hyperswitch-web/compare/v0.46.4...v0.46.5) (2024-04-30)
+
+
+### Bug Fixes
+
+* cdn confirm endpoint ([#341](https://github.com/juspay/hyperswitch-web/issues/341)) ([664fd07](https://github.com/juspay/hyperswitch-web/commit/664fd07e227f49598f8ba83d1894abce0648dec6))
+
+## [0.46.4](https://github.com/juspay/hyperswitch-web/compare/v0.46.3...v0.46.4) (2024-04-30)
+
+
+### Bug Fixes
+
+* cdn confirm endpoint ([#340](https://github.com/juspay/hyperswitch-web/issues/340)) ([6750ad0](https://github.com/juspay/hyperswitch-web/commit/6750ad014677a173de2c9874a9771f9bdf149557))
+
+## [0.46.3](https://github.com/juspay/hyperswitch-web/compare/v0.46.2...v0.46.3) (2024-04-30)
+
+
+### Bug Fixes
+
+* cdn backend endpoint ([#339](https://github.com/juspay/hyperswitch-web/issues/339)) ([5aa7459](https://github.com/juspay/hyperswitch-web/commit/5aa74596c123a909f646ed767a694f741e1a2d4f))
+
+## [0.46.2](https://github.com/juspay/hyperswitch-web/compare/v0.46.1...v0.46.2) (2024-04-30)
+
+
+### Bug Fixes
+
+* **webpack:** reverting back the CDN changes ([a524987](https://github.com/juspay/hyperswitch-web/commit/a524987f488fd57d775c671cec6dcf59f9db797c))
+
+## [0.46.1](https://github.com/juspay/hyperswitch-web/compare/v0.46.0...v0.46.1) (2024-04-29)
+
+
+### Bug Fixes
+
+* move applepay thirdparty event listeners outside ([#336](https://github.com/juspay/hyperswitch-web/issues/336)) ([c08ec25](https://github.com/juspay/hyperswitch-web/commit/c08ec25e1211e3efdbe7af5c6db44d6a0b7cc03b))
+
 # [0.46.0](https://github.com/juspay/hyperswitch-web/compare/v0.45.1...v0.46.0) (2024-04-26)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.46.0",
+  "version": "0.50.0",
   "main": "index.js",
   "private": true,
   "dependencies": {

src/App.res

@@ -1,13 +1,14 @@
 @react.component
 let make = () => {
-  let (logger, initTimestamp) = React.useMemo0(() => {
-    (OrcaLogger.make(), Date.now())
-  })
   let url = RescriptReactRouter.useUrl()
   let (integrateError, setIntegrateErrorError) = React.useState(() => false)
   let setLoggerState = Recoil.useSetRecoilState(RecoilAtoms.loggerAtom)
 
   let paymentMode = CardUtils.getQueryParamsDictforKey(url.search, "componentName")
+  let paymentType = paymentMode->CardThemeType.getPaymentMode
+  let (logger, initTimestamp) = React.useMemo0(() => {
+    (OrcaLogger.make(~source=Elements(paymentType), ()), Date.now())
+  })
   let fullscreenMode = CardUtils.getQueryParamsDictforKey(url.search, "fullscreenType")
 
   React.useEffect(() => {

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,

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
@@ -32,23 +40,13 @@ let getShowLoader = (str, logger) => {
   }
 }
 
-let getPaymentMode = val => {
-  switch val {
-  | "card" => Card
-  | "payment" => Payment
-  | "cardNumber" => CardNumberElement
-  | "cardExpiry" => CardExpiryElement
-  | "cardCvc" => CardCVCElement
-  | _ => NONE
-  }
-}
-
 let defaultAppearance = {
   theme: Default,
   variables: DefaultTheme.default,
   componentType: "payment",
   labels: Above,
   rules: Dict.make()->JSON.Encode.object,
+  innerLayout: Spaced,
 }
 let defaultFonts = {
   cssSrc: "",
@@ -316,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))
 
@@ -325,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

src/CardUtils.res

@@ -338,6 +338,10 @@ let getCardBrandIcon = (cardType, paymentType) => {
     | CardNumberElement
     | CardExpiryElement
     | CardCVCElement
+    | GooglePayElement
+    | PayPalElement
+    | ApplePayElement
+    | PaymentRequestButtonsElement
     | NONE =>
       <Icon size=brandIconSize name="default-card" />
     }

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}`,

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"}
     />
   </RenderIf>
 }

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"
   <RenderIf condition={options->Array.length > 0}>
     <div className="flex flex-col w-full">
-      <RenderIf condition={fieldName->String.length > 0 && appearance.labels == Above}>
+      <RenderIf
+        condition={fieldName->String.length > 0 &&
+        appearance.labels == Above &&
+        isSpacedInnerLayout}>
         <div
           className={`Label `}
           style={ReactDOMStyle.make(
@@ -74,7 +79,7 @@ let make = (
           disabled={readOnly || disabled}
           onChange=handleChange
           onFocus=handleFocus
-          className={`Input ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
           {options
           ->Array.mapWithIndex((item: string, i) => {
             <option key={Int.toString(i)} value=item> {React.string(item)} </option>