Merge pull request #270 from Sphereon-Opensource/fix/SDK-29

fix/SDK-29
Sphereon-Opensource · Sep 10, 2024 · 7480ec1 · 7480ec1
2 parents effda45 + 5cc591d
commit 7480ec1
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -70,9 +70,9 @@
     "@sphereon/ssi-sdk.vc-handler-ld-local": "0.29.1-next.47",
     "@sphereon/ssi-sdk.xstate-machine-persistence": "0.29.1-next.47",
     "@sphereon/ssi-types": "0.29.1-next.47",
-    "@sphereon/ui-components.core": "^0.3.0",
-    "@sphereon/ui-components.credential-branding": "^0.3.0",
-    "@sphereon/ui-components.ssi-react-native": "^0.3.0",
+    "@sphereon/ui-components.core": "0.3.1-unstable.13",
+    "@sphereon/ui-components.credential-branding": "0.3.1-unstable.13",
+    "@sphereon/ui-components.ssi-react-native": "0.3.1-unstable.13",
     "@veramo/core": "4.2.0",
     "@veramo/credential-w3c": "4.2.0",
     "@veramo/data-store": "4.2.0",

diff --git a/src/agent/plugins.ts b/src/agent/plugins.ts
@@ -26,7 +26,7 @@ import {dispatchIdentifier} from '../services/identityService';
 import {verifySDJWTSignature} from '../services/signatureService';
 import store from '../store';
 import {dispatchVerifiableCredential} from '../store/actions/credential.actions';
-import {DEFAULT_DID_PREFIX_AND_METHOD, SupportedDidMethodEnum} from '../types';
+import {DEFAULT_DID_PREFIX_AND_METHOD} from '../types';
 import {ADD_IDENTITY_SUCCESS} from '../types/store/contact.action.types';
 import {generateDigest, generateSalt} from '../utils';
 import {didProviders, didResolver, linkHandlers} from './index';

