contrib: improving component messages

geo-knowledge-hub · Apr 29, 2024 · e1fa003 · e1fa003
1 parent c9dbdb4
commit e1fa003
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 13 deletions.
diff --git a/src/lib/contrib/askprovider/AskProviderApp.js b/src/lib/contrib/askprovider/AskProviderApp.js
@@ -7,6 +7,7 @@
  */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import { Provider } from 'react-redux';
 import { Button, Icon } from 'semantic-ui-react';
@@ -25,8 +26,13 @@ export class AskProviderApp extends Component {
     super(props);
 
     // Extracting parameters
-    const { commentsApi, record, defaultQueryParams, userIsAuthenticated } =
-      this.props;
+    const {
+      commentsApi,
+      record,
+      defaultQueryParams,
+      userIsAuthenticated,
+      buttonText,
+    } = this.props;
 
     // Creating Comments API client
     const commentsApiClient = new CommentsApiClient(
@@ -47,6 +53,8 @@ export class AskProviderApp extends Component {
     };
 
     this.store = configureStore(appConfig);
+
+    this.text = buttonText;
   }
 
   render() {
@@ -62,7 +70,7 @@ export class AskProviderApp extends Component {
           animated={'fade'}
         >
           <Icon name={'comments outline'} size={'large'} />
-          <b>{i18next.t('Ask the provider')}</b>
+          <b>{this.text}</b>
         </Button>
         <AskProviderModal
           onModalClose={() => {
@@ -74,3 +82,15 @@ export class AskProviderApp extends Component {
     );
   }
 }
+
+AskProviderApp.propTypes = {
+  commentsApi: PropTypes.object,
+  record: PropTypes.object,
+  defaultQueryParams: PropTypes.object,
+  userIsAuthenticated: PropTypes.object,
+  buttonText: PropTypes.string,
+};
+
+AskProviderApp.defaultProps = {
+  buttonText: i18next.t('Ask the provider'),
+};
diff --git a/src/lib/contrib/askprovider/components/AskProviderModal.js b/src/lib/contrib/askprovider/components/AskProviderModal.js
@@ -41,12 +41,12 @@ const AskProviderModalComponent = ({ isModalOpen, onModalClose, user }) => {
                         setMessageVisibility(false);
                       }}
                       header={i18next.t(
-                        'Get in touch with the Knowledge Provider'
+                        'Get in touch with the Provider'
                       )}
                       content={i18next.t(
-                        'Knowledge Providers do their best to bring you ' +
+                        'Providers do their best to bring you ' +
                           'the most helpful content. However, sometimes it is necessary to ask. In this' +
-                          ' tab, you can talk directly to the Knowledge Provider. Ask your question and keep in touch.'
+                          ' tab, you can talk directly to the Provider. Ask your question and keep in touch.'
                       )}
                     />
                   )}

diff --git a/src/lib/contrib/feedback/FeedbackApp.js b/src/lib/contrib/feedback/FeedbackApp.js
@@ -7,6 +7,7 @@
  */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import { Provider } from 'react-redux';
 import { Button, Icon } from 'semantic-ui-react';
@@ -22,8 +23,13 @@ export class FeedbackApp extends Component {
     super(props);
 
     // Extracting parameters
-    const { commentsApi, record, defaultQueryParams, userIsAuthenticated } =
-      this.props;
+    const {
+      commentsApi,
+      record,
+      defaultQueryParams,
+      userIsAuthenticated,
+      buttonText,
+    } = this.props;
 
     // Creating Comments API client
     const commentsApiClient = new CommentsApiClient(
@@ -44,6 +50,8 @@ export class FeedbackApp extends Component {
     };
 
     this.store = configureStore(appConfig);
+
+    this.text = buttonText;
   }
 
   render() {
@@ -59,7 +67,7 @@ export class FeedbackApp extends Component {
           animated={'fade'}
         >
           <Icon name={'users'} size={'large'} />
-          <b>{i18next.t('Learn the community experience with this package')}</b>
+          <b>{this.text}</b>
         </Button>
 
         <FeedbackSpace
@@ -72,3 +80,15 @@ export class FeedbackApp extends Component {
     );
   }
 }
+
+FeedbackApp.propTypes = {
+  commentsApi: PropTypes.object,
+  record: PropTypes.object,
+  defaultQueryParams: PropTypes.object,
+  userIsAuthenticated: PropTypes.object,
+  buttonText: PropTypes.string,
+};
+
+FeedbackApp.defaultProps = {
+  buttonText: i18next.t('Learn the community experience with this content'),
+};
diff --git a/src/lib/contrib/feedback/components/FeedbackSpace.js b/src/lib/contrib/feedback/components/FeedbackSpace.js
@@ -165,14 +165,14 @@ export class FeedbackSpaceComponent extends Component {
               <Container>
                 <Grid stackable>
                   <Grid.Row>
-                    <Grid.Column computer={12} mobile={16} tablet={16}>
+                    <Grid.Column computer={13} mobile={16} tablet={16}>
                       <p className={'feedback feedback-metrics-title'}>
                         Community feedback for <b>{recordTitle}</b>
                       </p>
                     </Grid.Column>
 
                     <Grid.Column
-                      width={4}
+                      width={3}
                       textAlign={'right'}
                       only={'computer'}
                     >

diff --git a/src/lib/contrib/feedback/components/modal/FeedbackModal.js b/src/lib/contrib/feedback/components/modal/FeedbackModal.js
@@ -102,7 +102,7 @@ export class FeedbackModalComponent extends Component {
                       <Label circular color={'blue'} key={'blue'}>
                         1
                       </Label>{' '}
-                      {i18next.t('Share your experience with this element')}
+                      {i18next.t('Share your experience with this content.')}
                     </Container>
                     <FeedbackTopics categories={categories} />
                     {errors.topics && (
@@ -123,7 +123,7 @@ export class FeedbackModalComponent extends Component {
                         2
                       </Label>{' '}
                       {i18next.t(
-                        'Tell the community a bit about your experiences with this element.'
+                        'Tell the community a bit about your experiences.'
                       )}
                     </Container>
                     <FeedbackText />