Certificate btn on last

[AQIB-NAWAB]

What kind of change does this PR introduce?
feature

Issue Number:

• Closes When the user finishes the last lesson, the 'Next' button should be replaced with 'Get Your Certificate.' #142

Screenshots/videos:
Screencast from 2025-03-14 21-09-26.webm

Summary
Add a button of get your certificate when user is at last lesson and complete the tour.

Does this PR introduce a breaking change?
No

[AQIB-NAWAB]

@JeelRajodiya I test it on all scenarios

• When user complete the whole tour the certificate button instantly enabled.
• if user have not completed the tour and move to last lesson it will show locked
• if user complete the last lesson but others are pending it will still show button locked.

Please review and let me know if there any thing need to improve.

[AQIB-NAWAB]

Screencast.from.2025-03-16.10-25-37.webm

I made some changes in the condition. Now, whenever a user finishes the last lesson—whether it is the first, middle, or last—it will render the 'Get Your Certificate' button.

[AQIB-NAWAB]

@JeelRajodiya Please review the PR
Thanks

[AQIB-NAWAB]

I have test it around multiple scenarios , it is working fine. Let me know if there are any issues.

Thanks

[Copilot]

Pull Request Overview

This PR adds a feature to display a certificate button when the user reaches the final lesson and completes the tour. Key changes include updating function imports, adding state and an effect to detect tour completion, and conditionally displaying the CertificateButton component.

Comments suppressed due to low confidence (1)

app/components/CodeEditor/CodeEditor.tsx:141

• [nitpick] The fragment wrapping CertificateButton appears unnecessary. Removing the fragment could simplify the JSX and improve readability.

<> <CertificateButton /> </>

[AQIB-NAWAB]

I removed the fragments as well. @JeelRajodiya Please let me know if there any changes need to made.
Thanks

[Copilot]

Pull Request Overview

This PR introduces a new feature that displays a certificate button when the user is at the last lesson and has completed the tour.

• Added a CertificateButton component import and integration in the code editor controls.
• Introduced state management to determine if the tour has been completed.

Comments suppressed due to low confidence (1)

app/components/CodeEditor/CodeEditor.tsx:116

• [nitpick] Consider renaming 'isTheTourCompletedState' to 'isTourCompleted' for brevity and consistency with the imported 'isTheTourCompleted' function.

const [isTheTourCompletedState, setIsTheTourCompletedState] = useState(false);