feat: /lend/* pages server switch-up by christian14b · Pull Request #3991 · kiva/ui

christian14b · 2022-07-07T19:27:03Z

This pr makes the following server changes for /lend/* pages :

url	server	behavior
/lend/id	Added in ui	redirects to monolith for users that should see old page
/lend/category_name	Added in ui	new url for /lend-by-category/category_name
/funded/id	Removed from routes	move this content into borrower profile page so it's all the same route

These changes come along with monolith updates #10728

…Profile page

dyersituations · 2022-07-07T20:00:06Z

@@ -0,0 +1,553 @@
+<template>


Is there a good way to share this fairly large component? It looks like the only difference from the existing page is the use of WwwPage.

I think we can just delete the existing funded borrower profile page.

mcstover · 2022-07-08T00:51:18Z

 	},
+	{
+		path: '/lend/:id(\\d+)',
+		redirect: '/lend-beta/:id'


Won't this still have pages loading at the /lend-beta/### url? Why not define the BorrowerProfile page component here as well and just use /lend/###...

Yeah.. sounds right. @emuvente would this imply setting a canonical url for the Borrower Profile page?

This redirect should be the other way around:

{ path: '/lend-beta/:id', redirect: '/lend/:id' }

And the route for the borrower profile should be changed from /lend-beta/:id to /lend/:id(\\d+):

{ name: 'borrowerProfile', path: '/lend/:id(\\d+)', component: () => import('@/pages/BorrowerProfile/BorrowerProfile'), meta: { excludeFromStaticSitemap: true, unbounce: true, }, },

Then there is no need to set a canonical, because the default will be fine.

mcstover · 2022-07-08T00:57:30Z

+			const queryString = Object.keys(query)
+				.map(key => `${key}=${query[key]}`)
+				.join('&');
+			this.$router.push(`/lend-classic/${this.$route.params.id}?query=${queryString}`);


I think there are some other conditions we'll need to check here...and maybe be able to get rid of this exp cookie check altogether...

If a loan is inPfp we redirect to legacy (https://github.com/kiva/kiva/blob/development/sites/www_kiva/server/views/Xb/Loan/LoanView.php#L95)

If the lender is an RTP Translator we skip the experiment (https://github.com/kiva/kiva/blob/development/httpdocs/classes/API/Experiment/LoanDetailBeta.php#L22)

@mcstover Sounds good! Is there a way to get if lender has a RTP Volunteer role?

@christian14b As of my latest merged PR 1 above is not true. UI will now render inPfp loans

@mcstover I think we can ignore those other conditions now. UI will render inPfp loans and volunteers will be directed to /lend-classic from Viva after the monolith pr is live, correct?

@christian14b This check and redirect should happen in the prefetch instead of created. Here's an example of doing a redirect from preFetch:

ui/src/components/Forms/JoinTeamForm.vue

Lines 66 to 87 in 05094cf

preFetch(config, client, { route }) {

return client.query({

query: TeamInfoFromId,

variables: {

team_id: numeral(route.query.team_id).value(),

team_recruitment_id: numeral(route.query.id).value(),

team_ids: [numeral(route.query.team_id).value()],

}

}).then(({ data }) => {

const isMember = _get(data, 'my.teams.values', []).length;

// if lender is a member proceed to authenticate/redirect

// this route will handle the redirect to basket/payment or checkout

if (isMember) {

return Promise.reject({

path: '/authenticate/redirect',

query: {

team_id: numeral(route.query.team_id).value(),

promo_id: numeral(route.query.promo_id).value(),

}

});

}

});

emuvente · 2022-08-04T20:55:41Z

@@ -0,0 +1,553 @@
+<template>


I think we can just delete the existing funded borrower profile page.

emuvente · 2022-08-04T23:23:17Z

+			const queryString = Object.keys(query)
+				.map(key => `${key}=${query[key]}`)
+				.join('&');
+			this.$router.push(`/lend-classic/${this.$route.params.id}?query=${queryString}`);


@mcstover I think we can ignore those other conditions now. UI will render inPfp loans and volunteers will be directed to /lend-classic from Viva after the monolith pr is live, correct?

@christian14b This check and redirect should happen in the prefetch instead of created. Here's an example of doing a redirect from preFetch:

ui/src/components/Forms/JoinTeamForm.vue

Lines 66 to 87 in 05094cf

preFetch(config, client, { route }) {

return client.query({

query: TeamInfoFromId,

variables: {

team_id: numeral(route.query.team_id).value(),

team_recruitment_id: numeral(route.query.id).value(),

team_ids: [numeral(route.query.team_id).value()],

}

}).then(({ data }) => {

const isMember = _get(data, 'my.teams.values', []).length;

// if lender is a member proceed to authenticate/redirect

// this route will handle the redirect to basket/payment or checkout

if (isMember) {

return Promise.reject({

path: '/authenticate/redirect',

query: {

team_id: numeral(route.query.team_id).value(),

promo_id: numeral(route.query.promo_id).value(),

}

});

}

});

emuvente · 2022-08-04T23:34:19Z

 	},
+	{
+		path: '/lend/:id(\\d+)',
+		redirect: '/lend-beta/:id'


This redirect should be the other way around:

{ path: '/lend-beta/:id', redirect: '/lend/:id' }

And the route for the borrower profile should be changed from /lend-beta/:id to /lend/:id(\\d+):

{ name: 'borrowerProfile', path: '/lend/:id(\\d+)', component: () => import('@/pages/BorrowerProfile/BorrowerProfile'), meta: { excludeFromStaticSitemap: true, unbounce: true, }, },

Then there is no need to set a canonical, because the default will be fine.

emuvente · 2022-08-08T17:59:29Z

+		};
+	},
+	apollo: {
+		preFetch(config, client, { cookieStore, route }) {


This prefetch is going to be called even if the funded borrower profile isn't shown, which will slow down the loading of the page. Instead, this data could be fetched conditionally in the BorrowerProfile prefetch or could be merged with the borrower profile query, and then passed into this component through props.

emuvente · 2022-08-08T18:01:57Z

 		id="borrower-profile"
 	>
-		<article class="tw-relative md:tw-bg-secondary">
+		<article v-if="amountLeft" class="tw-relative md:tw-bg-secondary">


This should also check that the loan status is "fundraising", because loans can also have an amount left when they are paying pack.

eddieferrer · 2022-08-09T17:23:44Z

@christian14b I noticed in KivaClassicBasicLoanCard.vue there is a check for this.$route.path.includes('funded'); -- this will have to be refactored since you are removing the funded route

…asicLoanCard

emuvente

Looks good to me 👍

mcstover · 2022-10-14T18:51:07Z

+							path: `/lend-classic/${route.params.id}`,
+							query,
+						});
+					}


Maybe in the near future we'll be able to get rid of this expCookie stuff and just provide a query param to allow bypass to the legacy bp...or a link in the page.

Christien Bedon added 2 commits July 7, 2022 10:36

feat: migrate /lend/:id and lend/:category route from monolith

4b1bd32

feat: migrate fundedBorrowerProfile page into a component to Borrower…

5ca6f0b

…Profile page

christian14b requested review from edwinf-barreram, emuvente and mcstover July 7, 2022 19:27

christian14b marked this pull request as ready for review July 7, 2022 19:33

dyersituations reviewed Jul 7, 2022

View reviewed changes

mcstover reviewed Jul 8, 2022

View reviewed changes

Comment thread src/router/routes.js

Merge branch 'main' into feature/MARS-165

f5f00b7

emuvente reviewed Aug 8, 2022

View reviewed changes

Christien Bedon added 3 commits August 9, 2022 10:17

fix: solve conflicts

353261d

fix: update fundedBorrowerProfile and routes

97f86da

fix: redirect to lend-classic in prefetch

71113ea

Christien Bedon added 7 commits August 9, 2022 13:04

refactor: migrate funded preFetch logic to BorrowerProfiler

5c3b77d

refactor: remove logic related to deleted funded page in KivaClassicB…

fd7685b

…asicLoanCard

fix: remaining money showed in funded loan

fde4aa6

fix: validate loan status is fundraising

4a8a691

fix: solve conflicts

ea4e00a

fix: remove unused code

4232146

fix: solve conflicts

754a1f7

emuvente reviewed Aug 16, 2022

View reviewed changes

Comment thread src/components/LoanCards/KivaClassicBasicLoanCard.vue

Comment thread src/pages/BorrowerProfile/BorrowerProfile.vue

Comment thread src/components/BorrowerProfile/FundedBorrowerProfile.vue Outdated

Christien Bedon and others added 6 commits August 17, 2022 13:28

fix: solve conflicts

e1237b6

fix: basketItems and funded page conditional rendering

8695da4

fix: remove unnecessary basket func

616a324

Merge branch 'main' into feature/MARS-165

62a0dad

fix: address borrower profile loading issues

e407111

fix: include query params in redirect

b9380bc

emuvente approved these changes Oct 14, 2022

View reviewed changes

mcstover reviewed Oct 14, 2022

View reviewed changes

mcstover approved these changes Oct 14, 2022

View reviewed changes

emuvente merged commit 5325838 into main Oct 17, 2022

emuvente deleted the feature/MARS-165 branch October 17, 2022 18:49

	preFetch(config, client, { route }) {
	return client.query({
	query: TeamInfoFromId,
	variables: {
	team_id: numeral(route.query.team_id).value(),
	team_recruitment_id: numeral(route.query.id).value(),
	team_ids: [numeral(route.query.team_id).value()],
	}
	}).then(({ data }) => {
	const isMember = _get(data, 'my.teams.values', []).length;
	// if lender is a member proceed to authenticate/redirect
	// this route will handle the redirect to basket/payment or checkout
	if (isMember) {
	return Promise.reject({
	path: '/authenticate/redirect',
	query: {
	team_id: numeral(route.query.team_id).value(),
	promo_id: numeral(route.query.promo_id).value(),
	}
	});
	}
	});

Conversation

christian14b commented Jul 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dyersituations Jul 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eddieferrer Jul 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eddieferrer commented Aug 9, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

emuvente left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

christian14b commented Jul 7, 2022 •

edited

Loading

dyersituations Jul 7, 2022 •

edited

Loading

eddieferrer Jul 14, 2022 •

edited

Loading