Fix offer fulfillment detection + consistencies between ClaimView and ConfirmGiftView #167

Merged
jose merged 8 commits from claimview-fullfills-offer into master 2025-09-08 08:37:03 +00:00
2 changed files with 29 additions and 21 deletions
Showing only changes of commit 19f0c270d3 - Show all commits

View File

@@ -125,16 +125,20 @@
</div>
<!-- Show offer fulfillment if this give fulfills an offer -->
<div v-if="offerFulfillment?.offerHandleId">
<div v-if="detailsForGiveOfferFulfillment?.offerHandleId">
<!-- router-link to /claim/ only changes URL path -->
<a
class="text-blue-500 mt-4 cursor-pointer"
@click="showDifferentClaimPage(offerFulfillment.offerHandleId)"
@click="
showDifferentClaimPage(
detailsForGiveOfferFulfillment.offerHandleId,
)
"
>
This fulfills
{{
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
offerFulfillment.offerType || "Offer",
detailsForGiveOfferFulfillment.offerType || "Offer",
)
}}
<font-awesome
@@ -185,7 +189,7 @@
</div>
</div>
</li>
</ul>
</ul>
</div>
</div>
</div>
@@ -574,7 +578,7 @@ export default class ClaimView extends Vue {
};
} | null = null;
// Additional offer information extracted from the fulfills array
offerFulfillment: {
detailsForGiveOfferFulfillment: {
offerHandleId?: string;
offerType?: string;
} | null = null;
@@ -710,7 +714,7 @@ export default class ClaimView extends Vue {
this.confsVisibleToIdList = [];
this.detailsForGive = null;
this.detailsForOffer = null;
this.offerFulfillment = null;
this.detailsForGiveOfferFulfillment = null;
this.projectInfo = null;
this.fullClaim = null;
this.fullClaimDump = "";
@@ -728,25 +732,25 @@ export default class ClaimView extends Vue {
*/
extractOfferFulfillment() {
if (!this.detailsForGive?.fullClaim?.fulfills) {
this.offerFulfillment = null;
this.detailsForGiveOfferFulfillment = null;
return;
trentlarson marked this conversation as resolved Outdated

There is one more case here: the fullClaim.fulfills can potentially be a single claim object that is not in an array. (This is the case for most of the schema.org properties: they are defined with a particular type but they could be an array of that type.) So check for fulfills["@type"] of "Offer" to set other fulfills variables.

There is one more case here: the fullClaim.fulfills can potentially be a single claim object that is not in an array. (This is the case for most of the schema.org properties: they are defined with a particular type but they could be an array of that type.) So check for `fulfills["@type"]` of "Offer" to set other `fulfills` variables.
Outdated
Review

What's a good way to recreate a claim object that has this particular structure? Gives that fulfill project offers always have @type: PlanAction, @type: Offer and @type: DonateAction. Gives that fulfill person offers always have @type: Offer and @type: DonateAction.

What's a good way to recreate a claim object that has this particular structure? Gives that fulfill project offers always have `@type: PlanAction`, `@type: Offer` and `@type: DonateAction`. Gives that fulfill person offers always have `@type: Offer` and `@type: DonateAction`.

You will have to create one by hand. I'll show how in the issue https://app.clickup.com/t/86b027guj

You will have to create one by hand. I'll show how in the issue https://app.clickup.com/t/86b027guj
Outdated
Review

Thanks, the video was very helpful! I was able to update the code block to test for both array and single-object fulfills. Now, "This fulfills an offer" shows up for both scenarios.

Since the logic is used in two places, I made a utility method for it.

Thanks, the video was very helpful! I was able to update the code block to test for both array and single-object `fulfills`. Now, "This fulfills an offer" shows up for both scenarios. Since the logic is used in two places, I made a utility method for it.
}
const fulfills = this.detailsForGive.fullClaim.fulfills;
if (!Array.isArray(fulfills)) {
this.offerFulfillment = null;
this.detailsForGiveOfferFulfillment = null;
return;
}
// Find the Offer in the fulfills array
const offerFulfill = fulfills.find((item) => item["@type"] === "Offer");
if (offerFulfill) {
this.offerFulfillment = {
this.detailsForGiveOfferFulfillment = {
offerHandleId: offerFulfill.identifier,
offerType: offerFulfill["@type"],
};
} else {
this.offerFulfillment = null;
this.detailsForGiveOfferFulfillment = null;
}
}
@@ -815,7 +819,7 @@ export default class ClaimView extends Vue {
* @param prefix - Optional prefix to add
* @returns Formatted string
*/
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(text: string): string {
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(text: string): string {
const word = this.capitalizeAndInsertSpacesBeforeCaps(text);
if (word) {
// if the word starts with a vowel, use "an" instead of "a"

View File

@@ -102,7 +102,9 @@
<router-link
:to="
'/project/' +
encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
encodeURIComponent(
giveDetails?.fulfillsPlanHandleId || '',
)
"
class="text-blue-500 mt-2 cursor-pointer"
>
@@ -113,21 +115,23 @@
/>
</router-link>
</div>
<!-- Show offer fulfillment if this give fulfills an offer -->
<div v-if="offerFulfillment?.offerHandleId">
<div v-if="giveDetailsOfferFulfillment?.offerHandleId">
<!-- router-link to /claim/ only changes URL path -->
<router-link
:to="
'/claim/' +
encodeURIComponent(offerFulfillment.offerHandleId || '')
encodeURIComponent(
giveDetailsOfferFulfillment.offerHandleId || '',
)
"
class="text-blue-500 mt-2 cursor-pointer"
>
This fulfills
{{
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
offerFulfillment.offerType || "Offer",
giveDetailsOfferFulfillment.offerType || "Offer",
)
}}
<font-awesome
@@ -490,7 +494,7 @@ export default class ConfirmGiftView extends Vue {
confsVisibleToIdList: string[] = []; // list of DIDs that can see any confirmer
giveDetails?: GiveSummaryRecord;
// Additional offer information extracted from the fulfills array
offerFulfillment: {
giveDetailsOfferFulfillment: {
offerHandleId?: string;
offerType?: string;
} | null = null;
@@ -715,25 +719,25 @@ export default class ConfirmGiftView extends Vue {
*/
private extractOfferFulfillment() {
if (!this.giveDetails?.fullClaim?.fulfills) {
this.offerFulfillment = null;
this.giveDetailsOfferFulfillment = null;
return;
}
const fulfills = this.giveDetails.fullClaim.fulfills;
if (!Array.isArray(fulfills)) {
this.offerFulfillment = null;
this.giveDetailsOfferFulfillment = null;
return;
}
// Find the Offer in the fulfills array
const offerFulfill = fulfills.find((item) => item["@type"] === "Offer");
if (offerFulfill) {
this.offerFulfillment = {
this.giveDetailsOfferFulfillment = {
offerHandleId: offerFulfill.identifier,
offerType: offerFulfill["@type"],
};
} else {
this.offerFulfillment = null;
this.giveDetailsOfferFulfillment = null;
}
}