feat: add dpp render template 0.5.0

[huynguyen-hl]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Description

This is a Handlebar template that accurately reflects the new v0.5 DPP design.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Mobile UI:

Desktop UI:

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📕 storybook
• 🙅 no documentation needed

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟢	Statements	100%	0/0
🟢	Branches	100%	0/0
🟢	Functions	100%	0/0
🟢	Lines	100%	0/0

Test suite run success

0 tests passing in 0 suite.

Report generated by 🧪jest coverage report action from 623953e

[ldhyen99]

Hi, can you check again this UI on the desktop

I see in UI, which after "by" it should be in one line

[ldhyen99]

Should we put this text on one line?

[ldhyen99]

Can you help me check the History block? I can not see any data on credentialSubject.traceabilityInformation when using https://jargon.sh/user/unece/DigitalProductPassport/v/0.5.0/artefacts/jsonSchemas/DigitalProductPassport_instance.json?class=DigitalProductPassport_instance

The UI:

Thanks

[ldhyen99]

Should we format date following the design?

The UI

[ldhyen99]

Hi, can you add the ">" in Product composition

as the design

[huynguyen-hl]

@ldhyen99

Hi, can you check again this UI on the desktop

I see in UI, which after "by" it should be in one line

This was my mistake when implementing the UI. I’ve already fixed it in the latest commit. Thanks for pointing it out.

---

Should we put this text on one line?

Since your text is a bit long, it will move to the next line. I’ll adjust the text-decoration to fit the text length. Thanks for bringing this up.

---

Can you help me check the History block? I can not see any data on credentialSubject.traceabilityInformation when using https://jargon.sh/user/unece/DigitalProductPassport/v/0.5.0/artefacts/jsonSchemas/DigitalProductPassport_instance.json?class=DigitalProductPassport_instance

The UI:

Thanks

This was my error when implementing this UI. The designer and I didn’t realize that the data model had changed. I’ll update the data mapping for this UI accordingly. Thanks for raising this.

---

Should we format date following the design?

The UI

I don’t believe we can format dates directly in a Handlebars (hbs) template, as it doesn’t support that feature. To my knowledge, there isn’t a solution for formatting dates in an hbs template. If you have any ideas, please feel free to share, I’d appreciate it. Thanks for bringing this up.

---

Hi, can you add the ">" in Product composition

as the design

This is from an older design. We discussed it in this conversation: https://gosource.slack.com/archives/C05R3FRGA3U/p1729236646889239?thread_ts=1729158343.107749&cid=C05R3FRGA3U.

The DPP design hasn’t been updated to reflect this conversation.

[github-actions]

Code Coverage Report

Lines	Statements	Branches	Functions
	77.72% (2715/3493)	62.33% (518/831)	74.09% (306/413)

Title	Lines	Statements	Branches	Functions
All packages		77.72% (2715/3493)	62.33% (518/831)	74.09% (306/413)
Components		84.85% (510/601)	73.75% (118/160)	77.04% (94/122)
Mock app		69.18% (348/503)	48.41% (61/126)	67.56% (75/111)
Services		70.62% (880/1246)	52.6% (202/384)	75% (96/128)
UNTP test suite		57.78% (991/1715)	82.53% (137/166)	71.92% (41/57)
VC test suite		5.85% (12/205)		4.34% (2/46)