- \n
News \n- \n
- \n
South Africa \n- \n
- \n
Eastern Cape \n \n - \n
Free State \n \n - \n
Gauteng \n \n - \n
KwaZulu-Natal \n \n - \n
Limpopo \n \n - \n
Mpumalanga \n \n - \n
Northern Cape \n \n - \n
North West \n \n - \n
Western Cape \n \n
\n - \n
Politics \n - \n
Crime and Courts \n \n - \n
World \n \n - \n
Africa \n \n - \n
BRICS \n \n Education \n- \n
- \n
Early Learning \n \n - \n
Matric \n \n - \n
Universities \n \n
\n - \n
- \n
Environment \n \n - \n
Weather \n \n - \n
Good News \n \n - \n
Energy \n \n
\n - \n
Opinion \n \n Business \n- \n
Business Report \n- \n
- \n
Economy \n \n - \n
Markets \n \n - \n
International \n \n - \n
Budget \n \n - \n
Opinion \n \n - \n
Entrepreneurs \n \n - \n
BRICS \n \n - \n
Window on China \n \n
\n - \n
Personal Finance \n- \n
- \n
My Money \n \n - \n
Debt \n \n - \n
Financial Planning \n \n - \n
Retirement \n \n - \n
Invest \n \n - \n
Insurance \n \n - \n
medical cover \n \n - \n
tax \n \n
\n - \n
Property \n- \n
- \n
Commercial \n \n - \n
Residential \n \n - \n
Home & Garden \n \n - \n
Simply Green \n \n
\n - \n
Technology \n- \n
- \n
Mobile Apps \n \n - \n
Gadgets \n \n - \n
Fintech \n \n - \n
Gaming \n \n - \n
Big Tech \n \n - \n
Esports \n \n - \n
Shopping \n \n
\n - \n
- \n
Advice \n \n - \n
Jobs \n \n - \n
Savings \n \n - \n
Hybrid Working \n \n
\n Lifestyle \n- \n
- \n
Food & Restaurants \n \n - \n
Health \n \n - \n
Style & Beauty \n \n - \n
Relationships \n \n - \n
Competitions \n \n - \n
Shopping \n \n
\n - \n
- \n
Entertainment \n- \n
- \n
Music \n \n - \n
Movies \n \n - \n
Streaming \n \n - \n
Celebrity \n \n - \n
Events \n \n - \n
What's On \n- \n
- \n
Joburg \n \n - \n
Durban \n \n - \n
Cape Town \n \n - \n
Pretoria \n \n
\n - \n
- \n
Books \n \n - \n
Royals \n \n - \n
TV \n \n
\n - \n
Sport \n- \n
- \n
Paralympics 2024 \n \n - \n
Soccer \n \n - \n
Soccer PSL \n \n - \n
Rugby \n \n - \n
Cricket \n \n - \n
Betting \n \n - \n More Sport\n
- \n
- \n
Athletics \n \n - \n
Golf \n \n - \n
Tennis \n \n - \n
Cycling \n \n - \n
Commonwealth Games \n \n - \n
MMA \n \n - \n
Horse Racing \n \n
\n - \n
\n - \n
Travel \n- \n
- \n
South Africa \n \n - \n
Africa \n \n - \n
World \n \n
\n {/* - \n
Video \n */}\n Motoring \n- \n
- \n
Car Launches \n \n - \n
Industry News \n \n - \n
Road Tests \n \n - \n
Motorsport \n \n
\n - \n
/, '').replace(/<\\/p>$/, '');\n }\n\n if (content.byLine) {\n article['author'] = stripTags(content.byLine);\n }\n\n article['published'] = formatPublished(content.publishDate);\n images = [];\n videos = [];\n youtubes = [];\n\n if (!content.mediaContainer) {\n _context4.next = 19;\n break;\n }\n\n _context4.next = 19;\n return Promise.all(content.mediaContainer.mediaLists.map( /*#__PURE__*/function () {\n var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(media) {\n return regeneratorRuntime.wrap(function _callee3$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return Promise.all(media.resources.map( /*#__PURE__*/function () {\n var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(resource) {\n var _resource$imageURL$ma, _resource$imageURL$ma2, url, id, videoObject;\n\n return regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n if (!(media.mediaType === 'Image' && resource.imageURL)) {\n _context2.next = 4;\n break;\n }\n\n if (resource.imageURL.match('youtube.com')) {\n _resource$imageURL$ma = resource.imageURL.match(/youtube\\.com\\/vi\\/(.*)$/), _resource$imageURL$ma2 = _slicedToArray(_resource$imageURL$ma, 2), url = _resource$imageURL$ma2[0], id = _resource$imageURL$ma2[1];\n youtubes.push({\n url: resource.imageURL,\n id: id.replace(/\\/default\\.jpg/, '')\n });\n } else {\n images.push(translateImageResource(resource));\n }\n\n _context2.next = 12;\n break;\n\n case 4:\n if (!(media.mediaType === 'Video' && resource.url)) {\n _context2.next = 11;\n break;\n }\n\n _context2.next = 7;\n return translateVideoResource(resource);\n\n case 7:\n videoObject = _context2.sent;\n videos.push(videoObject);\n _context2.next = 12;\n break;\n\n case 11:\n console.warn('resource ', content.contentKey, resource);\n\n case 12:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2);\n }));\n\n return function (_x9) {\n return _ref4.apply(this, arguments);\n };\n }()));\n\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }\n }, _callee3);\n }));\n\n return function (_x8) {\n return _ref3.apply(this, arguments);\n };\n }()));\n\n case 19:\n if (content.thumbnailURL) {\n images.push({\n url: content.thumbnailURL\n });\n }\n\n if (!(0, _ionUtil.isEmpty)(images)) {\n article['images'] = images;\n }\n\n if (videos.length) {\n article['videos'] = videos;\n }\n\n if (youtubes.length) {\n article['youtubes'] = youtubes;\n }\n\n bodyHTML = getBodyHTML(content);\n bodyHTML = stripCharacters(bodyHTML);\n article['bodyHTML'] = bodyHTML;\n paragraphs = getParagraphs(bodyHTML);\n _context4.next = 29;\n return getBodyLead(paragraphs);\n\n case 29:\n article['bodyLead'] = _context4.sent;\n _context4.next = 32;\n return getBodyMore(paragraphs);\n\n case 32:\n article['bodyMore'] = _context4.sent;\n relatedArticles = [];\n sourceRelatedArticles = content.relatedContent || content.relatedArticles || [];\n\n if (sourceRelatedArticles.length > 0) {\n sourceRelatedArticles.forEach(function (relatedArticle) {\n if (relatedArticle.externalUrl) {\n relatedArticles.push(relatedArticle);\n }\n });\n\n if (relatedArticles.length > 0) {\n article['relatedArticles'] = relatedArticles;\n }\n }\n\n return _context4.abrupt(\"return\", article);\n\n case 37:\n case \"end\":\n return _context4.stop();\n }\n }\n }, _callee4);\n }));\n return _parseArticleData.apply(this, arguments);\n}\n\nfunction getAbstract(content) {\n if (content.abstrct) {\n return content.abstrct;\n }\n\n if (content.summaryAbstract) {\n return content.summaryAbstract;\n }\n\n if (content.summaryAbstractHTML) {\n return content.summaryAbstractHTML;\n }\n\n if (content.abstractHTML) {\n return content.abstractHTML;\n }\n\n if (content[\"abstract\"]) {\n content[\"abstract\"];\n }\n\n return '';\n}\n\nfunction getHeadline(content) {\n if (content.headline) {\n return stripHeadline(content.headline);\n }\n\n if (content.summaryHeadline) {\n return stripHeadline(content.summaryHeadline);\n }\n\n if (content.label) {\n return stripHeadline(content.label);\n }\n\n return '';\n}\n\nfunction getParagraphs(html) {\n var fromIndex = 0;\n var paragraphs = [];\n\n while (true) {\n if (html.startsWith('
');\n\n if (index < 0) {\n return '
' + html + '
';\n } else {\n return '' + html.substring(0, index) + '
' + html.substring(index);\n }\n }\n}\n\nfunction translateVideoResource(_x3) {\n return _translateVideoResource.apply(this, arguments);\n}\n\nfunction _translateVideoResource() {\n _translateVideoResource = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(resource) {\n var url, videoMediaSrc, urlToArray;\n return regeneratorRuntime.wrap(function _callee5$(_context5) {\n while (1) {\n switch (_context5.prev = _context5.next) {\n case 0:\n url = resource.url;\n _context5.next = 3;\n return Requests.json({\n url: siteProps.videoServiceUrl + url + '&standAlone=true'\n });\n\n case 3:\n videoMediaSrc = _context5.sent;\n urlToArray = url.split('/'); //let initialMediaScripts = videoMediaSrc.match(/(') {\n paragraphs = paragraphs.slice(0, paragraphs.length - 1);\n }\n }\n\n var reversedParagraphs = paragraphs.slice(0).reverse();\n var sourceIndex;\n reversedParagraphs.find(function (para, reverseIndex) {\n var index = paragraphs.length - 1 - reverseIndex;\n\n if (sourceParaRegex.test(para)) {\n sourceIndex = index;\n return true;\n } else {\n return false;\n }\n });\n var info = true;\n var afpIndex;\n reversedParagraphs.forEach(function (paragraph, reverseIndex) {\n var index = paragraphs.length - 1 - reverseIndex;\n\n if (info) {\n if (/^\\s*[A-Z]/.test(paragraph)) {\n info = false;\n }\n } else if (/^\\s*\\* /.test(paragraph)) {\n if (paragraphs.length > 15 && reverseIndex > 5) {\n paragraphs[index] = paragraph.replace(/^\\s*\\*\\s+/, '• ');\n }\n } else if (/^\\s*\\*[A-Z]/.test(paragraph)) {\n if (paragraphs.length > 15 && reverseIndex > 5) {\n paragraphs[index] = paragraph.replace(/^\\s*\\*/, '• ');\n }\n }\n\n if (/ (-|–|–) AFP$/.test(paragraph)) {\n paragraphs[index] = paragraph.replace(/ (-|–|–) AFP$/, '');\n afpIndex = index;\n }\n });\n\n if (afpIndex) {\n paragraphs.splice(afpIndex + 1, 0, 'AFP');\n }\n\n return paragraphs.map(function (paragraph) {\n return new HtmlParagraphFormatter(paragraph);\n }).filter(function (formatter) {\n return formatter.filter();\n }).map(function (formatter) {\n try {\n var html = formatter.format();\n\n if (!html) {\n if (formatter.paragraph) {\n html = '
' + formatter.paragraph + '
';\n }\n }\n\n return html;\n } catch (err) {\n return '' + formatter.paragraph + '
';\n }\n }).value().join('\\n');\n}\n\nfunction getNewspaperSectionId(label) {\n if (/^([A-Za-z]*\\s)?Independent on Saturday$/i.test(label)) {\n return 'ios';\n } else if (/^[A-Z]?IOS$/i.test(label)) {\n return 'ios';\n } else if (/^Saturday Argus$/i.test(label)) {\n return 'weekend-argus';\n } else if (/^(The )?Star Motoring$/i.test(label)) {\n return 'the-star/motoring';\n }\n\n var section = newspaperLabels[label.toLowerCase()];\n\n if (section) {\n return section.category;\n }\n}\n\nvar HtmlParagraphFormatter = /*#__PURE__*/function () {\n function HtmlParagraphFormatter(paragraph) {\n _classCallCheck(this, HtmlParagraphFormatter);\n\n this.para = paragraph;\n this.para = this.para.trim();\n this.para = this.para.replace(/(\\*+)([A-Z])/, '$1 $2');\n this.text = this.para.replace(/(<([^>]+)>)/ig, '').trim();\n }\n\n _createClass(HtmlParagraphFormatter, [{\n key: \"filter\",\n value: function filter() {\n if (/^\").concat(_svgI + ' ' + this.para, \"
\");\n } else {\n return this.para;\n }\n }\n }, {\n key: \"formatSVG\",\n value: function formatSVG() {\n switch (this.style) {\n case 'email':\n return '';\n\n case 'newsletters':\n return \"\";\n\n case 'newswire':\n return \"\";\n\n case 'newspaper':\n return \"\";\n\n case 'facebook':\n return \"\";\n\n case 'twitter':\n return \"\";\n\n case 'linkedIn':\n return \"\";\n\n case 'forum':\n return \"\";\n\n case 'default':\n return \"\";\n\n case 'instagram':\n return \"\";\n\n case 'info':\n return \"\";\n\n case 'indy':\n return '';\n\n case 'bullet':\n return '';\n\n default:\n return false;\n }\n }\n }, {\n key: \"formatEmbeddedLink\",\n value: function formatEmbeddedLink() {\n this.para = this.para.replace(/\\.\\.+/, '.');\n this.para = this.para.replace(/\\s*([^<]*)\\s*<\\/strong>/ig, '$1');\n\n if (inlineStyleRemove.test(this.para)) {\n this.para = this.para.replace(inlineStyleRemove, '');\n this.para = this.para.replace(/(|<\\/span>)/gi, '');\n this.para = this.para.trim();\n }\n\n this.para = this.para.replace(/\\/\\/sbeta\\.iol\\.co\\.za/g, '//www.iol.co.za');\n this.para = this.para.replace(/\\/\\/www,iol\\.co\\.za/g, '//www.iol.co.za'); // erroneous comma e.g. see 1943061\n\n this.para = this.para.replace(/^(.*)<\\/span>$/ig, '$1');\n this.para = this.para.replace(/href=\"((?!mailto:)\\S*\\@(\\S*))\">/ig, 'href=\"mailto:$1\">');\n this.para = this.para.replace(/href=\"((?!mailto:) \\S*\\@(\\S*))\">/ig, 'href=\"mailto:$1\">');\n this.para = this.para.replace(//g, '');\n this.para = this.para.replace(/iol\\.co\\.za\\/business\\\"/g, 'iol.co.za/business-report\"');\n this.para = this.para.replace(/iol\\.co\\.za\\/business\\//g, 'iol.co.za/business-report/');\n\n if (/href=\"”[^\"]+”\"/.test(this.para)) {\n this.para = this.para.replace(/href=\"”([^\"]+)”\"/, 'href=\"$1\"');\n } else if (/^E-?mail your opinion/.test(this.text)) {\n this.para = this.para.replace(/<\\/?strong>/g, '');\n this.style = 'email';\n }\n\n this.para = this.para.replace(/ href=\"\\s+/, ' href=\"');\n this.para = this.para.replace(/ href=\\\"”http/, ' href=\"http');\n this.para = this.para.replace(/”\"/, '\"');\n this.para = this.para.replace(/ href=\\\"`/, ' href=\"');\n this.para = this.para.replace(/`\"/, '\"');\n this.para = this.para.replace(/href=\\\"www/g, 'href=\"http://www');\n this.para = this.para.replace(/href=\"http:\\/\\/www.africanindy/g, 'href=\"https://www.africanindy');\n this.text = this.para.replace(/(<([^>]+)>)/ig, '').trim();\n\n if (embeddedNewslettersLinkStyleMatch.test(this.para)) {\n this.style = 'newsletters';\n } else if (embeddedIolLinkStyleMatch.test(this.para)) {\n this.para = this.para.replace(/( | )+/g, ' ');\n\n if (/^\\s*\\s*$/.test(this.para)) {\n this.style = 'indy';\n }\n\n if (/mini/.test(siteProps.siteHost)) {\n this.para = this.para.replace(/\\/\\/www\\.iol\\.co\\.za/g, '//mini.iol.co.za');\n }\n } else if (embeddedFacebookLinkStyleMatch.test(this.para)) {\n this.style = 'facebook';\n } else if (embeddedTwitterLinkStyleMatch.test(this.para)) {\n this.style = 'twitter';\n\n if (/ href=\"https?:\\/\\/twitter.com\\/?\".*Daily News/.test(this.para)) {\n this.para = this.para.replace(/ href=\"https?:\\/\\/twitter.com\\/?\"/, ' href=\"https://twitter.com/dailynewssa\"');\n }\n } else if (embeddedLinkedInLinkStyleMatch.test(this.para)) {\n this.style = 'linkedIn';\n } else if (embeddedWholeLinkStyleMatch.test(this.para)) {\n if (/ href=\"https?:\\/\\/(www\\.)?babynet\\.co\\.za/i.test(this.para) && /join our Babynet forum/i.test(this.text)) {\n this.para = this.text.replace(/Babynet forum/i, 'Babynet forum');\n this.style = 'forum';\n }\n\n this.style = this.style || 'default';\n } else if (/^See also: /i.test(this.text)) {\n this.para = this.para.replace(/^You have successfully entered our competition
$2')\n // yield put({ type: SUBMIT_COMPETITION_SUCCESS, payload: article })\n } catch (e) {\n console.error('ERROR while submitting to competition', e.message)\n yield put({\n type: SUBMIT_COMPETITION_ERROR,\n payload: { message: e.message }\n })\n }\n}\n\nexport function * watchPreviewArticle () {\n yield takeLatest(SET_PREVIEW_ARTICLE, setPreviewArticleSaga)\n}\n\nexport function * watchSubmitCompetition () {\n yield takeEvery(SUBMIT_COMPETITION, submitCompetitionSaga)\n}\n\n// Saga actions\nexport const getVisitorId = state => state.user.visitorId\nexport const getSessionId = state => state.user.sessionId\nexport const getArticle = state => state.article.article\nexport const fetchArticleContent = contentKey => ({ type: FETCH_ARTICLE_CONTENT, isFetching: true, hasFetched: false, contentKey })\nexport const articleUrlVerified = () => ({ type: FETCH_ARTICLE_URL_VERIFIED })\nexport const fetchArticle = contentKey => ({ type: FETCH_ARTICLE, isFetching: true, hasFetched: false, contentKey })\nexport const setPreviewArticle = data => ({ type: SET_PREVIEW_ARTICLE, payload: data })\nexport const seedArticle = data => ({ type: SEED_ARTICLE, payload: data })\nexport const submitCompetition = data => ({ type: SUBMIT_COMPETITION, payload: data })\nexport const setProcessedArticle = () => ({ type: SET_PROCESSED_ARTICLE })\nexport const oovvuuArticleView = payload => ({ type: OOVVUU_ARTICLE_RENDER, payload })\nexport const toggleFontSize = () => ({ type: TOGGLE_FONT_SIZE })\nexport const getSocialSharePlatform = (data) => ({ type: SOCIAL_SHARE_PLATFORM, payload: data })\n\nfunction mapArticleFields (article) {\n // eslint-disable-next-line no-undef\n const partialArticle = JSON.parse(JSON.stringify(article))\n partialArticle.images = [article.image]\n partialArticle.abstract = article.bodyHTML\n delete partialArticle.bodyHTML\n return partialArticle\n}\n\nexport const initialState = {\n lastFetch: 0,\n fontSize: 17,\n didInvalidate: false,\n isFetching: false,\n hasFetched: false,\n hasProcessed: false,\n hasError: false,\n is404: false,\n checkCanonical: false,\n modified: null,\n canonical: null,\n error: null,\n article: null, // do not mutate these\n previewArticle: false,\n authorArticles: [],\n youMayLikeArticles: [],\n tags: [],\n socialSharePlatform: null\n}\n\nexport const Reducer = (\n state = initialState,\n { type, payload, author, authorArticles, path, modified, meta, youMayLikeArticles, tags }\n) => {\n switch (type) {\n case SET_PREVIEW_ARTICLE:\n return Object.assign({}, state, {\n previewArticle: true\n })\n case SEED_ARTICLE: {\n const isFullArticle = !payload.displayTag\n if (state.article?.contentKey === payload.contentKey) {\n return state\n }\n return Object.assign({}, state, {\n didInvalidate: false,\n isFetching: !isFullArticle,\n hasFetched: isFullArticle,\n hasProcessed: false,\n hasError: false,\n is404: false,\n checkCanonical: false,\n modified: null,\n canonical: null,\n error: null,\n article: isFullArticle ? payload : mapArticleFields(payload),\n author: isFullArticle ? undefined : payload.author,\n preloaded: true,\n previewArticle: false\n })\n }\n case SET_PROCESSED_ARTICLE:\n return Object.assign({}, state, {\n hasProcessed: true\n })\n case FETCH_ARTICLE_URL_VERIFIED:\n return Object.assign({}, state, {\n checkCanonical: false\n })\n case FETCH_ARTICLE_CONTENT:\n // Do not update the state\n return state\n case FETCH_ARTICLE:\n return Object.assign({}, state, {\n didInvalidate: false,\n isFetching: true,\n hasFetched: false,\n is404: false,\n hasError: false,\n checkCanonical: false,\n canonical: null,\n error: null\n })\n case FETCH_ARTICLE_CONTENT_ERROR:\n // Do not update the state\n return state\n case FETCH_ARTICLE_NOT_FOUND:\n return Object.assign({}, state, {\n hasError: true,\n is404: true,\n hasFetched: true,\n isFetching: false,\n didInvalidate: false,\n checkCanonical: false,\n canonical: null\n })\n case FETCH_ARTICLE_ERROR:\n return Object.assign({}, state, {\n hasError: true,\n is404: false,\n error: payload,\n hasFetched: true,\n isFetching: false,\n didInvalidate: false,\n checkCanonical: false,\n canonical: null\n })\n case FETCH_ARTICLE_CONTENT_SUCCESS:\n // Do not update the state\n return state\n case FETCH_ARTICLE_SUCCESS:\n return Object.assign({}, state, {\n lastFetch: new Date(),\n hasFetched: true,\n hasProcessed: false,\n preloaded: false,\n isFetching: false,\n didInvalidate: false,\n article: payload,\n authorArticles,\n youMayLikeArticles,\n checkCanonical: true,\n modified,\n canonical: path,\n author,\n tags,\n hasError: false,\n is404: false,\n error: null\n })\n case SOCIAL_SHARE_PLATFORM:\n return Object.assign({}, state, {\n socialSharePlatform: payload\n })\n case SUBMIT_COMPETITION:\n return Object.assign({}, state, {\n isSubmitting: true,\n hasSubmitted: false,\n hasErrorSubmit: false,\n formData: payload\n })\n case SUBMIT_COMPETITION_SUCCESS:\n return Object.assign({}, state, {\n isSubmitting: false,\n hasSubmitted: true,\n hasErrorSubmit: false\n })\n case SUBMIT_COMPETITION_ERROR:\n return Object.assign({}, state, {\n isSubmitting: false,\n hasSubmitted: false,\n hasErrorSubmit: true,\n message: payload\n })\n case TOGGLE_FONT_SIZE:\n return Object.assign({}, state, {\n fontSize: state.fontSize === 21 ? 13 : state.fontSize + 2\n })\n default:\n return state\n }\n}\n","import React, { useState, useEffect, useRef } from 'react'\nimport { x } from '@xstyled/styled-components'\nimport axios from 'axios'\n\nimport { useCookie, isBrowser } from './ui/utils'\nimport useHasMounted from '../../lib/useHasMounted'\nimport { getRegistration, urlB64ToUint8Array } from '../ServiceWorker'\nimport Popup from 'ion-popup'\nimport iolBlocks from '../../../assets/images/general/push-notifications.svg'\nimport StyledLink from './ui/Link'\n\nconst PushPrompt = () => {\n if (!isBrowser || !('PushManager' in window)) {\n return null\n }\n return