diff --git a/src/components/containers/SSIButtonsContainer/index.tsx b/src/components/containers/SSIButtonsContainer/index.tsx
@@ -1,13 +1,14 @@
-import React, {PureComponent} from 'react';
-import {ColorValue, EmitterSubscription, Keyboard} from 'react-native';
-import {SSIButtonBottomContainerStyled as ButtonContainer, SSIButtonsContainerSpacerStyled as Spacer} from '../../../styles/components';
+import React, {CSSProperties, PureComponent} from 'react';
+import {ColorValue, EmitterSubscription, Keyboard, View} from 'react-native';
+import {SSIButtonBottomContainerStyled as ButtonContainer} from '../../../styles/components';
 import {IButton} from '../../../types';
 import {PrimaryButton, SecondaryButton} from '@sphereon/ui-components.ssi-react-native';
 
 export interface Props {
   primaryButton?: IButton;
   secondaryButton?: IButton;
   backgroundColor?: ColorValue;
+  style?: CSSProperties;
 }
 
 interface IState {
@@ -40,33 +41,25 @@ class SSIButtonsContainer extends PureComponent<Props, IState> {
   };
 
   render() {
-    const {backgroundColor, primaryButton, secondaryButton} = this.props;
+    const {backgroundColor, primaryButton, secondaryButton, style} = this.props;
     const {keyboardVisible} = this.state;
 
     return (
-      <ButtonContainer style={{paddingBottom: keyboardVisible ? 18 : 36, ...(backgroundColor && {backgroundColor})}}>
+      <ButtonContainer
+        style={{
+          paddingBottom: keyboardVisible ? 18 : 36,
+          ...(backgroundColor && {backgroundColor}),
+          ...style,
+        }}>
         {secondaryButton && (
-          <SecondaryButton
-            caption={secondaryButton.caption}
-            onPress={secondaryButton.onPress}
-            disabled={secondaryButton.disabled}
-            // TODO move styling to styled components (currently there is an issue where this styling prop is not being set correctly)
-            style={{
-              height: 42,
-              minWidth: 145,
-              ...(!primaryButton && {width: 300}),
-            }}
-          />
+          <View style={{flex: 1, flexDirection: 'column'}}>
+            <SecondaryButton caption={secondaryButton.caption} onPress={secondaryButton.onPress} disabled={secondaryButton.disabled} />
+          </View>
         )}
-        <Spacer />
         {primaryButton && (
-          <PrimaryButton
-            caption={primaryButton.caption}
-            onPress={primaryButton.onPress}
-            disabled={primaryButton.disabled}
-            // TODO move styling to styled components (currently there is an issue where this styling prop is not being set correctly)
-            style={{height: 42, minWidth: 145, ...(!secondaryButton && {width: 300})}}
-          />
+          <View style={{flex: 1, flexDirection: 'column'}}>
+            <PrimaryButton caption={primaryButton.caption} onPress={primaryButton.onPress} disabled={primaryButton.disabled} />
+          </View>
         )}
       </ButtonContainer>
     );

diff --git a/src/components/messageBoxes/popups/SSIPopup/index.tsx b/src/components/messageBoxes/popups/SSIPopup/index.tsx
@@ -4,7 +4,6 @@ import {TouchableOpacity, View} from 'react-native';
 import SSISecurityImage from '../../../../components/assets/images/SSISecurityImage';
 import SSIWarningImage from '../../../../components/assets/images/SSIWarningImage';
 import {
-  SSIPopupButtonsContainerStyled as ButtonsContainer,
   SSIPopupCloseButtonContainerStyled as CloseButtonContainer,
   SSIPopupContainerStyled as Container,
   SSIPopupContentContainerStyled as ContentContainer,
@@ -21,10 +20,10 @@ import {
 } from '../../../../styles/components';
 import {SSITextH2SemiBoldStyled as TitleCaption} from '../../../../styles/components';
 import {ButtonIconsEnum, IButton, PopupBadgesEnum, PopupImagesEnum} from '../../../../types';
-import {parseTextToElement} from '../../../../utils/TextUtils';
+import {parseTextToElement} from '../../../../utils';
 import SSIIconButton from '../../../buttons/SSIIconButton';
 import {backgroundColors, fontColors} from '@sphereon/ui-components.core';
-import {PrimaryButton, SecondaryButton} from '@sphereon/ui-components.ssi-react-native';
+import SSIButtonsContainer from '../../../containers/SSIButtonsContainer';
 
 export interface IProps {
   onClose?: () => Promise<void>;
@@ -69,35 +68,21 @@ const SSIPopup: FC<IProps> = (props: IProps): JSX.Element => {
           </DetailsButtonContainer>
         )}
       </ContentContainer>
-      {/* TODO we use this 2 button structure a lot, we should make a component out of it */}
-      {(primaryButton || secondaryButton) && (
-        <ButtonsContainer>
-          {secondaryButton && (
-            <SecondaryButton
-              style={{
-                height: 42,
-                minWidth: 160,
-                // Scales the button based on presence of other button
-                ...(!primaryButton && {width: '100%'}),
-              }}
-              caption={secondaryButton.caption}
-              onPress={secondaryButton.onPress}
-            />
-          )}
-          {primaryButton && (
-            <PrimaryButton
-              // Scales the button based on presence of other button
-              style={{
-                height: 42,
-                minWidth: 160,
-                ...(!secondaryButton && {width: '100%'}),
-              }}
-              caption={primaryButton.caption}
-              onPress={primaryButton.onPress}
-            />
-          )}
-        </ButtonsContainer>
-      )}
+      <SSIButtonsContainer
+        style={{paddingLeft: 18, paddingRight: 18, paddingBottom: 16}} // FIXME create a styling component for this or align design with other button placements
+        {...(secondaryButton && {
+          secondaryButton: {
+            caption: secondaryButton.caption,
+            onPress: secondaryButton.onPress,
+          },
+        })}
+        {...(primaryButton && {
+          primaryButton: {
+            caption: primaryButton.caption,
+            onPress: primaryButton.onPress,
+          },
+        })}
+      />
     </Container>
   );
 };

diff --git a/src/components/views/SSIWelcomeView/index.tsx b/src/components/views/SSIWelcomeView/index.tsx
@@ -1,17 +1,17 @@
-import {PrimaryButton} from '@sphereon/ui-components.ssi-react-native';
 import React, {FC} from 'react';
+import SSIProgressIndicator from '../../indicators/SSIProgressIndicator';
+import SSIButtonsContainer from '../../containers/SSIButtonsContainer';
+import {translate} from '../../../localization/Localization';
 import {
   SSIWelcomeViewBodyContainerStyled as BodyContainer,
   SSITextH3RegularLightStyled as BodyText,
-  SSIButtonBottomContainerStyled as ButtonContainer,
   SSIWelcomeViewContainerStyled as Container,
   SSIWelcomeViewContentContainerStyled as ContentContainer,
   SSIWelcomeViewHeaderTextStyled as HeaderCaption,
   SSIWelcomeViewProgressIndicatorContainerStyled as ProgressIndicatorContainer,
   SSIWelcomeViewTitleTextStyled as TitleCaption,
 } from '../../../styles/components';
 import {IButton} from '../../../types';
-import SSIProgressIndicator from '../../indicators/SSIProgressIndicator';
 
 export interface IProps {
   step: number;
@@ -37,14 +37,12 @@ const SSIWelcomeView: FC<IProps> = (props: IProps): JSX.Element => {
           <BodyText>{body}</BodyText>
         </BodyContainer>
       </ContentContainer>
-      <ButtonContainer>
-        <PrimaryButton
-          // TODO move styling to styled components (currently there is an issue where this styling prop is not being set correctly)
-          style={{height: 42, width: 300}}
-          caption={action.caption}
-          onPress={action.onPress}
-        />
-      </ButtonContainer>
+      <SSIButtonsContainer
+        primaryButton={{
+          caption: translate('action_accept_label'),
+          onPress: action.onPress,
+        }}
+      />
     </Container>
   );
 };

diff --git a/src/screens/CredentialDetailsScreen/index.tsx b/src/screens/CredentialDetailsScreen/index.tsx
@@ -1,22 +1,21 @@
 import React, {FC} from 'react';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
-import {ImageAttributes} from '@sphereon/ui-components.core';
-import {PrimaryButton, SecondaryButton, SSICredentialCardView} from '@sphereon/ui-components.ssi-react-native';
+import {useBackHandler} from '@react-native-community/hooks';
+import {backgroundColors, ImageAttributes} from '@sphereon/ui-components.core';
+import {CredentialSummary, getCredentialStatus, getIssuerLogo} from '@sphereon/ui-components.credential-branding';
+import {SSICredentialCardView} from '@sphereon/ui-components.ssi-react-native';
 import SSIActivityView from '../../components/views/SSIActivityView';
 import SSICredentialDetailsView from '../../components/views/SSICredentialDetailsView';
 import SSITabView from '../../components/views/SSITabView';
-import {CredentialSummary, getCredentialStatus, getIssuerLogo} from '@sphereon/ui-components.credential-branding';
+import SSIButtonsContainer from '../../components/containers/SSIButtonsContainer';
 import {translate} from '../../localization/Localization';
 import {
-  CredentialDetailsScreenButtonContainer as ButtonContainer,
-  CredentialDetailsScreenButtonContentContainer as ButtonContainerContent,
   CredentialDetailsScreenCredentialCardContainer as CardContainer,
   SSIBasicHorizontalCenterContainerStyled as Container,
   CredentialDetailsScreenContentContainer as ContentContainer,
   SSIStatusBarDarkModeStyled as StatusBar,
 } from '../../styles/components';
 import {ITabViewRoute, ScreenRoutesEnum, StackParamList} from '../../types';
-import {useBackHandler} from '@react-native-community/hooks';
 
 type Props = NativeStackScreenProps<StackParamList, ScreenRoutesEnum.CREDENTIAL_DETAILS>;
 
@@ -97,37 +96,22 @@ const CredentialDetailsScreen: FC<Props> = (props: Props): JSX.Element => {
           />
         </CardContainer>
         <SSITabView routes={routes} />
-        {/* TODO we use this 2 button structure a lot, we should make a component out of it */}
-        {(primaryAction || secondaryAction) && (
-          <ButtonContainer>
-            <ButtonContainerContent>
-              {secondaryAction && (
-                <SecondaryButton
-                  caption={secondaryAction.caption}
-                  onPress={secondaryAction.onPress}
-                  // TODO move styling to styled components (currently there is an issue where this styling prop is not being set correctly)
-                  style={{
-                    height: 42,
-                    minWidth: 160,
-                    ...(!primaryAction && {width: '100%'}),
-                  }}
-                />
-              )}
-              {primaryAction && (
-                <PrimaryButton
-                  caption={primaryAction.caption}
-                  onPress={primaryAction.onPress}
-                  // TODO move styling to styled components (currently there is an issue where this styling prop is not being set correctly)
-                  style={{
-                    height: 42,
-                    minWidth: 160,
-                    // ...(!secondaryAction && {width: '100%'}),
-                  }}
-                />
-              )}
-            </ButtonContainerContent>
-          </ButtonContainer>
-        )}
+        <SSIButtonsContainer
+          style={{paddingLeft: 24, paddingRight: 24}} // FIXME create a styling component for this or align design with other button placements
+          backgroundColor={backgroundColors.secondaryDark}
+          {...(secondaryAction && {
+            secondaryButton: {
+              caption: secondaryAction.caption,
+              onPress: secondaryAction.onPress,
+            },
+          })}
+          {...(primaryAction && {
+            primaryButton: {
+              caption: primaryAction.caption,
+              onPress: primaryAction.onPress,
+            },
+          })}
+        />
       </ContentContainer>
     </Container>
   );

diff --git a/src/screens/Onboarding/SSISummaryScreen/index.tsx b/src/screens/Onboarding/SSISummaryScreen/index.tsx
@@ -1,17 +1,15 @@
-import {useBackHandler} from '@react-native-community/hooks';
-import {NativeStackScreenProps} from '@react-navigation/native-stack';
 import React, {FC} from 'react';
-
 import {v4 as uuidv4} from 'uuid';
-
+import {useBackHandler} from '@react-native-community/hooks';
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+import {backgroundColors} from '@sphereon/ui-components.core';
+import {CredentialDetailsRow} from '@sphereon/ui-components.credential-branding';
 import SSIButtonsContainer from '../../../components/containers/SSIButtonsContainer';
 import SSICredentialDetailsView from '../../../components/views/SSICredentialDetailsView';
 import SSITabView from '../../../components/views/SSITabView';
 import {translate} from '../../../localization/Localization';
 import {SSIBasicHorizontalCenterContainerStyled as Container} from '../../../styles/components';
 import {ITabViewRoute, ScreenRoutesEnum, StackParamList} from '../../../types';
-import {backgroundColors} from '@sphereon/ui-components.core';
-import {CredentialDetailsRow} from '@sphereon/ui-components.credential-branding';
 
 type Props = NativeStackScreenProps<StackParamList, ScreenRoutesEnum.ONBOARDING_SUMMARY>;
 
@@ -69,6 +67,7 @@ const SSIOnboardingSummaryScreen: FC<Props> = (props: Props): JSX.Element => {
     <Container>
       <SSITabView routes={routes} />
       <SSIButtonsContainer
+        style={{paddingRight: 24, paddingLeft: 24}} // FIXME fix styling so that padding is in a styling component
         backgroundColor={backgroundColors.secondaryDark}
         primaryButton={{
           caption: translate('onboard_summary_button_caption'),

diff --git a/src/styles/components/components/SSIButtonsContainer/index.ts b/src/styles/components/components/SSIButtonsContainer/index.ts
diff --git a/src/styles/components/components/SSIImageField/index.ts b/src/styles/components/components/SSIImageField/index.ts
@@ -17,4 +17,6 @@ export const SSIImageFieldContentContainerStyled = styled.View`
   padding: 10px;
   background-color: ${backgroundColors.primaryDark};
   border-radius: 10px;
+  justify-content: center;
+  align-items: center;
 `;
diff --git a/src/styles/components/components/SSIPopup/index.ts b/src/styles/components/components/SSIPopup/index.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components/native';
-
 import {SSICheckmarkBadge, SSIExclamationMarkBadge} from '@sphereon/ui-components.ssi-react-native';
 import {SSIFlexDirectionRowViewStyled, SSIRoundedContainerBackgroundPrimaryLightStyled} from '../../containers';
 import {SSITextH4SemiBoldStyled, SSITextH5Styled} from '../../fonts';
@@ -60,13 +59,6 @@ export const SSIPopupCloseButtonContainerStyled = styled.View`
   margin-top: auto;
 `;
 
-export const SSIPopupButtonsContainerStyled = styled(SSIFlexDirectionRowViewStyled)`
-  justify-content: space-between;
-  margin-bottom: 16px;
-  padding-left: 18px;
-  padding-right: 18px;
-`;
-
 export const SSICheckmarkBadgeStyled = styled(SSICheckmarkBadge).attrs({
   size: 12,
 })``;

diff --git a/src/styles/components/components/SSIWelcomeView/index.tsx b/src/styles/components/components/SSIWelcomeView/index.tsx
@@ -8,6 +8,8 @@ export const SSIWelcomeViewContainerStyled = styled.View`
   border-top-color: ${borderColors.dark};
   background-color: ${backgroundColors.primaryDark};
   width: 100%;
+  padding-left: 24px;
+  padding-right: 24px;
 `;
 
 export const SSIWelcomeViewHeaderTextStyled = styled(SSITextH2LightStyled)`
@@ -19,7 +21,7 @@ export const SSIWelcomeViewTitleTextStyled = styled(SSITextH1LightStyled)`
 `;
 
 export const SSIWelcomeViewContentContainerStyled = styled.View`
-  margin: 0 24px 14px 24px;
+  margin: 0 0 14px 0;
 `;
 
 export const SSIWelcomeViewBodyContainerStyled = styled.View`

diff --git a/src/styles/components/components/index.ts b/src/styles/components/components/index.ts
@@ -23,7 +23,6 @@ export * from './SSISwipeRowViewItem';
 export * from './SSIStatusBar';
 export * from './SSITextInputField';
 export * from './SSIWelcomeView';
-export * from './SSIButtonsContainer';
 export * from './SSITermsOfServiceView';
 export * from './SSIDropDownList';
 export * from './SSIDropDownListItem';

diff --git a/src/styles/components/css/index.ts b/src/styles/components/css/index.ts
@@ -18,9 +18,8 @@ export const SSIBackgroundPrimaryLightColorCss = css`
 `;
 
 export const SSIButtonBottomContainerCss = css`
-  width: 100%;
   margin-top: auto;
-  padding-bottom: 36px;
   align-items: center;
   justify-content: center;
+  gap: 6px;
 `;
diff --git a/src/styles/components/screens/CredentialDetailsScreen/index.ts b/src/styles/components/screens/CredentialDetailsScreen/index.ts
@@ -12,14 +12,3 @@ export const CredentialDetailsScreenCredentialCardContainer = styled.View`
   align-items: center;
   margin-bottom: 8px;
 `;
-
-export const CredentialDetailsScreenButtonContainer = styled.View`
-  height: 80px;
-  width: 100%;
-  margin-top: auto;
-  background-color: ${backgroundColors.secondaryDark};
-`;
-
-export const CredentialDetailsScreenButtonContentContainer = styled(SSIFlexDirectionRowViewStyled)`
-  justify-content: space-evenly;
-`;