Compine the payment uri steps into one

Emurgo · Jul 28, 2021 · cbec94c · cbec94c
1 parent 9264f08
commit cbec94c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 21 deletions.
diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js
@@ -13,10 +13,22 @@ import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 const messages = defineMessages({
-  explanationLine1: {
+  uriExplanationLine1: {
     id: 'profile.uriPrompt.form.explanation',
     defaultMessage: '!!!Do you want to enable Cardano payment URLs?',
   },
+  uriExplanationLine2: {
+    id: 'profile.uriPrompt.form.explanationLine2',
+    defaultMessage: '!!!Yoroi allows you to generate special links that you can share with someone else and allow them to make an easy payment to you. You will be able to create these links right away.',
+  },
+  uriExplanationLine3: {
+    id: 'profile.uriPrompt.form.explanationLine3',
+    defaultMessage: '!!!But to allow you to click on such links you need to give Yoroi a special permission in the browser. Click "Allow" if you wish to do so.',
+  },
+  uriExplanationLine4: {
+    id: 'profile.uriPrompt.form.explanationLine4',
+    defaultMessage: '!!!You don\'t have to decide right now, you can always enable this feature in the \"Settings > Blockchain\" section.',
+  },
 });
 
 type Props = {|
@@ -55,8 +67,10 @@ export default class UriPromptForm extends Component<Props> {
           </span>
 
           <div className={styles.explanation}>
-            {intl.formatMessage(messages.explanationLine1)}&nbsp;
-            {intl.formatMessage(globalMessages.uriExplanation)}
+            <p>{intl.formatMessage(messages.uriExplanationLine1)}</p>
+            <p>{intl.formatMessage(messages.uriExplanationLine2)}</p>
+            <p>{intl.formatMessage(messages.uriExplanationLine3)}</p>
+            <p>{intl.formatMessage(messages.uriExplanationLine4)}</p>
           </div>
 
           <div className={styles.buttonsWrapper}>

diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.scss b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.scss
@@ -1,5 +1,5 @@
 .component {
-  padding-top: 122px;
+  padding-top: 60px;
   display: flex;
   height: 100%;
   justify-content: center;
@@ -15,6 +15,10 @@
     color: var(--cmn-default-color-grey);
     font-size: 14px;
     line-height: 22px;
+    p {
+      display: block;
+      margin-bottom: 8px;
+    }
   }
 
   .aboutSvg {

diff --git a/packages/yoroi-extension/app/containers/profile/UriPromptPage.js b/packages/yoroi-extension/app/containers/profile/UriPromptPage.js
@@ -35,7 +35,7 @@ type GeneratedData = typeof UriPromptPage.prototype.generated;
 export default class UriPromptPage extends Component<InjectedOrGenerated<GeneratedData>> {
 
   @observable
-  selectedChoice: CHOICES | null = null;
+  isAccepted: boolean = false;
 
   static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
     intl: intlShape.isRequired,
@@ -44,45 +44,66 @@ export default class UriPromptPage extends Component<InjectedOrGenerated<Generat
   onAccept: void => void = () => {
     registerProtocols();
     runInAction(() => {
-      this.selectedChoice = Choices.ACCEPT;
+      this.isAccepted = true;
     });
   };
 
   onSkip: void => void = () => {
-    runInAction(() => {
-      this.selectedChoice = Choices.SKIP;
-    });
+    // runInAction(() => {
+    //   this.selectedChoice = Choices.SKIP;
+    // });
+    this.generated.actions.profile.acceptUriScheme.trigger()
   };
 
   onBack: void => void = () => {
     runInAction(() => {
-      this.selectedChoice = null;
+      this.isAccepted = false;
     });
   };
 
   _getContent: (() => Node) = () => {
-    switch (this.selectedChoice) {
-      case null:
+
+    if (!this.isAccepted) {
         return <UriPromptForm
           onAccept={this.onAccept}
           onSkip={this.onSkip}
           classicTheme={this.generated.stores.profile.isClassicTheme}
         />;
-      case Choices.ACCEPT:
+    }
+
+    if (this.isAccepted) {
         return <UriAccept
           onConfirm={this.generated.actions.profile.acceptUriScheme.trigger}
           onBack={this.onBack}
           classicTheme={this.generated.stores.profile.isClassicTheme}
         />;
-      case Choices.SKIP:
-        return <UriSkip
-          onConfirm={this.generated.actions.profile.acceptUriScheme.trigger}
-          onBack={this.onBack}
-          classicTheme={this.generated.stores.profile.isClassicTheme}
-        />;
-      default:
-        throw new Error('UriPromptPage::_getContent Should never happen');
     }
+
+    throw new Error('UriPromptPage::_getContent Should never happen');
+    // switch (this.isAccepted) {
+    //   case !this.isAccepted:
+    //     // return <UriPromptForm
+    //     //   onAccept={this.onAccept}
+    //     //   onSkip={this.onSkip}
+    //     //   classicTheme={this.generated.stores.profile.isClassicTheme}
+    //     // />;
+    //     return <h1>I should be shown first</h1>
+    //   case this.isAccepted:
+    //     // return <UriAccept
+    //     //   onConfirm={this.generated.actions.profile.acceptUriScheme.trigger}
+    //     //   onBack={this.onBack}
+    //     //   classicTheme={this.generated.stores.profile.isClassicTheme}
+    //     // />;
+    //     return <h1>I should be shwon second</h1>
+    //   // case Choices.SKIP:
+    //   //   return <UriSkip
+    //   //     onConfirm={this.generated.actions.profile.acceptUriScheme.trigger}
+    //   //     onBack={this.onBack}
+    //   //     classicTheme={this.generated.stores.profile.isClassicTheme}
+    //   //   />;
+    //   default:
+    //     throw new Error('UriPromptPage::_getContent Should never happen');
+    // }
   }
 
   render(): Node {

diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json
@@ -229,6 +229,9 @@
   "profile.termsOfUse.title": "Terms Of Use",
   "profile.uriAccept.seePrompt": "Simply <strong>click <em>Allow</em></strong> to enable payment URLs",
   "profile.uriPrompt.form.explanation": "Do you want to enable Cardano payment URLs?",
+  "profile.uriPrompt.form.explanationLine2": "Yoroi allows you to generate special links that you can share with someone else and allow them to make an easy payment to you. You will be able to create these links right away.",
+  "profile.uriPrompt.form.explanationLine3": "But to allow you to click on such links you need to give Yoroi a special permission in the browser. Click \"Allow\" if you wish to do so.",
+  "profile.uriPrompt.form.explanationLine4": "You don't have to decide right now, you can always enable this feature in the \"Settings > Blockchain\" section.",
   "profile.uriPrompt.form.skipLabel": "Skip",
   "profile.uriSkip.descriptionLine1": "Although you will not be able to use payment URLs, you will still be able to generate them.",
   "profile.uriSkip.descriptionLine2": "You can enable this feature any time in the settings menu.",