From 65e99e27b06435e8c44bfef80f1fd908188a5246 Mon Sep 17 00:00:00 2001 From: abaeza-wp <153538325+abaeza-wp@users.noreply.github.com> Date: Mon, 15 Jan 2024 08:20:58 +0000 Subject: [PATCH] US1762588 - [iOS] React Native Demo Components Refactor and Props (#86) * Us1762585 - iOS Refactor Native components (#81) * US1762570: create view manager to native AccessCheckoutEditText component; override onTextChange to support the react native onChangeText event; implement component in react native * US1762550: update card details field to use new component; update RN module to use reference to AccessCheckoutEditText and not the text value * US1762550: move AccessCheckoutEditTextManager to correct file path; update local android sdk files to most up-to-date version of master; update AccessCheckoutReactPackageTest * US1782181: add unit tests for AccessCheckoutEditTextManagerTest; add mockito to build.gradle for unit tests * US1762551: Expose AccessCheckoutUITextField to be able to use native components via the ios Bridge Simplify ReactNativeViewLocator and implement/expose specific POC methods to avoid disruptions with previous implementation Add POC toggle to demo app to be able to switch implementations Expose new POC validation and sessionGeneration methods to avoid diruptions with previous implementations * US1762551: Point client to npe environment * US1762585: Refactor ios Bridge and demo application Avoids having to handle inputs in states Uses native components Only a input field id is needed in order to configure validation and session generation for a field Integrate the latest AccessCheckoutUITextField changes Updates and renames cvcValue to cvcId Updates and renames panValue to panId Updates and renames expiryDateValue to expiryDateId * US1762585: Rebuild lib and clean up files * US1762585: Minor cleanup * US1762585: Rebuild lib files Rename AccessCheckoutEditText to AccessCheckoutInputText as EditText was specific to Android Minor renaming of fields like panUITextField to panACUITextField to improve readability and make it known that we are dealing with AccessCheckoutUITextField in the iOS bridge * US1762585: Rename AccessCheckoutEditText to AccessCheckoutInputText in Android bridge * US1762585: Rename AccessCheckoutInputText to AccessCheckoutTextInput Rebuild lib files * US1762585: Update bitrise-step to use xcode-test v5 and update e2e tests (#82) * US1762585: Update bitrise-step to use xcode-test v5 * US1762585: Use Optionals to mantain compatibility in both Xcode 13 and Xcode 15 * US1762585: Update e2e tests * US1762585: Improve matcher based on platform using type * US1762585: Remove TextInputPO as it is no longer used --------- Co-authored-by: e5661323 * US1762588: Clean and Refactor CVC Expiry and Pan React Native Demo components Define Props and types to ReactNative component and Native component props * US1762588: Use paddingHorizontal in demo components * US1762588: Add Android AccessCheckoutEditText defaults when initialising the component * US1762588: Add Support for fonts via styling, minor refactorings * US1762588: Remove Comment and support for keyboartType in iOS Bridge * US1762588: Revert pod local version * US1762588: rebuild pod files to point to remote AccessCheckoutSDK * US1762588: rebuild pod files to point to remote AccessCheckoutSDK * US1762588: Remove support for fontStyle and fontWeight * US1762588: Add correct colours to text when input is not editable, remove inverted expression * US1762588: Fixx import after rebase * US1762588: Clean imports * US1762588: Remove unnecessary comments * US1762588: Rename fontColor to color, and remap in iOS Bridge Reset defaults provided by AccessCheckoutUITextfield Reset insets using horizontalPadding in AccessCheckoutUITextfield * US1762588: point to correct tag instad of branch * US1762588: Update pod deps * US1762588: change BitRise flow for iOS Bridge and iOS e2e tests to update and install Pods rather than just install --------- Co-authored-by: e5661323 Co-authored-by: Olivier Chalet --- .../ui/AccessCheckoutTextInputManager.kt | 15 ++- .../project.pbxproj | 104 +++++++++--------- .../AccessCheckoutTextInputManager.m | 12 +- .../AccessCheckoutTextInputManager.swift | 11 +- .../ios/bitrise.yml | 1 + .../src/ui/AccessCheckoutTextInput.tsx | 78 ++++++++++--- demo-app/bitrise.yml | 2 + .../project.pbxproj | 64 +++++------ demo-app/ios/Podfile | 1 - demo-app/ios/Podfile.lock | 2 +- demo-app/src/card-flow/CardFlow.tsx | 7 +- demo-app/src/common/CvcField.tsx | 25 ++--- demo-app/src/common/ExpiryDateField.tsx | 36 +++--- demo-app/src/common/PanField.tsx | 23 ++-- demo-app/src/cvc-flow/CvcFlow.tsx | 7 +- 15 files changed, 228 insertions(+), 160 deletions(-) diff --git a/access-checkout-react-native-sdk/android/access-checkout-react-native-sdk-android-bridge/src/main/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManager.kt b/access-checkout-react-native-sdk/android/access-checkout-react-native-sdk-android-bridge/src/main/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManager.kt index 212bc5b..6b54980 100644 --- a/access-checkout-react-native-sdk/android/access-checkout-react-native-sdk-android-bridge/src/main/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManager.kt +++ b/access-checkout-react-native-sdk/android/access-checkout-react-native-sdk-android-bridge/src/main/java/com/worldpay/access/checkout/reactnative/ui/AccessCheckoutTextInputManager.kt @@ -1,5 +1,6 @@ package com.worldpay.access.checkout.reactnative.ui +import android.view.Gravity import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.uimanager.SimpleViewManager import com.facebook.react.uimanager.ThemedReactContext @@ -7,6 +8,7 @@ import com.facebook.react.uimanager.ViewProps import com.facebook.react.uimanager.annotations.ReactProp import com.worldpay.access.checkout.ui.AccessCheckoutEditText + class AccessCheckoutTextInputManager(private val callerContext: ReactApplicationContext) : SimpleViewManager() { @@ -16,7 +18,18 @@ class AccessCheckoutTextInputManager(private val callerContext: ReactApplication const val REACT_CLASS = "AccessCheckoutTextInput" } - override fun createViewInstance(context: ThemedReactContext) = AccessCheckoutEditText(context) + override fun createViewInstance(context: ThemedReactContext): AccessCheckoutEditText { + val accessCheckoutEditText = AccessCheckoutEditText(context) + + // In order to replicate React Native behaviours in both ios and android we need reset + // the default paddings gravity and background added by Android + accessCheckoutEditText.background = null + accessCheckoutEditText.textSize = 14f + accessCheckoutEditText.setPadding(0,0,0,0); + accessCheckoutEditText.gravity = Gravity.CENTER; + + return accessCheckoutEditText; + } /** * Properties diff --git a/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative.xcodeproj/project.pbxproj b/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative.xcodeproj/project.pbxproj index d75c58d..16f52ce 100644 --- a/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative.xcodeproj/project.pbxproj +++ b/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative.xcodeproj/project.pbxproj @@ -7,6 +7,8 @@ objects = { /* Begin PBXBuildFile section */ + 1CC8928EBC7BA5C6989817C6 /* Pods_AccessCheckoutReactNativeUnitTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 973FA82098C3170A2141C869 /* Pods_AccessCheckoutReactNativeUnitTests.framework */; }; + 3C0D48D587E87DACB3E53576 /* Pods_AccessCheckoutReactNative.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9EA125B27E2E84EB311DAA1B /* Pods_AccessCheckoutReactNative.framework */; }; 46D3A9632B3447AE0056016D /* SessionGenerationTestUIViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46D3A9622B3447AE0056016D /* SessionGenerationTestUIViewController.swift */; }; 46D3A9652B34494B0056016D /* SessionGenerationTest.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 46D3A9642B34494B0056016D /* SessionGenerationTest.storyboard */; }; 46D3A9682B3461030056016D /* AccessCheckoutReactNativeTestImplementation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46D3A9672B3461030056016D /* AccessCheckoutReactNativeTestImplementation.swift */; }; @@ -47,8 +49,6 @@ 51D03E9C27A8611D009781EB /* CardValidationTest.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 51D03E9B27A8611D009781EB /* CardValidationTest.storyboard */; }; 51D03EBC27A8658B009781EB /* CardValidationTestUIViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 51D03EBB27A8658B009781EB /* CardValidationTestUIViewController.swift */; }; 64ADC9392816E1510045BA58 /* AccessCheckoutReactNativeSessionAcceptanceTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64ADC9382816E1510045BA58 /* AccessCheckoutReactNativeSessionAcceptanceTests.swift */; }; - A9ED72A5E9195DD948506388 /* Pods_AccessCheckoutReactNativeUnitTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 0FA73C387ECF40CBA927EFB1 /* Pods_AccessCheckoutReactNativeUnitTests.framework */; }; - F9072E98B9F57D1BF6246204 /* Pods_AccessCheckoutReactNative.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 2E69F34F7070C19C89742890 /* Pods_AccessCheckoutReactNative.framework */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -69,10 +69,7 @@ /* End PBXContainerItemProxy section */ /* Begin PBXFileReference section */ - 00ABDCBCE0FE39A5A7B91754 /* Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig"; sourceTree = ""; }; - 0FA73C387ECF40CBA927EFB1 /* Pods_AccessCheckoutReactNativeUnitTests.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_AccessCheckoutReactNativeUnitTests.framework; sourceTree = BUILT_PRODUCTS_DIR; }; - 297BA316EEA9A3E0CC6C6C63 /* Pods-AccessCheckoutReactNative.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNative.release.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNative/Pods-AccessCheckoutReactNative.release.xcconfig"; sourceTree = ""; }; - 2E69F34F7070C19C89742890 /* Pods_AccessCheckoutReactNative.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_AccessCheckoutReactNative.framework; sourceTree = BUILT_PRODUCTS_DIR; }; + 15BE4712608F8E988DB45B98 /* Pods-AccessCheckoutReactNative.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNative.debug.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNative/Pods-AccessCheckoutReactNative.debug.xcconfig"; sourceTree = ""; }; 46D3A9622B3447AE0056016D /* SessionGenerationTestUIViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SessionGenerationTestUIViewController.swift; sourceTree = ""; }; 46D3A9642B34494B0056016D /* SessionGenerationTest.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = SessionGenerationTest.storyboard; sourceTree = ""; }; 46D3A9672B3461030056016D /* AccessCheckoutReactNativeTestImplementation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccessCheckoutReactNativeTestImplementation.swift; sourceTree = ""; }; @@ -117,9 +114,12 @@ 51D03E8027A8601B009781EB /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 51D03E9B27A8611D009781EB /* CardValidationTest.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = CardValidationTest.storyboard; sourceTree = ""; }; 51D03EBB27A8658B009781EB /* CardValidationTestUIViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardValidationTestUIViewController.swift; sourceTree = ""; }; + 60352FB6B516E97491CD890B /* Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig"; sourceTree = ""; }; 64ADC9382816E1510045BA58 /* AccessCheckoutReactNativeSessionAcceptanceTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AccessCheckoutReactNativeSessionAcceptanceTests.swift; sourceTree = ""; }; - A801B54B720EBD674E60E506 /* Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig"; sourceTree = ""; }; - DA445251C9260C65BDB821A4 /* Pods-AccessCheckoutReactNative.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNative.debug.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNative/Pods-AccessCheckoutReactNative.debug.xcconfig"; sourceTree = ""; }; + 973FA82098C3170A2141C869 /* Pods_AccessCheckoutReactNativeUnitTests.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_AccessCheckoutReactNativeUnitTests.framework; sourceTree = BUILT_PRODUCTS_DIR; }; + 9EA125B27E2E84EB311DAA1B /* Pods_AccessCheckoutReactNative.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_AccessCheckoutReactNative.framework; sourceTree = BUILT_PRODUCTS_DIR; }; + A52DA71C26BDE615849C74B7 /* Pods-AccessCheckoutReactNative.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNative.release.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNative/Pods-AccessCheckoutReactNative.release.xcconfig"; sourceTree = ""; }; + E43A9F2DDFBFE934BFCDB703 /* Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig"; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -127,7 +127,7 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( - F9072E98B9F57D1BF6246204 /* Pods_AccessCheckoutReactNative.framework in Frameworks */, + 3C0D48D587E87DACB3E53576 /* Pods_AccessCheckoutReactNative.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -136,7 +136,7 @@ buildActionMask = 2147483647; files = ( 516A9F612757D3B800E9B00E /* AccessCheckoutReactNative.framework in Frameworks */, - A9ED72A5E9195DD948506388 /* Pods_AccessCheckoutReactNativeUnitTests.framework in Frameworks */, + 1CC8928EBC7BA5C6989817C6 /* Pods_AccessCheckoutReactNativeUnitTests.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -150,13 +150,22 @@ /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ + 02AADC24B98CA8C53FB1C1E4 /* Frameworks */ = { + isa = PBXGroup; + children = ( + 9EA125B27E2E84EB311DAA1B /* Pods_AccessCheckoutReactNative.framework */, + 973FA82098C3170A2141C869 /* Pods_AccessCheckoutReactNativeUnitTests.framework */, + ); + name = Frameworks; + sourceTree = ""; + }; 0B03ABF5587A3A533DCAD4DF /* Pods */ = { isa = PBXGroup; children = ( - DA445251C9260C65BDB821A4 /* Pods-AccessCheckoutReactNative.debug.xcconfig */, - 297BA316EEA9A3E0CC6C6C63 /* Pods-AccessCheckoutReactNative.release.xcconfig */, - A801B54B720EBD674E60E506 /* Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig */, - 00ABDCBCE0FE39A5A7B91754 /* Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig */, + 15BE4712608F8E988DB45B98 /* Pods-AccessCheckoutReactNative.debug.xcconfig */, + A52DA71C26BDE615849C74B7 /* Pods-AccessCheckoutReactNative.release.xcconfig */, + E43A9F2DDFBFE934BFCDB703 /* Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig */, + 60352FB6B516E97491CD890B /* Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig */, ); path = Pods; sourceTree = ""; @@ -178,7 +187,7 @@ 51D03E6727A85FBA009781EB /* AccessCheckoutReactNativeUnitTestsApp */, 516A9F582757D3B800E9B00E /* Products */, 0B03ABF5587A3A533DCAD4DF /* Pods */, - D328A7054FE44725EB747E9F /* Frameworks */, + 02AADC24B98CA8C53FB1C1E4 /* Frameworks */, ); sourceTree = ""; }; @@ -294,15 +303,6 @@ path = AccessCheckoutReactNativeUnitTestsApp; sourceTree = ""; }; - D328A7054FE44725EB747E9F /* Frameworks */ = { - isa = PBXGroup; - children = ( - 2E69F34F7070C19C89742890 /* Pods_AccessCheckoutReactNative.framework */, - 0FA73C387ECF40CBA927EFB1 /* Pods_AccessCheckoutReactNativeUnitTests.framework */, - ); - name = Frameworks; - sourceTree = ""; - }; /* End PBXGroup section */ /* Begin PBXHeadersBuildPhase section */ @@ -321,12 +321,12 @@ isa = PBXNativeTarget; buildConfigurationList = 516A9F6B2757D3B800E9B00E /* Build configuration list for PBXNativeTarget "AccessCheckoutReactNative" */; buildPhases = ( - 035376D4EE81B163044EF1D3 /* [CP] Check Pods Manifest.lock */, + 66EB6E8DF9509768BE5ABD93 /* [CP] Check Pods Manifest.lock */, 516A9F522757D3B800E9B00E /* Headers */, 516A9F532757D3B800E9B00E /* Sources */, 516A9F542757D3B800E9B00E /* Frameworks */, 516A9F552757D3B800E9B00E /* Resources */, - 74ED40430D411C1CB57F1461 /* [CP] Copy Pods Resources */, + CD3F96AD3EA7B44F1C952171 /* [CP] Copy Pods Resources */, ); buildRules = ( ); @@ -341,12 +341,12 @@ isa = PBXNativeTarget; buildConfigurationList = 516A9F6E2757D3B800E9B00E /* Build configuration list for PBXNativeTarget "AccessCheckoutReactNativeUnitTests" */; buildPhases = ( - 4A337EC7BA38160744E362E2 /* [CP] Check Pods Manifest.lock */, + 6BDB455C4DEEB4CDDADAB492 /* [CP] Check Pods Manifest.lock */, 516A9F5C2757D3B800E9B00E /* Sources */, 516A9F5D2757D3B800E9B00E /* Frameworks */, 516A9F5E2757D3B800E9B00E /* Resources */, - 5B38B89F26ADB90120C112C7 /* [CP] Embed Pods Frameworks */, - A49419855F7224F2AE1BCB61 /* [CP] Copy Pods Resources */, + 43638F515446F3561A5CEF56 /* [CP] Embed Pods Frameworks */, + EDBFAF282AC052247DFD40E0 /* [CP] Copy Pods Resources */, ); buildRules = ( ); @@ -451,29 +451,24 @@ /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ - 035376D4EE81B163044EF1D3 /* [CP] Check Pods Manifest.lock */ = { + 43638F515446F3561A5CEF56 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( + "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); - inputPaths = ( - "${PODS_PODFILE_DIR_PATH}/Podfile.lock", - "${PODS_ROOT}/Manifest.lock", - ); - name = "[CP] Check Pods Manifest.lock"; + name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( - ); - outputPaths = ( - "$(DERIVED_FILE_DIR)/Pods-AccessCheckoutReactNative-checkManifestLockResult.txt", + "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; - 4A337EC7BA38160744E362E2 /* [CP] Check Pods Manifest.lock */ = { + 66EB6E8DF9509768BE5ABD93 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( @@ -488,31 +483,36 @@ outputFileListPaths = ( ); outputPaths = ( - "$(DERIVED_FILE_DIR)/Pods-AccessCheckoutReactNativeUnitTests-checkManifestLockResult.txt", + "$(DERIVED_FILE_DIR)/Pods-AccessCheckoutReactNative-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; - 5B38B89F26ADB90120C112C7 /* [CP] Embed Pods Frameworks */ = { + 6BDB455C4DEEB4CDDADAB492 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); - name = "[CP] Embed Pods Frameworks"; + inputPaths = ( + "${PODS_PODFILE_DIR_PATH}/Podfile.lock", + "${PODS_ROOT}/Manifest.lock", + ); + name = "[CP] Check Pods Manifest.lock"; outputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", + ); + outputPaths = ( + "$(DERIVED_FILE_DIR)/Pods-AccessCheckoutReactNativeUnitTests-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeUnitTests/Pods-AccessCheckoutReactNativeUnitTests-frameworks.sh\"\n"; + shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; - 74ED40430D411C1CB57F1461 /* [CP] Copy Pods Resources */ = { + CD3F96AD3EA7B44F1C952171 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( @@ -529,7 +529,7 @@ shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNative/Pods-AccessCheckoutReactNative-resources.sh\"\n"; showEnvVarsInLog = 0; }; - A49419855F7224F2AE1BCB61 /* [CP] Copy Pods Resources */ = { + EDBFAF282AC052247DFD40E0 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( @@ -779,7 +779,7 @@ }; 516A9F6C2757D3B800E9B00E /* Debug */ = { isa = XCBuildConfiguration; - baseConfigurationReference = DA445251C9260C65BDB821A4 /* Pods-AccessCheckoutReactNative.debug.xcconfig */; + baseConfigurationReference = 15BE4712608F8E988DB45B98 /* Pods-AccessCheckoutReactNative.debug.xcconfig */; buildSettings = { CLANG_ENABLE_MODULES = YES; CODE_SIGN_STYLE = Automatic; @@ -807,7 +807,7 @@ }; 516A9F6D2757D3B800E9B00E /* Release */ = { isa = XCBuildConfiguration; - baseConfigurationReference = 297BA316EEA9A3E0CC6C6C63 /* Pods-AccessCheckoutReactNative.release.xcconfig */; + baseConfigurationReference = A52DA71C26BDE615849C74B7 /* Pods-AccessCheckoutReactNative.release.xcconfig */; buildSettings = { CLANG_ENABLE_MODULES = YES; CODE_SIGN_STYLE = Automatic; @@ -834,7 +834,7 @@ }; 516A9F6F2757D3B800E9B00E /* Debug */ = { isa = XCBuildConfiguration; - baseConfigurationReference = A801B54B720EBD674E60E506 /* Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig */; + baseConfigurationReference = E43A9F2DDFBFE934BFCDB703 /* Pods-AccessCheckoutReactNativeUnitTests.debug.xcconfig */; buildSettings = { ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = "$(inherited)"; CODE_SIGN_STYLE = Automatic; @@ -855,7 +855,7 @@ }; 516A9F702757D3B800E9B00E /* Release */ = { isa = XCBuildConfiguration; - baseConfigurationReference = 00ABDCBCE0FE39A5A7B91754 /* Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig */; + baseConfigurationReference = 60352FB6B516E97491CD890B /* Pods-AccessCheckoutReactNativeUnitTests.release.xcconfig */; buildSettings = { ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = "$(inherited)"; CODE_SIGN_STYLE = Automatic; diff --git a/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.m b/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.m index 7d1daaf..b4f6325 100644 --- a/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.m +++ b/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.m @@ -2,6 +2,14 @@ #import @interface RCT_EXTERN_MODULE(AccessCheckoutTextInputManager, RCTViewManager) -//Externalises properties -RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString) + +//Externalises properties using a remap in case of name changes +//RCT_REMAP_VIEW_PROPERTY(RN property name, ios property name, type) + +RCT_REMAP_VIEW_PROPERTY(placeholder, placeholder, NSString) +RCT_REMAP_VIEW_PROPERTY(editable, isEnabled, BOOL) + +RCT_REMAP_VIEW_PROPERTY(color, textColor, UIColor) +RCT_REMAP_VIEW_PROPERTY(font, font, UIFont) + @end diff --git a/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.swift b/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.swift index 82032e8..d3c047b 100644 --- a/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.swift +++ b/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative/AccessCheckoutTextInputManager.swift @@ -1,11 +1,20 @@ import AccessCheckoutSDK import Foundation + import React @objc(AccessCheckoutTextInputManager) class AccessCheckoutTextInputManager: RCTViewManager { override func view() -> UIView! { - return AccessCheckoutUITextField() + var field = AccessCheckoutUITextField() + + // In order to replicate React Native behaviours in both ios and android we need reset + // the default padding, borders and radius added by AccessCheckoutUITextField + field.borderWidth = 0 + field.cornerRadius = 0 + field.horizontalPadding = 0 + + return field } override static func requiresMainQueueSetup() -> Bool { diff --git a/access-checkout-react-native-sdk/ios/bitrise.yml b/access-checkout-react-native-sdk/ios/bitrise.yml index 389c565..9beb0c2 100644 --- a/access-checkout-react-native-sdk/ios/bitrise.yml +++ b/access-checkout-react-native-sdk/ios/bitrise.yml @@ -14,6 +14,7 @@ workflows: - cocoapods-install@2: inputs: - source_root_path: "$BITRISE_SOURCE_DIR/access-checkout-react-native-sdk/ios" + - command: update - recreate-user-schemes@1: inputs: - project_path: "$BITRISE_SOURCE_DIR/access-checkout-react-native-sdk/ios/AccessCheckoutReactNative.xcodeproj" diff --git a/access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput.tsx b/access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput.tsx index c048029..a71af92 100644 --- a/access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput.tsx +++ b/access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput.tsx @@ -1,35 +1,85 @@ import React from 'react'; import { requireNativeComponent, - StyleProp, - TextStyle, - type ViewProps, + type StyleProp, + StyleSheet, + View, + type ViewStyle, } from 'react-native'; +import type { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; /** * Composes `AccessCheckoutTextInput`. * * - nativeID: string * - testID: string - * - style: StyleProp - * - editable: boolean + * - style: StyleProp; * - placeholder: string + * - editable: boolean */ -interface AccessCheckoutTextInputProps extends ViewProps { - testID: string | undefined; - style?: StyleProp; - editable?: boolean | undefined; - placeholder?: string | undefined; - isValid?: boolean; - keyboardType?: string; +interface AccessCheckoutTextInputProps { + nativeID: string; + testID?: string; + style?: StyleProp; + placeholder?: string; + editable?: boolean; +} + +/** + * Note: Not all properties apply styling to placeholder text and input text. + * textColor: only applies to input text. + * fontFamily: applies to both placeholder text and input text. + * fontSize:applies to both placeholder text and input text. + */ +interface AccessCheckoutTextInputStyle extends ViewStyle { + color?: ColorValue; + fontFamily?: string; + fontSize?: number; +} + +/** + * Font Changes apply to placeholder text and input text + */ +interface RTCAccessCheckoutTextInputFontProps { + fontFamily?: string; + fontSize?: number; +} + +interface RTCAccessCheckoutTextInputProps { + nativeID: string; + testID?: string; + style?: StyleProp; + placeholder?: string; + font?: RTCAccessCheckoutTextInputFontProps; + editable?: boolean; + color?: ColorValue; } const RTCAccessCheckoutTextInput = - requireNativeComponent( + requireNativeComponent( 'AccessCheckoutTextInput' ); const AccessCheckoutTextInput = (props: AccessCheckoutTextInputProps) => { - return ; + const { nativeID, testID, style, placeholder, editable } = props; + const { color, fontFamily, fontSize, ...otherStyles } = StyleSheet.flatten([ + style, + ]); + return ( + + + + ); }; export default AccessCheckoutTextInput; diff --git a/demo-app/bitrise.yml b/demo-app/bitrise.yml index 10ebf68..00defef 100644 --- a/demo-app/bitrise.yml +++ b/demo-app/bitrise.yml @@ -87,10 +87,12 @@ workflows: - cocoapods-install@2: title: "Install pods for iOS Bridge SDK" inputs: + - command: update - source_root_path: $BITRISE_SOURCE_DIR/access-checkout-react-native-sdk/ios/ - cocoapods-install@2: title: "Install pods for demo-app" inputs: + - command: update - source_root_path: $BITRISE_SOURCE_DIR/demo-app/ios/ - script@1.2: title: "Build app for Detox" diff --git a/demo-app/ios/AccessCheckoutReactNativeDemo.xcodeproj/project.pbxproj b/demo-app/ios/AccessCheckoutReactNativeDemo.xcodeproj/project.pbxproj index d032920..4ec7446 100644 --- a/demo-app/ios/AccessCheckoutReactNativeDemo.xcodeproj/project.pbxproj +++ b/demo-app/ios/AccessCheckoutReactNativeDemo.xcodeproj/project.pbxproj @@ -7,16 +7,14 @@ objects = { /* Begin PBXBuildFile section */ + 1125066BC7C4F89DE74B79F7 /* libPods-AccessCheckoutReactNativeDemo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F3DA2DC966B02E7297E972BF /* libPods-AccessCheckoutReactNativeDemo.a */; }; 516A9FCE275920FE00E9B00E /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 516A9FCD275920FE00E9B00E /* Assets.xcassets */; }; 516A9FD1275920FE00E9B00E /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 516A9FCF275920FE00E9B00E /* LaunchScreen.storyboard */; }; 516AA0282759265300E9B00E /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 516AA0252759265200E9B00E /* main.m */; }; 516AA0292759265300E9B00E /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 516AA0272759265200E9B00E /* AppDelegate.mm */; }; - D66603A8477B29AF913CE40D /* libPods-AccessCheckoutReactNativeDemo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B734630A55155D2C8C7F91B9 /* libPods-AccessCheckoutReactNativeDemo.a */; }; /* End PBXBuildFile section */ /* Begin PBXFileReference section */ - 0DBADFBDBF445BDD52415B1A /* Pods-AccessCheckoutReactNativeDemo.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeDemo.debug.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo.debug.xcconfig"; sourceTree = ""; }; - 44D41AAC3357D6A1E2F79ECF /* Pods-AccessCheckoutReactNativeDemo.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeDemo.release.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo.release.xcconfig"; sourceTree = ""; }; 516A9FC1275920FA00E9B00E /* AccessCheckoutReactNativeDemo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = AccessCheckoutReactNativeDemo.app; sourceTree = BUILT_PRODUCTS_DIR; }; 516A9FCD275920FE00E9B00E /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 516A9FD0275920FE00E9B00E /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; @@ -24,7 +22,9 @@ 516AA0252759265200E9B00E /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = ""; }; 516AA0262759265200E9B00E /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = ""; }; 516AA0272759265200E9B00E /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = AppDelegate.mm; sourceTree = ""; }; - B734630A55155D2C8C7F91B9 /* libPods-AccessCheckoutReactNativeDemo.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AccessCheckoutReactNativeDemo.a"; sourceTree = BUILT_PRODUCTS_DIR; }; + 69373C7C8A20EE6154D2DDFF /* Pods-AccessCheckoutReactNativeDemo.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeDemo.debug.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo.debug.xcconfig"; sourceTree = ""; }; + C2B87B202891C55E4DDAFBD3 /* Pods-AccessCheckoutReactNativeDemo.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AccessCheckoutReactNativeDemo.release.xcconfig"; path = "Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo.release.xcconfig"; sourceTree = ""; }; + F3DA2DC966B02E7297E972BF /* libPods-AccessCheckoutReactNativeDemo.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AccessCheckoutReactNativeDemo.a"; sourceTree = BUILT_PRODUCTS_DIR; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -32,20 +32,28 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( - D66603A8477B29AF913CE40D /* libPods-AccessCheckoutReactNativeDemo.a in Frameworks */, + 1125066BC7C4F89DE74B79F7 /* libPods-AccessCheckoutReactNativeDemo.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ + 0E8E23696739B08F26F678C6 /* Frameworks */ = { + isa = PBXGroup; + children = ( + F3DA2DC966B02E7297E972BF /* libPods-AccessCheckoutReactNativeDemo.a */, + ); + name = Frameworks; + sourceTree = ""; + }; 516A9FB8275920FA00E9B00E = { isa = PBXGroup; children = ( 516A9FC3275920FA00E9B00E /* AccessCheckoutReactNativeDemo */, 516A9FC2275920FA00E9B00E /* Products */, 6215D3A0838FFDCC830A4313 /* Pods */, - 784604433CB062468D68A0B1 /* Frameworks */, + 0E8E23696739B08F26F678C6 /* Frameworks */, ); sourceTree = ""; }; @@ -73,20 +81,12 @@ 6215D3A0838FFDCC830A4313 /* Pods */ = { isa = PBXGroup; children = ( - 0DBADFBDBF445BDD52415B1A /* Pods-AccessCheckoutReactNativeDemo.debug.xcconfig */, - 44D41AAC3357D6A1E2F79ECF /* Pods-AccessCheckoutReactNativeDemo.release.xcconfig */, + 69373C7C8A20EE6154D2DDFF /* Pods-AccessCheckoutReactNativeDemo.debug.xcconfig */, + C2B87B202891C55E4DDAFBD3 /* Pods-AccessCheckoutReactNativeDemo.release.xcconfig */, ); path = Pods; sourceTree = ""; }; - 784604433CB062468D68A0B1 /* Frameworks */ = { - isa = PBXGroup; - children = ( - B734630A55155D2C8C7F91B9 /* libPods-AccessCheckoutReactNativeDemo.a */, - ); - name = Frameworks; - sourceTree = ""; - }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ @@ -94,12 +94,12 @@ isa = PBXNativeTarget; buildConfigurationList = 516A9FEB275920FF00E9B00E /* Build configuration list for PBXNativeTarget "AccessCheckoutReactNativeDemo" */; buildPhases = ( - 65813C36A2407303BC61C1E7 /* [CP] Check Pods Manifest.lock */, + 1032E5F552FCDFAFC05F7C37 /* [CP] Check Pods Manifest.lock */, 516A9FBD275920FA00E9B00E /* Sources */, 516A9FBE275920FA00E9B00E /* Frameworks */, 516A9FBF275920FA00E9B00E /* Resources */, - ECE030C980C52F713F26662D /* [CP] Embed Pods Frameworks */, - F32FFFAAD2B26C3470785201 /* [CP] Copy Pods Resources */, + 85B5C22FF1668F3DA9D4EAA5 /* [CP] Embed Pods Frameworks */, + 4D4FF15648D592B4977F643F /* [CP] Copy Pods Resources */, ); buildRules = ( ); @@ -155,7 +155,7 @@ /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ - 65813C36A2407303BC61C1E7 /* [CP] Check Pods Manifest.lock */ = { + 1032E5F552FCDFAFC05F7C37 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( @@ -177,38 +177,38 @@ shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; - ECE030C980C52F713F26662D /* [CP] Embed Pods Frameworks */ = { + 4D4FF15648D592B4977F643F /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-frameworks-${CONFIGURATION}-input-files.xcfilelist", + "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-resources-${CONFIGURATION}-input-files.xcfilelist", ); - name = "[CP] Embed Pods Frameworks"; + name = "[CP] Copy Pods Resources"; outputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-frameworks-${CONFIGURATION}-output-files.xcfilelist", + "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-resources-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-frameworks.sh\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-resources.sh\"\n"; showEnvVarsInLog = 0; }; - F32FFFAAD2B26C3470785201 /* [CP] Copy Pods Resources */ = { + 85B5C22FF1668F3DA9D4EAA5 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-resources-${CONFIGURATION}-input-files.xcfilelist", + "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); - name = "[CP] Copy Pods Resources"; + name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-resources-${CONFIGURATION}-output-files.xcfilelist", + "${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-resources.sh\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AccessCheckoutReactNativeDemo/Pods-AccessCheckoutReactNativeDemo-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; /* End PBXShellScriptBuildPhase section */ @@ -378,7 +378,7 @@ }; 516A9FEC275920FF00E9B00E /* Debug */ = { isa = XCBuildConfiguration; - baseConfigurationReference = 0DBADFBDBF445BDD52415B1A /* Pods-AccessCheckoutReactNativeDemo.debug.xcconfig */; + baseConfigurationReference = 69373C7C8A20EE6154D2DDFF /* Pods-AccessCheckoutReactNativeDemo.debug.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor; @@ -398,7 +398,7 @@ }; 516A9FED275920FF00E9B00E /* Release */ = { isa = XCBuildConfiguration; - baseConfigurationReference = 44D41AAC3357D6A1E2F79ECF /* Pods-AccessCheckoutReactNativeDemo.release.xcconfig */; + baseConfigurationReference = C2B87B202891C55E4DDAFBD3 /* Pods-AccessCheckoutReactNativeDemo.release.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor; diff --git a/demo-app/ios/Podfile b/demo-app/ios/Podfile index 2230685..e21f57d 100644 --- a/demo-app/ios/Podfile +++ b/demo-app/ios/Podfile @@ -31,7 +31,6 @@ target 'AccessCheckoutReactNativeDemo' do # Remove once version 3.0.0 of the AccessCheckoutSDK has been released to Cocoapods pod 'AccessCheckoutSDK', :git => 'git@github.com:Worldpay/access-checkout-ios.git', :tag => 'v3.0.0' - end post_install do |installer| diff --git a/demo-app/ios/Podfile.lock b/demo-app/ios/Podfile.lock index 5acc59b..fab79aa 100644 --- a/demo-app/ios/Podfile.lock +++ b/demo-app/ios/Podfile.lock @@ -476,6 +476,6 @@ SPEC CHECKSUMS: ReactCommon: dce64235f8548b6e4758647310145f5356c8d0cb Yoga: 56413d530d1808044600320ced5baa883acedc44 -PODFILE CHECKSUM: 408b947d698c5c185eaffb553e600969f934485a +PODFILE CHECKSUM: 90afca6b86cd3ad6ff88aeef745a144f74227963 COCOAPODS: 1.14.3 diff --git a/demo-app/src/card-flow/CardFlow.tsx b/demo-app/src/card-flow/CardFlow.tsx index 9d3d0e0..a91d48e 100644 --- a/demo-app/src/card-flow/CardFlow.tsx +++ b/demo-app/src/card-flow/CardFlow.tsx @@ -10,8 +10,7 @@ import { Sessions, useCardValidation, } from '../../../access-checkout-react-native-sdk/src/index'; -import type SessionGenerationConfig - from '../../../access-checkout-react-native-sdk/src/session/SessionGenerationConfig'; +import type SessionGenerationConfig from '../../../access-checkout-react-native-sdk/src/session/SessionGenerationConfig'; import CardBrandImage from '../common/CardBrandImage'; import CvcField from '../common/CvcField'; import ErrorView from '../common/ErrorView'; @@ -108,7 +107,7 @@ export default function CardFlow() { const { initialiseCardValidation } = useCardValidation( accessCheckout, validationConfig, - validationEventListener, + validationEventListener ); const onLayout = () => { @@ -137,7 +136,7 @@ export default function CardFlow() { accessCheckout .generateSessions(sessionGenerationConfig, sessionTypes) .then((sessions: Sessions) => { - console.info(`Successfully generated session(s)`); + console.info('Successfully generated session(s)'); if (sessions.card) { setCardSession(sessions.card); diff --git a/demo-app/src/common/CvcField.tsx b/demo-app/src/common/CvcField.tsx index d5f86ae..72bfa01 100644 --- a/demo-app/src/common/CvcField.tsx +++ b/demo-app/src/common/CvcField.tsx @@ -1,22 +1,17 @@ import React from 'react'; import { StyleSheet } from 'react-native'; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import commonStyles from './common-styles.js'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import UIComponentProps from './UIComponentProps'; +import type UIComponentProps from './UIComponentProps'; import AccessCheckoutTextInput from '../../../access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput'; const styles = StyleSheet.create({ cvc: { flex: 1, + flexDirection: 'row', margin: 12, borderWidth: 1, borderRadius: 5, - padding: 10, height: 40, + paddingHorizontal: 10, }, }); @@ -26,20 +21,20 @@ interface CvcFieldProps extends UIComponentProps { } const CvcField = (props: CvcFieldProps) => { + const validationColours = props.isValid ? 'green' : 'red'; + const validationColourStyle = props.isEditable ? validationColours : 'silver'; + return ( diff --git a/demo-app/src/common/ExpiryDateField.tsx b/demo-app/src/common/ExpiryDateField.tsx index 71b3915..a9b74dd 100644 --- a/demo-app/src/common/ExpiryDateField.tsx +++ b/demo-app/src/common/ExpiryDateField.tsx @@ -1,44 +1,42 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import commonStyles from './common-styles.js'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import UIComponentProps from './UIComponentProps'; + +import type UIComponentProps from './UIComponentProps'; import AccessCheckoutTextInput from '../../../access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput'; +import { StyleSheet } from 'react-native'; + +interface ExpiryDateFieldProps extends UIComponentProps { + isEditable: boolean; + isValid: boolean; +} const styles = StyleSheet.create({ expiry: { flex: 1, + flexDirection: 'row', margin: 12, borderWidth: 1, borderRadius: 5, - padding: 10, height: 40, + paddingHorizontal: 10, }, }); -interface ExpiryDateFieldProps extends UIComponentProps { - isEditable: boolean; - isValid: boolean; -} - const ExpiryDateField = (props: ExpiryDateFieldProps) => { + const validationColours = props.isValid ? 'green' : 'red'; + const validationColourStyle = props.isEditable ? validationColours : 'silver'; + return ( ); diff --git a/demo-app/src/common/PanField.tsx b/demo-app/src/common/PanField.tsx index a41c660..c0ec439 100644 --- a/demo-app/src/common/PanField.tsx +++ b/demo-app/src/common/PanField.tsx @@ -1,21 +1,17 @@ import React from 'react'; import { StyleSheet } from 'react-native'; import AccessCheckoutTextInput from '../../../access-checkout-react-native-sdk/src/ui/AccessCheckoutTextInput'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import commonStyles from './common-styles.js'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import UIComponentProps from './UIComponentProps'; +import type UIComponentProps from './UIComponentProps'; const styles = StyleSheet.create({ pan: { flex: 8, + flexDirection: 'row', margin: 12, marginRight: 5, borderWidth: 1, borderRadius: 5, - padding: 10, + paddingHorizontal: 10, height: 40, }, }); @@ -26,19 +22,20 @@ interface PanFieldProps extends UIComponentProps { } const PanField = (props: PanFieldProps) => { + const validationColours = props.isValid ? 'green' : 'red'; + const validationColourStyle = props.isEditable ? validationColours : 'silver'; + return ( diff --git a/demo-app/src/cvc-flow/CvcFlow.tsx b/demo-app/src/cvc-flow/CvcFlow.tsx index 647d0b9..6c52f03 100644 --- a/demo-app/src/cvc-flow/CvcFlow.tsx +++ b/demo-app/src/cvc-flow/CvcFlow.tsx @@ -8,10 +8,7 @@ import { Sessions, useCvcOnlyValidation, } from '../../../access-checkout-react-native-sdk/src'; -import type SessionGenerationConfig - from '../../../access-checkout-react-native-sdk/src/session/SessionGenerationConfig'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore +import type SessionGenerationConfig from '../../../access-checkout-react-native-sdk/src/session/SessionGenerationConfig'; import styles from '../card-flow/style.js'; import CvcField from '../common/CvcField'; import ErrorView from '../common/ErrorView'; @@ -58,7 +55,7 @@ export default function CvcFlow() { const { initialiseCvcOnlyValidation } = useCvcOnlyValidation( accessCheckout, cvcOnlyValidationConfig, - cvcOnlyValidationEventListener, + cvcOnlyValidationEventListener ); const onLayout = () => {