fix: Show social media names properly (#5554)

Author: iamareebjamal

app/models/social-link.js

@@ -4,7 +4,7 @@ import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo } from 'ember-data/relationships';
 import { computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
-import { socialMediaIdentifiers } from 'open-event-frontend/utils/dictionary/social-media';
+import { socialMediaIdentifiers, socialMediaMap } from 'open-event-frontend/utils/dictionary/social-media';
 
 export default ModelBase.extend({
   name       : attr('string'),
@@ -36,5 +36,9 @@ export default ModelBase.extend({
     return !this.isCustom;
   }),
 
+  displayName: computed('normalizedName', function() {
+    return socialMediaMap[this.normalizedName]?.name ?? this.name;
+  }),
+
   segmentedLink: computedSegmentedLink.bind(this)('link')
 });

app/templates/components/events/view/overview/general-info.hbs

@@ -48,7 +48,7 @@
         <td>
           {{#if this.data.socialLinks}}
             {{#each this.data.socialLinks as |socialLink index|~}}
-              {{if (not-eq index 0) ','}} <a href="{{socialLink.link}}" target="_blank" rel="noopener noreferrer">{{socialLink.name}}</a>
+              {{if (not-eq index 0) ','}} <a href="{{socialLink.link}}" target="_blank" rel="noopener noreferrer">{{socialLink.displayName}}</a>
             {{~/each}}
           {{else}}
             {{t 'No social links present. '}} <a href="{{href-to 'events.view.edit.basic-details'}}#social-links">{{t 'Click here to add'}}</a>

app/templates/components/public/social-links.hbs

@@ -11,7 +11,7 @@
     <div class="item">
       <i class="fitted {{socialLink.normalizedName}} disabled icon"></i>
       <div class="content">
-        <a href="{{socialLink.link}}" target="_blank" rel="noopener nofollow">{{socialLink.name}}</a>
+        <a href="{{socialLink.link}}" target="_blank" rel="noopener nofollow">{{socialLink.displayName}}</a>
       </div>
     </div>
   {{/each}}