Release: develop -> main

.github/workflows/pr.yml

@@ -41,3 +41,6 @@ jobs:
         env:
           REACT_APP_BUILD_ID: ${{ github.run_number }}-${{ github.run_id }}
         run: npm run build:dev
+
+      - name: Build widget
+        run: npm run widget:dev

e2e/user-flows.spec.ts

@@ -140,7 +140,7 @@ test.describe('Account & Settings', () => {
   });
 
   test('should load mail settings page', async ({ page }) => {
-    await page.goto(`/settings/mail?session=${token}`);
+    await page.goto(`/account/mail?session=${token}`);
     await page.waitForLoadState('networkidle');
     await expect(page.locator('body')).toBeVisible();
   });

package.json

@@ -12,8 +12,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@dfx.swiss/react": "^1.3.0-beta.240",
-    "@dfx.swiss/react-components": "^1.3.0-beta.240",
+    "@dfx.swiss/react": "^1.3.0-beta.247",
+    "@dfx.swiss/react-components": "^1.3.0-beta.247",
     "@ledgerhq/hw-app-btc": "^6.24.1",
     "@ledgerhq/hw-app-eth": "^6.33.7",
     "@ledgerhq/hw-transport-webhid": "^6.27.19",

src/App.tsx

@@ -94,12 +94,12 @@ export const Routes = [
         element: withSuspense(<AccountScreen />),
       },
       {
-        path: 'settings',
-        element: withSuspense(<SettingsScreen />),
+        path: 'account/mail',
+        element: withSuspense(<EditMailScreen />),
       },
       {
-        path: 'settings/mail',
-        element: withSuspense(<EditMailScreen />),
+        path: 'settings',
+        element: withSuspense(<SettingsScreen />),
       },
       {
         path: 'login',

src/config/labels.ts

@@ -135,13 +135,19 @@ export const IssueTypeLabels = {
   [SupportIssueType.PARTNERSHIP_REQUEST]: 'Partnership request',
   [SupportIssueType.NOTIFICATION_OF_CHANGES]: 'Notification of changes',
   [SupportIssueType.BUG_REPORT]: 'Bug report',
+  [SupportIssueType.VERIFICATION_CALL]: 'Verification call',
 };
 
 export const IssueReasonLabels = {
   [SupportIssueReason.OTHER]: 'Other',
   [SupportIssueReason.DATA_REQUEST]: 'Data request',
   [SupportIssueReason.FUNDS_NOT_RECEIVED]: 'Funds not received',
   [SupportIssueReason.TRANSACTION_MISSING]: 'Transaction missing',
+  [SupportIssueReason.REJECT_CALL]: 'Reject call',
+  [SupportIssueReason.REPEAT_CALL]: 'Repeat call',
+  [SupportIssueReason.NAME_CHANGED]: 'Name changed',
+  [SupportIssueReason.ADDRESS_CHANGED]: 'Address changed',
+  [SupportIssueReason.CIVIL_STATUS_CHANGED]: 'Civil status changed',
 };
 
 export const FileTypeLabels = {
@@ -155,6 +161,8 @@ export const FileTypeLabels = {
   [FileType.RESIDENCE_PERMIT]: 'Residence permit',
   [FileType.ADDITIONAL_DOCUMENTS]: 'Additional documents',
   [FileType.AUTHORITY]: 'Power of Attorney',
+  [FileType.ADDRESS_CHANGE]: 'Address change',
+  [FileType.NAME_CHANGE]: 'Name change',
 };
 
 // --- ADDRESSES --- //

src/hooks/kyc-helper.hook.ts

@@ -79,6 +79,9 @@ export function useKycHelper(): KycHelperInterface {
     [KycStepName.DFX_APPROVAL]: 'DFX approval',
     [KycStepName.PAYMENT_AGREEMENT]: 'Assignment agreement',
     [KycStepName.RECALL_AGREEMENT]: 'Recall agreement',
+    [KycStepName.PHONE_CHANGE]: 'Phone number change',
+    [KycStepName.ADDRESS_CHANGE]: 'Address change',
+    [KycStepName.NAME_CHANGE]: 'Name change',
   };
 
   const typeMap: Record<KycStepType, string> = {

src/screens/account.screen.tsx

@@ -2,6 +2,7 @@ import {
   ApiError,
   Blockchain,
   DetailTransaction,
+  KycStepName,
   PdfDocument,
   Referral,
   UserAddress,
@@ -28,6 +29,7 @@ import {
   StyledDropdown,
   StyledInput,
   StyledLoadingSpinner,
+  StyledIconButton,
   StyledVerticalStack,
 } from '@dfx.swiss/react-components';
 import copy from 'copy-to-clipboard';
@@ -40,6 +42,7 @@ import { addressLabel } from 'src/config/labels';
 import { Urls } from 'src/config/urls';
 import { useLayoutContext } from 'src/contexts/layout.context';
 import { useWindowContext } from 'src/contexts/window.context';
+import { useKycHelper } from 'src/hooks/kyc-helper.hook';
 import { useUserGuard } from 'src/hooks/guard.hook';
 import { useLayoutOptions } from 'src/hooks/layout-config.hook';
 import { useNavigation } from 'src/hooks/navigation.hook';
@@ -86,6 +89,7 @@ export default function AccountScreen(): JSX.Element {
   const { canClose, isEmbedded } = useAppHandlingContext();
   const { isInitialized, setWallet } = useWalletContext();
   const { changeAddress } = useUserContext();
+  const { startStep } = useKycHelper();
   const { rootRef } = useLayoutContext();
   const { call } = useApi();
   const [transactions, setTransactions] = useState<Partial<DetailTransaction>[]>();
@@ -95,6 +99,7 @@ export default function AccountScreen(): JSX.Element {
   const [isPdfLoading, setIsPdfLoading] = useState(false);
   const [pdfError, setPdfError] = useState<string>();
   const [showRecommendationModal, setShowRecommendationModal] = useState(false);
+
   const [isDataLoading, setIsDataLoading] = useState(true);
   const [pdfBlockchains, setPdfBlockchains] = useState<Blockchain[]>([]);
 
@@ -297,18 +302,18 @@ export default function AccountScreen(): JSX.Element {
   const annualVolumeSum = annualVolumeItems?.reduce((acc, item) => acc + item.value, 0);
 
   const title = showPdfModal
-    ? translate('screens/home', 'PDF Download Address Report')
-    : showRecommendationModal
-    ? translate('screens/recommendation', 'Create Invitation')
-    : isEmbedded
-    ? translate('screens/home', 'DFX services')
-    : translate('screens/home', 'Account');
+      ? translate('screens/home', 'PDF Download Address Report')
+      : showRecommendationModal
+        ? translate('screens/recommendation', 'Create Invitation')
+        : isEmbedded
+          ? translate('screens/home', 'DFX services')
+          : translate('screens/home', 'Account');
   const hasBackButton = (canClose && !isEmbedded) || showPdfModal || showRecommendationModal;
   const onBack = showPdfModal
-    ? closePdfModal
-    : showRecommendationModal
-    ? () => setShowRecommendationModal(false)
-    : undefined;
+      ? closePdfModal
+      : showRecommendationModal
+        ? () => setShowRecommendationModal(false)
+        : undefined;
   const image = 'https://dfx.swiss/images/app/berge.jpg';
 
   useLayoutOptions({ title, backButton: hasBackButton, onBack });
@@ -330,16 +335,35 @@ export default function AccountScreen(): JSX.Element {
               minWidth={false}
             >
               {profile.mail && (
-                <StyledDataTableRow label={translate('screens/home', 'Email')}>{profile.mail}</StyledDataTableRow>
+                <StyledDataTableRow label={translate('screens/home', 'Email')}>
+                  <div className="flex items-center gap-2">
+                    {profile.mail}
+                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => navigate('/account/mail', { setRedirect: true })} inline />
+                  </div>
+                </StyledDataTableRow>
+              )}
+              {profile.phone && (
+                <StyledDataTableRow label={translate('screens/kyc', 'Phone number')}>
+                  <div className="flex items-center gap-2">
+                    {profile.phone}
+                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => startStep(KycStepName.PHONE_CHANGE)} inline />
+                  </div>
+                </StyledDataTableRow>
               )}
               {(profile.firstName || profile.lastName) && (
                 <StyledDataTableRow label={translate('screens/home', 'Name')}>
-                  {[profile.firstName, profile.lastName].filter(Boolean).join(' ')}
+                  <div className="flex items-center gap-2">
+                    {[profile.firstName, profile.lastName].filter(Boolean).join(' ')}
+                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => startStep(KycStepName.NAME_CHANGE)} inline />
+                  </div>
                 </StyledDataTableRow>
               )}
               {profile.address && (
                 <StyledDataTableRow label={translate('screens/home', 'Address')}>
-                  {formatAddress(profile.address)}
+                  <div className="flex items-center gap-2">
+                    {formatAddress(profile.address)}
+                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => startStep(KycStepName.ADDRESS_CHANGE)} inline />
+                  </div>
                 </StyledDataTableRow>
               )}
               {profile.organizationName && (

src/screens/edit-mail.screen.tsx

@@ -67,7 +67,7 @@ export default function EditMailScreen(): JSX.Element {
     setIsSubmitting(true);
 
     verifyMail(data.token)
-      .then(() => navigate('/settings'))
+      .then(() => navigate('/account'))
       .catch((e: ApiError) =>
         e.statusCode === 403
           ? setTokenInvalid(true)
@@ -112,7 +112,7 @@ export default function EditMailScreen(): JSX.Element {
           prefill={user?.mail}
           placeholder={translate('screens/kyc', 'Email address')}
           validation={Validations.Mail}
-          onCancel={() => navigate('/settings')}
+          onCancel={() => navigate('/account')}
           onEdit={onSubmit}
         />
       ) : (